I'm on a project where I need to use TinyMCE for textarea in wordpress.
The problem is when I save my code, TinyMCE add <br> around tags like <ol> or <ul> and I don't know how to fix that
There is my code for tinyMCE and the result I have :
tinymce.init({ selector:'.tiny',
plugins: "lists, link, paste",
menubar: false,
branding: false,
paste_as_text: true,
toolbar: "formatselect | bold italic | numlist bullist | blockquote | alignleft aligncenter alignright | link | removeformat | indent | outdent | undo redo",
forced_root_block : false,
force_br_newlines : true,
force_p_newlines : false,
lists_indent_on_tab: false,
fix_list_elements : false,
forced_root_block : ''
});
The result
Apparently you need more informations so there is :
1) Before I saved the page :
Before
2) After the save :
After
I really don't know why it does this...
forced_root_block : false,
force_br_newlines : true,
force_p_newlines : false,
These three lines are causing this behavior.
Related
I have a vue app with symfony backend. I use tinyMCE to edit documents which are generated by mpdf. In mpdf twig content I want to add page footer on some pages, and somepages without footer so I creeated html tag to enable or disable this footer. My HTML of this custom tags looks like this:
<pagefooter
name="NotLastPageFooter"
content-left=""
content-center="{PAGENO}/{nbpg}"
content-right=""
footer-style="font-size:10px">
</pagefooter>
<pagefooter
name="lastPageFooter"
content-left=""
content-center="{PAGENO}/{nbpg}"
content-right=""
footer-style="font-size:10px">
</pagefooter>
<setpagefooter
name="lastPageFooter"
value="off"
/>
<setpagefooter
name="NotLastPageFooter"
value="on"
/>
Whenever I edit generated document via TinyMCE it deletes my html blocks provided by mpdf and edited documents have no page footer. Below my tinyMCE config:
<editor
#onKeyUp="onDocumentUpdate(document, index, $event)"
:value="editor"
entity_encoding="raw"
output-format="html"
:init="{
allow_conditional_comments: false,
allow_unsafe_link_target: true,
convert_fonts_to_spans : false,
keep_styles: true,
custom_elements: 'pagefooter,setpagefooter',
extended_valid_elements :'setpagefooter[name],setpagefooter[value],pagefooter[name],pagefooter[content-center],pagefooter[content-right],pagefooter[footer-style]',
height: 600,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor code',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar:
'undo redo | formatselect | bold italic backcolor | \
alignleft aligncenter alignright alignjustify | \
bullist numlist outdent indent | removeformat | help code',
}"
/>
I suspect you are not using extended_valid_elements correctly. You don't repeat the tag multiple times in the configuration. The documentation has working examples:
https://www.tiny.cloud/docs/configure/content-filtering/#extended_valid_elements
For example:
extended_valid_elements : 'img[class|src|border=0|alt|title]'
...or...
extended_valid_elements :'setpagefooter[name|value],pagefooter[name|content-center|content-right|footer-style]',
Note that you put all the attributes in one set of brackets. Here is an example that appears to work for your example content:
http://fiddle.tinymce.com/iehaab
I'm using <editor *ngIf="defaultContent" [(ngModel)]='defaultContent' [init]='editorConfig'>
https://github.com/tinymce/tinymce-angular
this is my configuration below -
export const editorConfig = {
skin_url: '/assets/skins/lightgray',
theme: 'modern',
content_css: targetElt.getAttribute('href'),
height: 300,
branding: false,
// content_security_policy: 'script-src \'self\' \'unsafe-inline\'; connect-src \'self\'; img-src \'self\';' +
// 'style-src \'self\' \'unsafe-inline\';',
plugins: 'textcolor anchor link lists wordcount fullscreen hr code table', // template
hidden_input: false,
menubar: false,
toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify |' +
'numlist bullist outdent indent | paste | section | row | info | fullscreen | template | removeformat |' +
'undo redo | code | table',
templates: [
{
title: 'Some title 1', description: 'Some desc 1', content: '<div class="col-sm-12"><div class="row widget-sd">' +
'<div class="sd-img col-sm-3"><img src="https://image.flaticon.com/icons/svg/321/321718.svg"></div>' +
'<div class="col-sm-9"></div></div></div>'
}
],
table_default_attributes: {
'border': '0'
},
table_default_styles: {
'border-collapsed': 'collapse',
'width': '100%'
},
table_responsive_width: true,
table_advtab: false
}
When i click on editor full screen and then i click on browser back screen and again visited the editor screen then screen goes freeze, no scrollbar is appearing on my theme.
I have removed the .mce-fullscreen class on ngOnDestroy.
document.body.className =
document.body.className.replace('mce-fullscreen', '');
$('html').removeClass('mce-fullscreen');
- wp_register_script( 'tinymce-min-js',
"//cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.1/tinymce.min.js");
wp_enqueue_script( 'tinymce-min-js' );
<textarea name="message"></textarea>
tinymce.init({
toolbar1: "code | preview | fullscreen | emotEventns | blockquote | cut copy paste | undo redo removeformat | save",
toolbar2: "table | image | link | charmap | hr | media | alignleft aligncenter alignright alignjustify | outdent indent",
toolbar3: "fontselect fontsizeselect | forecolor backcolor | bold italic underline strikethrough | subscript superscript",
plugins: "code advlist fullscreen media preview table image link textcolor charmap emotEventns",
menubar: false,
width: 800,
height: 470,
resize: false,
fullpage: false,
selector: "textarea"
});
I have tried this but I am not getting editor .I want use editor for text area. Please try to solve this.
Thank you in advance
Try this code.
<script>
jQuery( document ).ready( function( $ ) {
tinymce.init({
toolbar1: "code | preview | fullscreen | emotEventns | blockquote | cut copy paste | undo redo removeformat | save",
toolbar2: "table | image | link | charmap | hr | media | alignleft aligncenter alignright alignjustify | outdent indent",
toolbar3: "fontselect fontsizeselect | forecolor backcolor | bold italic underline strikethrough | subscript superscript",
//plugins: "code advlist fullscreen media preview table image link textcolor charmap emotEventns",
menubar: false,
width: 800,
height: 470,
resize: false,
fullpage: false,
selector: "textarea"
});
});
</script>
jQuery( document ).ready( function( $ ) {
tinymce.init({
toolbar1: "code | preview | fullscreen | emotEventns | blockquote | cut copy paste | undo redo removeformat | save",
toolbar2: "table | image | link | charmap | hr | media | alignleft aligncenter alignright alignjustify | outdent indent",
toolbar3: "fontselect fontsizeselect | forecolor backcolor | bold italic underline strikethrough | subscript superscript",
//plugins: "code advlist fullscreen media preview table image link textcolor charmap emotEventns",
menubar: false,
width: 800,
height: 470,
resize: false,
fullpage: false,
selector: "textarea"
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.1/tinymce.min.js"></script>
<textarea></textarea>
<script>
</script>
Not sure where your trying to show the editor, but use the built in wp_editor function!
see here wp_editor
&
here tutsplus.com
$settings = array(
'wpautop' => false, // auto add p tags to paragraphs
'media_buttons' => false, // show or hide the media upload button
'textarea_rows' => 10, // how many rows you want in the text area
'teeny' => false // show or hide the compact editor view
);
$textAreaContent = 'get the data from database';
$editorID = 'id_of_the_editor';
wp_editor( $textAreaContent, $editorID, $settings );
this should produce a nice text editor like...
I've install TinyMCE v4.1.9 text editor. so I found hyperlink and Image buttons ara missing, so I insert the plugins for both of them and they both appear but, they just appear only if I add one plugin (when I add Image --> appear | when I add hyperlink --> appear | when I add both, when the hyperlink is the last, link button appear and image disappear and if the image is the last, same thing, the image button appear and link disappear).
here are my codes:
tinymce.init({
selector: "textarea#core",
language : 'ar',
directionality : 'rtl',
plugins: "autoresize",
fontsize_formats: "14px",
content_css : "css/custom_content.min.css",
theme_advanced_font_sizes: "10px,12px,13px,14px,16px,18px,20px",
font_size_style_values : "10px,12px,13px,14px,16px,18px,20px",
plugins: "link",
plugins: "image",
theme: 'modern'
help please
this is the right answer
tinymce.init({
selector: "textarea#core",
theme: "modern",
language : 'ar',
directionality : 'rtl',
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern"
],
toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
toolbar2: "print preview media | forecolor backcolor emoticons",
image_advtab: true,
templates: [
{title: 'Test template 1', content: 'Test 1'},
{title: 'Test template 2', content: 'Test 2'}
]
});
I'm trying to pass variable from tinyMCE to jbimages. What i have is:
tinymceInstance = tinymce.init({
selector: "textarea#desc",
theme: "modern",
skin: "light",
relative_urls: false,
width: 800,
height: 300,
relative_urls: false,
plugins: [
"link image preview hr anchor pagebreak ",
"searchreplace wordcount visualblocks visualchars code nonbreaking",
"directionality textcolor jbimages"
],
content_css: "css/content.css",
toolbar: "insertfile undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | link image jbimages | print preview media fullpage | forecolor | spellchecker",
myVariable: 12345
});
jbimages is a plugin to upload images. In config.php file in jbimages
I have the following code that is executed:
$config['img_path'] = '/images'; // Relative to domain name
$config['upload_path'] = $_SERVER['DOCUMENT_ROOT'] . $config['img_path']; // Physical path. [Usually works fine like this]
How to retrieve variable myVariable from tinyMCE and use it in config.php. I tried a few things that I found on the web, but nothing seems to work.
Thanks in advance.
I think you will need to pass it trough a session variable using jQuery. Your tinymce runs on client side (your computer) while php runs on the server.
Take a look at this question and answers. You might find what your looking for there:
Setting session variable in php through jquery click event