I am using TinyMCE to create a WYSIWYG editor in my webapp. I need to configure it in advanced mode for some textarea's and in simple mode for some. I am configuring TinyMCE like this.
<head>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "simple",
editor_selector : "simple"
});
tinyMCE.init({
mode : "textareas",
theme : "advanced"
});
</script>
</head>
This configuration works and shows me TinyMCE in simple or advanced mode, based on the class of the textarea.
However, the problem happens when I submit a form. The server gets a blank for the textarea. (this problem does not occur when I use only one configuration for TinyMCE)
I did some searching and came across a suggestion which said I should explicitly ask TinyMCE to save the content before doing a submit. I tried adding this code to my form.
$('#postFeedback').click( function(){
tinyMCE.triggerSave(true,true);
alert("TextArea val - " + $('input[name=email]').val() + "- " + $('textarea.simple').val());
$('form').submit();
});
The form does get submitted, but I have the same problem. The value in the textarea is blank. I also put an alert (as shown above) to check the value of the textarea, and it is indeed blank.
Some questions to start with:
TinyMCE works perfectly well, when I have just one configuration (init). However, it gets messed up the momnent I have two? Any clue why this might happen?
Is it necassary to explicitly ask TinyMCE to save the textarea contents?
How do I begin debugging this problem?
You should initialize your editors using mode: "exact", in your inits. Then you are able to initialize a single tinymce instance using
tinyMCE.execCommand('mceAddControl', false, editorid); //editorid should be the id of the textarea
and the configurations of your inits will be aplied (I somehow got the feeling there is something pretty bad using two inits for all the tinymce editors (because it looks they get both called for all of them)).
EDIT: In order to be able to use different inits you should call mceAddControl using an initialization_object instead of an editor id only. Example:
var config_tinymce_xy = {
mode: 'exact',
theme: "advanced",
content_css : "my.css",
plugins: "code,...",
theme_advanced_buttons1 : "code,...",
theme_advanced_buttons2 : "...",
...
};
var config_tinymce_xy2 = {
mode: 'exact',
theme: "simple",
content_css : "my.css",
...
};
init_obj = {element_id:'my_editor_id', window: window};
$.extend(true, init_obj, config_tinymce_xy);
tinyMCE.execCommand('mceAddFrameControl',false, init_obj);
Related
I'm using the following config:
formats : {alignleft : {selector : 'img', classes : 'float-left'},
alignright : {selector : 'img', classes : 'float-right'},
},
to make tiny use my custom classes for image alignment (which just set a css float of left or right) rather than applying them inline in styles.
Now, this works when I save the content and preview it, but in the tiny editor the image just stays where it is and won't float.
Inspecting the image code in Safari web inspector shows the class being correctly applied to the img element, it just doesn't.. float!
The page with the editor has access to the main stylesheet with the float-left and float-right classes too.
I'm new to tiny so perhaps I'm missing something here?
In order to see the class changes within the editor itself, you need to set a stylesheet during initialization.
tinyMCE.init({
content_css : "/editor-style.css" // http://domain.com/editor-style.css
});
That should pull in the stylesheet for your editor. Once the stylesheet is being pulled in you will have to add your styles to the stylesheet in order to see them display appropriately.
I had issue with the way tinymce generates when some content is pasted from MS Word .Tiny MCE has an option for paste_auto_cleanup_on_paste : true which fixed it for any new content.But I have some existing content in database which still is formatted with lot of generated unnecessary stuff. IS there any way to perform paste_auto_cleanup_on_paste function when tinymce is loaded ?
Well, you can perform the cleanup action onInit (thats right after the initial content is loaded). This is the necessary setup configuration setting
setup : function(ed) {
ed.onInit.add(function(ed, evt) {
ed.execCommand('mceCleanup');
});
},
I use tinymce on my website and I always run into this annoying j is null.
In my template file I originally had the init method out in the open like in the example...
<script type="text/javascript" >
tinyMCE.init({
mode : "textareas",
theme : "simple"
});
</script>
But in the error console of Firefox I see something that says "j is null" and the reference is somewhere within the tiny_mce.js file.
Any help is appreciated. Thanks so much.
It's a tinymce bug. Internally, the tinymce code uses a <span id="mce_marker"></span> to remember the caret-position when pasting. when validating the resulting fragment, after the paste, the span is deemed invalid and removed, thus breaking the code by removing the marker.
This issue will be fixed in the next official tinymce minor release. There are some workarounds for this kind of issue. One is to add to add id and mce-data-type attribute to spans as valid elements (init setting). Example:
// The valid_elements option defines which elements will remain in the edited text when the editor saves.
valid_elements: "#[id|class|title|style]," +
"a[name|href|target|title]," +
"#p,-ol,-ul,-li,br,img[src],-sub,-sup,-b,-i,-u" +
"-span[data-mce-type]",
I have a page that has multiple TinyMCE editors on it. i would like one of them to have the autoresize plugin loaded and the other one i would like to stay a fixed size.
Is there any way to do this?
You can, by simply instantiating the editors with different configurations.
For example, say you have two textareas (area1, area2). Instead of using
tinymce.init({
mode : "textareas",
...
});
which will load tinyMCE in for both textareas on the page, you can instead use
tinymce.init({
mode : "exact",
elements :"area1",
....
});
tinymce.init({
mode : "exact",
elements :"area2",
....
});
with different plugins in each config.
The exact mode is usefull but don't workout in this case and others.
I'm trying to show 2 editors one in Portuguese and other in spanish (I tried fist in Engish but i'm not sure of the language code) and the interface shows only with the last language (last tinymce.init)
tinymce.init({
mode : "exact",
elements : "area1",
language : 'es',
add_unload_trigger : false,
plugins : 'wordcount',
maxCharacters : 130 // this is a default value which can get modified later,
});
tinymce.init({
mode : "exact",
elements : "area2",
language : 'pt_PT',
add_unload_trigger : false,
plugins : "wordcount table",
maxCharacters : 50 // this is a default value which can get modified later,
});
I'll try some possible solutions and edit my answer today.
I want to call function after cut/paste event fires.
For example I want to count number of characters entered by user when user do cut/paste in editor via keyboard or mouse (with context menu) also.
Is there any way to call our own function after user do cut/paste ?
Yes, this is possible.
Use the paste plugin.
tinyMCE.init({
// General options
//mode:'exact',
mode: "textareas", // none, textareas, exact, ...
theme: "advanced", // also simple available
plugins : "paste",
paste_postprocess : function(pl, o) {
// o.content holds the pasted content o.content.length will give you the number of characters the user entered
alert(o.content.length);
},