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
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 = [];
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};
Does anyone know how to allow having custom uppercase tags in TinyMCE? It seems that TinyMCE doesn't like uppercase tags, even though they have been declared as valid. Here is my TinyMCE config:
tinyMCE.init({
mode: "specific_textareas",
theme: "advanced",
language: "en",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_buttons1: "bold,italic,|,sub,sup,|,charmap,|,table,|,code",
theme_advanced_path: false,
theme_advanced_resizing: true,
plugins: "fullscreen,paste,table",
paste_auto_cleanup_on_paste : true,
relative_urls: false,
width: "300",
height: "300",
theme_advanced_resizing_min_height : "10",
force_br_newlines : true,
force_p_newlines : false,
forced_root_block : '',
entity_encoding: "raw",
valid_elements : "B/strong,I/em,SUP/sup,SUB/sub",
extended_valid_elements: "CUSTOM"
})
Typing something like
<CUSTOM>this is a custom tag</CUSTOM>
doesn't work because <CUSTOM> gets stripped off.
If I change the init script to extended_valid_elements: "custom", then it works fine - I can type
<custom>this is a custom tag</custom>
and the <custom gets preserved.
Doesn't anyone know any workaround?
Thanks!
Here is a description of how to do that (the reverse works analogue): http://www.codingforums.com/archive/index.php/t-148450.html
You should use the tinymce onInit event and to change the tags back to Uppercase use onSubmit or onSave (alternatively you may change the content back before submitting your content on any other suitable location of code).
To add this handlers use the tinymce setup configuration parameter
setup : function(ed) {
ed.onInit.add(function(ed, evt) {
$(ed.getBody()).find('p').addClass('headline');
// get content from editor source html element
var content = $(ed.id).html();
// tagname to lowercase
content = content.replace(/< *\/?(\w+)/g,function(w){return w.toLowerCase()});
ed.setContent(content);
});
ed.onSubmit.add(function(ed, evt) {
$(ed.getBody()).find('p').addClass('headline');
// get content from edito
var content = ed.getContent();
// tagname to toUpperCase
content = content.replace(/< *\/?(\w+)/g,function(w){return w.toUpperCase()});
// write content to html source element (usually a textarea)
$(ed.id).html(content );
});
},
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 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.