Why is my tinyMCE initialization failing? - tinymce

the variable in double brackets comes from a Jinja/Flask template
here is the value of that variable, it is string
'<div id="item" >test</div>'
<script type="text/javascript">
tinymce.init({
selector: 'textarea',
setup: function (editor) {
editor.on('init', function (e) {
editor.setContent("{{editor_content|safe}}");
});
},
plugins: [
'advlist autolink autoresize link image imagetools lists charmap print preview hr anchor pagebreak spellchecker',
'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
'save table directionality template paste codesample'
],
imagetools_toolbar: "rotateleft rotateright | flipv fliph | editimage imageoptions",
toolbar: 'insertfile undo redo paste | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons | codesample',
images_upload_url: '{{ url_for("imageuploader") }}',
automatic_uploads: true,
images_reuse_filename: false,
images_upload_base_path: '/static/uploads',
visualblocks_default_state: true,
forced_root_block : 'p',
});
</script>
My code fails, this is what the browser console shows
Uncaught SyntaxError: missing ) after argument list
{{editor_content|safe}} instructs Jinja not to escape the code as it should be HTML
Update
More troubleshooting shows me that this is OK
"<div id='test'>sdsdsd</div>"
while this is not
'<div id="test">sdsdsd</div>'
How do I get around this because the source of the content of my editor uses " and not '

Turns out that inconsistent use of " in the initialization string is causing this issue
You should use " within tags for properties and you should use ' when initializing the editor
editor.setContent('{{editor_content|safe}}');

Related

TinyMCE - how to make toolbar expanded by default

I am having TinyMCE-6 with the following toolbar options:
menubar: false,
plugins: ['searchreplace', 'link', 'anchor', 'image', 'table', 'charmap','fullscreen','code', 'preview',
'lists','help','wordcount'],
toolbar: 'cut copy paste pastetext | undo redo | searchreplace | selectall | link unlink anchor | ' +
'image| table | hr| charmap |fullscreen | code | preview print | ' +
'bold italic underline strikethrough subscript superscript | removeformat |'+
'numlist bullist | outdent indent | blockquote |alignleft aligncenter alignright alignjustify |'+
'blocks fontfamily fontsize | forecolor backcolor|help |' +
'',
When it is rendered in a page, all the toolbars are not shown by default.
I have to click on the 3 dots on the right to expand the whole toolbar.
Is it possible to have all the toolbar expanded by default while loading tinyMCE ?
You can do what you want with an API call you add to your TinyMCE configuration.
The TinyMCE command to use is ToggleToolbarDrawer. You can use the setup function in your TinyMCE init to call this API:
tinymce.init({
...
setup: function (editor) {
editor.on('init', function (e) {
editor.execCommand('ToggleToolbarDrawer')
});
}
...
});
Here is a working example: https://fiddle.tiny.cloud/skiaab
We can make use of toolbar_mode configuration in TinyMCE
toolbar_mode :'wrap',
https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/#wrap
Working example - https://fiddle.tiny.cloud/duiaab/1

How can I turn off TinyMCE deprecated messages

I have installed TinyMCE Version: 5.10.3 (2022-02-09)
this is the code:
tinymce.init({
selector: 'textarea.redactor-editor',
plugins: 'preview paste searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap hr pagebreak nonbreaking toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap quickbars emoticons',
menubar: 'file edit view insert format tools table help',
toolbar: 'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen preview | image media template link codesample',
image_advtab: true,
height: 500,
extended_valid_elements: "pre[*],script[*],style[*]",
valid_children: "+body[style|script],pre[script|div|p|br|span|img|style|h1|h2|h3|h4|h5],*[*]",
valid_elements : "*[*]",
quickbars_insert_toolbar: '',
quickbars_selection_toolbar: '',
image_caption: true,
quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
noneditable_noneditable_class: 'mceNonEditable',
toolbar_mode: 'sliding'
});
and when I am landing to my page everytime it is showing this warning message:
The following deprecated features are currently enabled, these will be removed in TinyMCE 6.0. See https://www.tiny.cloud/docs/release-notes/6.0-upcoming-changes/ for more information. Plugins: - imagetools (moving to premium) - toc (moving to premium)
How can I turn off this message?
add deprecation_warnings: false, to you're init

