TinyMCE error: Cannot read property 'body' of null - tinymce

This how I am initializing it. The problem comes in when opening on the second time. And this only happens in Chrome. Mozilla Firefox works well.
tinyMCE.init({
mode : "exact",
elements : "email_content",
theme : "advanced",
theme_advanced_resizing : true,
plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,code,|,forecolor,backcolor"
});

I had the same problem after chrome update(version 85) , but this line before tinyMCE.init works to me:
tinyMCE.EditorManager.editors = [];
or
tinyMCE.editors = [];

Related

how to integrate kcfinder in tinymce 4?

Has anyone successfully integrated kcfinder to tinymce 4?
There's a solution in the link below but it does not contain all the source code needed.
http://www.tinymce.com/forum/viewtopic.php?id=30896
you should copy kcfinder folder in your server and just set config.php file
set uploadURL and uploadDIR
'uploadURL' => "http://localhost/smartytest/upload/",
'uploadDir' => "k:\xampp\htdocs\smartytest\upload\",
USE THIS:
tinyMCE.init({mode:"exact",
skin:"o2k7",
mode: "exact",
width : "650",
height:"200",
paste_text_use_dialog : true,
skin_variant:"silver",
relative_urls : true,
convert_urls : false,
elements:"contents",
theme:"advanced",
content_css : "javascript/tinymce/custom_css.css",
plugins:"pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,safari,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",
theme_advanced_buttons1:"bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,formatselect,fontselect,fontsizeselect, cut,copy,paste,pastetext",
theme_advanced_buttons2:"link,unlink,image,cleanup,code,|,forecolor,backcolor, table,advhr,|,sub,sup,|,fullscreen,|,bullist,numlist,outdent,indent,undo,redo",
// theme_advanced_buttons3:"table,advhr,|,sub,sup,|,fullscreen",
theme_advanced_toolbar_location :"top",
theme_advanced_toolbar_align :"left",
theme_advanced_statusbar_location :"none",
theme_advanced_path : false,
paste_retain_style_properties :"all",
theme_advanced_resizing :false,
file_browser_callback:"openKCFinder"});
function openKCFinder(c,a,b,d){tinyMCE.activeEditor.windowManager.open({file:"javascript/kcfinder/browse.php?opener=tinymce&type="+b+"&dir="+b+"/public",title:"KCFinder",width:700,height:500,resizable:"yes",inline:true,close_previous:"no",popup_css:false},{window:d,input:c});return false};

TinyMCE is adding &nbsp instead of the space when using the word paste

I am using the TinyMCE editor and the paste from word function.
My problem is that when I have spaces, tinyMCE transform them in &nbsp and I would like to keep the normal space.
Is there a filtering function or something similar which can be used in tinyMCe.init which will do that?
Thank you.
I have found a soultion, I am not sure that's the proper one, but it works. In the tinyMCE.init, I added:
paste_auto_cleanup_on_paste : true,
paste_postprocess : function(pl, o) {
// remove extra line breaks
o.node.innerHTML = o.node.innerHTML.replace(/ /ig, " ");
}
Here is the entire tinyMCE init:
function addTinyMCE_Authors_AffiliationsWord() {
jQuery('#dialog-authors_affiliations_parsing').tinymce({
script_url: '/js/tiny_mce_3.2.7_jquery/jscripts/tiny_mce/tiny_mce.js',
width: "800px",
height: "250px",
mode: "textarea",
theme : "advanced",
plugins : "paste",
// Theme options
theme_advanced_buttons1 : "pasteword",
theme_advanced_buttons2 :"",
theme_advanced_buttons3 :"",
theme_advanced_buttons4 :"",
theme_advanced_toolbar_location : "bottom",
valid_elements : "p",
paste_auto_cleanup_on_paste : true,
paste_postprocess : function(pl, o) {
// remove &nbsp
o.node.innerHTML = o.node.innerHTML.replace(/ /ig, " ");
}
});
}
ENJOY...
have you tried to add:
entity_encoding: 'raw' when initializing tinyMce? it helped in my case.
Regards.

< and quotation change to HTML entities in tinyMCE

