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.
Related
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 = [];
I am using the TinyMCE editor and the paste from word function.
My problem is that when I have spaces, tinyMCE transform them in   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  
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.
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 );
i have 5 pages that use tinyMCE, all of them are in iframe but just one them works out.
how can i solve this problem ?
the init code is:
tinyMCE.init({
// General options
mode: "exact",
theme: "advanced",
elements: "txtBody",
dialog_type: "modal",
width: "500",
height: "400",
plugins: "autolink,lists,table,advhr,media,searchreplace,contextmenu,paste,directionality,noneditable,xhtmlxtras,template",
theme_advanced_buttons1: "styleselect,formatselect,fontselect,fontsizeselect,justifyleft,justifycenter,justifyright,justifyfull,",
theme_advanced_buttons2: "bold,italic,underline,strikethrough,cut,copy,paste,pastetext,pasteword,search,replace,insertfile,insertimage,",
theme_advanced_buttons3: "undo,redo,link,unlink,image,cleanup,code,forecolor,backcolortablecontrols,removeformat,sub,sup,media,advhr,ltr,rtl",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "right",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,
skin: "o2k7",
skin_variant: "silver",
content_css: "../../App_Themes/Document.css"
});
The most logical explanation is that you're only specifying one of them with your elements option. But please provide more detail if that's not the case.
Eighter you need to specify all elements (ids of your html elments which should be turned into an editor instance) when using mode: 'exact,':
elements: 'my_html_element_id1,my_html_element_id2,my_html_element_id3,my_html_element_id,my_html_element_id5',
or you use mode: "textareas", and take care that there are exactly 5 textareas on your page and with different IDs.
There are also other possible settings. You might check them out having a lokk at the tinymce documentation concerning the mode setting.
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_resizing : true,
theme_advanced_resizing_min_height : 100,
try above in your code toolbar alignment is 'right' instead of 'left'
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