Integrating Responsive File Manager - icon showing only in the last TinyMCE editor

I have a php page with multiple tinymce editors (textarea) with same classname and seperate id. My issue is the image upload icon is showing only on the last editor but not in the above editors. I am using tinymce version 4.7.2.
This is the image upload button i need to show:
Here is the full image of my php page
Please help me to solve this issue.
Why not just add the responsivefilemanager to the toolbar then you dont need the image
TinymceModule.withConfig({
plugins: ['link image code responsivefilemanager'],
toolbar: 'responsivefilemanager',
menubar: false,
external_filemanager_path: '.../filemanager/',
filemanager_title: 'Content Server',
filemanager_crossdomain: true,
external_plugins: {"filemanager": ".../filemanager/plugin.min.js" }
})
file_picker_callback will solve the above issue. for ref refer this link http://www.responsivefilemanager.com/demo.php
tinymce.init({
selector: "textarea#content, textarea#details",theme: "modern",width: 500,height: 200,
plugins: [
"advlist autolink link image lists charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars insertdatetime media nonbreaking",
"table contextmenu directionality emoticons paste textcolor responsivefilemanager code"
],
toolbar1: "undo redo | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | styleselect",
toolbar2: "| responsivefilemanager | link unlink anchor | image media | forecolor backcolor | print preview code ",
image_advtab: true ,
file_picker_types:'file image media',
file_picker_callback:function(cb,value,meta){var width=window.innerWidth-30;var height=window.innerHeight-60;if(width>1800)width=1800;if(height>1200)height=1200;if(width>600){var width_reduce=(width-20)%138;width=width-width_reduce+10;}var urltype=2;if(meta.filetype=='image'){urltype=1;}if(meta.filetype=='media'){urltype=3;}var title="RESPONSIVE FileManager";if(typeof this.settings.filemanager_title!=="undefined"&&this.settings.filemanager_title){title=this.settings.filemanager_title;}var akey="key";if(typeof this.settings.filemanager_access_key!=="undefined"&&this.settings.filemanager_access_key){akey=this.settings.filemanager_access_key;}var sort_by="";if(typeof this.settings.filemanager_sort_by!=="undefined"&&this.settings.filemanager_sort_by){sort_by="&sort_by="+this.settings.filemanager_sort_by;}var descending="false";if(typeof this.settings.filemanager_descending!=="undefined"&&this.settings.filemanager_descending){descending=this.settings.filemanager_descending;}var fldr="";if(typeof this.settings.filemanager_subfolder!=="undefined"&&this.settings.filemanager_subfolder){fldr="&fldr="+this.settings.filemanager_subfolder;}var crossdomain="";if(typeof this.settings.filemanager_crossdomain!=="undefined"&&this.settings.filemanager_crossdomain){crossdomain="&crossdomain=1";if(window.addEventListener){window.addEventListener('message',filemanager_onMessage,false);}else{window.attachEvent('onmessage',filemanager_onMessage);}}tinymce.activeEditor.windowManager.open({title:title,file:this.settings.external_filemanager_path+'dialog.php?type='+urltype+'&descending='+descending+sort_by+fldr+crossdomain+'&lang='+this.settings.language+'&akey='+akey,width:width,height:height,resizable:true,maximizable:true,inline:1},{setUrl:function(url){cb(url);}});},
external_filemanager_path:"filemanager/",
filemanager_title:"Responsive Filemanager" ,
object_resizing : false,
external_plugins: { "filemanager" : "../../../filemanager/plugin.min.js"}
});

Can't get ResponsiveFileManager to work with TinyMCE