In DB, it is the following.
<img src="../../../../assets/images/frontpage/big_tree.jpg" alt=""
width="516" height="200" />
But when it is in tinyMCE, all the <, > and " change to html entities like this.
So it does not display in FF.
<img src="../../../../assets/images/frontpage/big_tree.jpg"
alt="" width="516" height="200" />
How can I avoid this problem?
I have the following tinyMCE init
tinyMCE.init({
mode : "textareas",
/* // if I want to add to a specific area then use this
mode : "specific_textareas",
editor_selector : "mceEditor", // add class="mceEditor" where you want to add tinyMCE
*/
theme : "advanced",
plugins : "advimage,advlink,media,contextmenu",
//theme_advanced_buttons1_add_before : "newdocument,separator",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,forecolor,backcolor,liststyle",
theme_advanced_buttons2_add_before: "cut,copy,separator,",
theme_advanced_buttons3_add_before : "",
theme_advanced_buttons3_add : "media",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
//extended_valid_elements : "hr[class|width|size|noshade]",
extended_valid_elements : "span[class|align|style]",
file_browser_callback : "ajaxfilemanager",
paste_use_dialog : false,
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : true,
apply_source_formatting : true,
force_br_newlines : true,
force_p_newlines : false,
relative_urls : true
});
Thanks in advance.
In php you can use html_entity_decode.
You need to eigther save the tinymce contents in the DB as is ("<" and ">" as real characters) or you will need to entity decode your database content before rendering them into the web page. Depending on your script language (perl, php, python,...) there are special functions to do this.
I had same issue
I corrected it by adding
$_POST = array_map( 'stripslashes', $_POST );

tinymce not working on firefox

I have three textareas using tinymce as text area. They all work in chrome but not on firefox. I am loading the text from mysql using php code. The first textarea loads ok and works, but the other two briefly flashes the contents and then it's gone. I'm not able to insert anything in the box. Here is the script:
<!-- Load TinyMCE -->
<script type="text/javascript"
src="functions/tinymce/jscripts/tiny_mce/jquery.tinymce.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('textarea.tinymce').tinymce({
// Location of TinyMCE script
script_url : 'functions/tinymce/jscripts/tiny_mce/tiny_mce.js',
// General options
plugins : '-examples', // - tells TinyMCE to skip the loading of the plugin
mode : "textareas",
theme : "advanced",
theme_advanced_buttons1 :
"mylistbox,mysplitbutton,bold,italic,underline,separator,strikethrough,justifyleft,
justifycenter,justifyright,justifyfull,bullist,numlist,undo,redo,link,
unlink",
theme_advanced_buttons2 : "code,forecolor,backcolor",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom"
});
$('textarea.tinymce2').tinymce({
// Location of TinyMCE script
script_url : 'functions/tinymce/jscripts/tiny_mce/tiny_mce.js',
// General options
plugins : '-examples', // - tells TinyMCE to skip the loading of the plugin
mode : "textareas",
theme : "advanced",
theme_advanced_buttons1:
"mylistbox,mysplitbutton,bold,italic,underline,separator,strikethrough,justifyleft,
justifycenter,justifyright,justifyfull,bullist,numlist,undo,redo,link,unlink",
theme_advanced_buttons2 : "code,forecolor,backcolor",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom"
});
$('textarea.tinymce3').tinymce({
// Location of TinyMCE script
script_url : 'functions/tinymce/jscripts/tiny_mce/tiny_mce.js',
// General options
plugins : '-examples', // - tells TinyMCE to skip the loading of the plugin
mode : "textareas",
theme : "advanced",
theme_advanced_buttons1:
"mylistbox,mysplitbutton,bold,italic,underline,separator,strikethrough,justifyleft,
justifycenter,justifyright,justifyfull,bullist,numlist,undo,redo,link,unlink",
theme_advanced_buttons2 : "code,forecolor,backcolor",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom"
});
});
</script>
<!-- /TinyMCE -->
Any ideas how to fix this?
Thanks Randy
It is a bug either in tinyMCE or in the latest FF update.
Either way the workaround is to change some CSS value (by for example making the editable content area bigger / smaller by dragging) to let it redraw the content.
There is also a ticket about it on the TinyMCE bug tracker. Until that bug is fixed you would have to go for the workaround.
your javascript is off. if you are using web developer tools addon, then check on the top left side of the browser and click on disable > disable javascript > uncheck disable all scripts. that will work.

tinymce text editor doesn't load in facebox modal window

I'm trying to use tinymce editor with facebox modal window. But tinymce doesn't load when the modal window is opened and I get no errors of Jscript in firebug
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox();
})
tinyMCE.init({
theme : "advanced",
mode : "textareas",
plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_resizing : true
});
</script>
any help?
Now I'm working on another project and I had the same issue again
This time I used colorbox and put this code onComplete event of fancybox.
$(".edit").colorbox({
onComplete : function(){ tinyMCE.execCommand('mceAddControl', true, "textare_id"); },
onClosed : function(){ tinyMCE.execCommand('mceRemoveControl', true, "textare_id");}
});
and It worked thanks to gutch for his answer on
TinyMCE - undefined 'e','j','t' when loading for a second time in fancyboxm
P.S. Tinymce init function defined in the index file of whole project