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');
});
},
Related
I was using tinymce editor but the problem I was facing is when I was trying to set the value on SetContent function it was showing error like setcontet property is null and not able to store the value same script is working fine on angular project but not in vb.net
The change which i was done in my project is just hold the value in jquery function and pass that value in tinymce.activeeditor.setcontent
<script>
function setEditorVal() {
debugger;
tinyMCE.activeEditor.setContent('hell0 world');
}
</script>
Without seeing running code I can't say for sure but the issue here is almost certainly a timing issue of when your JavaScript runs.
The TinyMCE init() function is asynchronous. When you call init() it takes some time for the process to complete. In your code example when you call activeEditor are you 100% sure there is indeed an active editor? If you call activeEditor before init() is done there is no "active editor".
The correct way to make sure that TinyMCE is fully initialized is to rely on the init event. This event is fired after TinyMCE is fully initialized and ready for interaction.
To load content via the init() you can do something like this:
tinymce.init({
selector: "textarea",
plugins: "advlist autolink lists ...",
toolbar: "undo redo | bullist numlist ...",
setup: function (editor) {
editor.on('init', function (e) {
//this gets executed AFTER TinyMCE is fully initialized
editor.setContent('<p>This is content set via the init function</p>');
});
}
});
I have initiated the tinyMCE for the list of textarea's (around 12) using the below code (generated from TypeScript code).
tinymce.init({
selector: this.selector,
setup: function (editor) {
editor.on('change blur', function () {
editor.save();
tinymce.triggerSave();
console.info('tinyMCE change event fired.');
});
},
branding: this.branding,
menubar: this.menubarFlag,
browser_spellcheck: this.browser_spellcheck,
fontsize_formats: this.fontsize_formats,
block_formats: this.block_formats,
toolbar1: this.toolbar1,
height: this.height,
plugins: this.plugins
});
I tried both editor.save(); and tinymce.triggerSave(); on tinyMCE change event. But still hidden textarea change event is not firing though content is updated to textarea.
I need textarea's event to actually add an element to the form by adding name attribute.
$(divObj).find('.segment-input').change(function () {
$(divObj).find('input[type="hidden"]').attr('name', $(divObj).find('input[type="hidden"]').attr('name-nochange'));
$(divObj).find('input[type="hidden"]').removeAttr('name-nochange');
});
Per your comments above check out this fiddle:
http://fiddle.tinymce.com/Cogaab
The editor.on() function has access to the editor (e in the fiddle) upon which it was triggered. You can get (among other things) the target ID of the underlying text area. In the fiddle I provided I log that to the console for each of the editors on init, change, and blur.
Once you know the ID you can find that using JavaScript and do what you need to that native element.
There is a variety of useful data in that editor (e) object - its worth logging e and looking at what else is there as other data there may also be helpful for your scenario.
I have large data of content (newsletter) and I have added in Tiny Mce Editor. Contents looks fine but when I start typing (adding more content) it types very slow and I have to wait until it's done printing the character.
The issue is with large contents only not with small content.
You can check below demo link to test the above case. Paste the large content it source code and try to type in Tiny Mce editor not in source code.
https://www.tinymce.com/docs/demo/basic-example/
i faced similar issue. My problem was that in tinymce.init i had a function for update textarea:
setup: function (editor) {
editor.on('change', function () {
tinymce.triggerSave();
});
}
Problem was that the function update textarea with every change, with every key press or color change. More content, more slower.
My solution here was simple, delete triggerSave from tinyMCE init and call tinymce.triggerSave() right before submitting form via submitting button:
<button type="submit" name="btn-addpost" onclick="tinyMCE.triggerSave();"><span class="glyphicon glyphicon-send"></span> Add Post</button>
Maybe you have similar problem.
I hope this will be in any way helpfull for you.
I am using TineMce with React js and facing the same problem. The problem was on every key press inside editor I was updating the form value which was causing the slow typing.
So instead of updating form on every key press I am updating at onBlur event now.
Below is my example for React js but you just have to implement onBlur event in your js code
const handleEditorBlur = (ed, event) => {
const content = event.getContent();
if (content) {
formik.setFieldTouched("content", true);
}
formik.setFieldValue("content", content);
}
<Editor
apiKey={process.env.MIX_TINYMCE_API_KEY}
onBlur={handleEditorBlur}
//onEditorChange={handleEditorChange}
//value={formik.values.content}
init={{
content_css: "writer",
plugins: "lists",
toolbar: "code",
}}
/>
I am trying to add a Header & Footer in TinyMCE editor, so the user could get a predefined "Blank" page to edit and have default Header & Footer. User only needs to input the customized content.
Is there a way to accomplish this?
Thanks.
Yes, this is possible. You need to add the header and footer to the content when the editor initialzes. But keep in mind that you will have to remove it before saving if you do not want to have them stored in the db. Here is the init code to make it work. You will need to make use of the setup parameter
// Adds an observer to the onInit event using tinyMCE.init
tinyMCE.init({
...
setup : function(ed) {
ed.onInit.add(function(ed) {
var header = "<header>ABCD</header>",
footer = "<div>footer</div>",
content = ed.getContent();
content = header + content + footer;
ed.setContent(content);
});
}
});
Additionally you will need to define your added tags as valid elements in the tinymce configuration. Have a look at the valid_elements setting for this (maybe you can use the extended_valid_elements setting).
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);