When I click on the insert image button to upload an image I get this pop up error
<script>tinymce.init({
selector: 'textarea',
height: 400,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview
anchor', 'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code '
],
filemanager_crossdomain: true,
external_filemanager_path:"responsive_filemanager/filemanager/",
external_plugins: { "filemanager" :
"/responsive_filemanager/filemanager/plugin.min.js"},
toolbar1: "undo redo | bold italic underline | alignleft
aligncenter alignright alignjustify | bullist numlist outdent
indent | styleselect",
toolbar2: "| responsivefilemanager | link unlink anchor | image
media | forecolor backcolor | print preview code ",
image_advtab: true ,
filemanager_title:"Responsive Filemanager" ,
});</script>
Here is my script for the filemanager/TinyMCE, I havent touched the config.php file either. All I have done is downloaded the files and directed to my script to the correct path and it pulls the buttons for the filemanager in okay on TinyMCE but when I go to upload an image I get that error pop up.
Open lfm.php. This is in the config folder if you're using Laravel. Change:
'base_directory' => 'public',
to the directory the filemanager is in. For example:
'base_directory' => '../another_directory',

remove the extra p tag in tinyMCE

When you copy and paste from a word document in to the tinyMCE editor sometimes there are unwanted <p> tags:
<p> </p>
<div class="starpasspro-example-question">
<p><strong>Example: Levels of strategy</strong></p>
<p>Microsoft is one of the world’s largest organisations, providing corporate solutions to businesses throughout the world to help them realise their fullest potential. At Microsoft, there are three levels of strategy as follows:</p>
</div>
<p> </p>
Here the code that generates I want to remove the <p> tags any way to do that ?
Add these Lines in your tinymce.init({ });
Example:
tinymce.init({
forced_root_block : "",
force_br_newlines : true,
force_p_newlines : false,
});
it will be helpful.
Add into your tinymce.yml file
forced_root_block : ""
force_br_newlines : true
force_p_newlines : false
Yes, this is possible. There is a secure way to remove all that html elements you want to removed (you may define what to keep). It is by using the tinymce config params paste_preprocess and a custom function strip_tags. Check it out here.
Add this to your functions.php file and the standard p-tags
tags will be removed by adding some parameters to the tiny_mce_before_init hook. If you want to see how it works, you can read further on this page: https://codex.wordpress.org/TinyMCE
////////////////////////////////////////////////////////////////////////
//////////REMOVE STANDARD <P> FROM TINYMCE EDITOR/////////////////////////
///////////////////////////////////////////////////////////////////////
function my_format_TinyMCE( $in ) {
$in['forced_root_block'] = "";
$in['force_br_newlines'] = TRUE;
$in['force_p_newlines'] = FALSE;
return $in;
}
add_filter( 'tiny_mce_before_init', 'my_format_TinyMCE' );
USE HtmlEncode="false" in BoundField
<asp:BoundField DataField="PostContent" HtmlEncode="false" />
Thanks to Prahalad Gaggar!
I had the same problem and I solved it by reading this topic: https://stackoverflow.com/a/22397116/14491024
here is my code with each time adding <p<br/<br/</p so annoying)
function HTMLeditor( parameters) {
$('#exampleModalCenter').modal('show');
tinymce.init({
height: 500,
selector: ".modal-body",
theme: 'modern',
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 imagetools'
],
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,
setup: function (editor) {
editor.on('init', function (e) {
editor.setContent(parameters);
});
}
});
}
And here is with problem SOLVED:
function HTMLeditor( parameters) {
$('#exampleModalCenter').modal('show');
tinymce.init({
height: 500,
selector: ".modal-body",
theme: 'modern',
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 imagetools'
],
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,
//remove <p><br /><br /></p>
forced_root_block: "" ,
force_br_newlines: true,
force_p_newlines: false,
setup: function (editor) {
editor.on('init', function (e) {
editor.setContent(parameters);
});
}
});
}