how can I init tinyMCE before the element it is to apply to is not yet visible?
So yeah, this doesn't work in my case.
tinyMCE.init({
Assuming you are dynamically adding the textarea triggered from some action, then you can use the TinyMCE command "mceAddControl" to add TinyMCE to the page.
For example, if the textarea ID is "myText" then you add the editor control with
tinyMCE.execCommand('mceAddControl', true,"myText");
Of course, you need to setup the editor settings prior to adding the control. This is done by setting the setting attribute of the control. For example
tinyMCE.settings = {
theme: 'advanced',
....
};
Related
Using the tinymce wsywig editor, is there any way to disable the fact that using text will be italic automatically ?
Thanks in advance and regards,
Ofer
to clarify what's happened, are you setting some content in the editor to appear when it loads? If so, you can control how content is styled when the editor loads with the setup function. Add something like this to the TinyMCE.init script:
setup: function (noItalic) {
NoItalic.on('init', function () {
this.setContent('<p>This text is not italic</p>');
});
}
It might be that you have a custom style set up that puts italic tags on everything automatically.
Check your tinymce.init script for a content_style value and see if the font-style is set to italic;. If so, remove the font-style option or set to normal.
If neither of these fit your situation, please post some more details – how you've configured TinyMCE with a code sample so we can see the text content in italics.
after the tinymce.init() i can toggle the readOnly setting like this:
editor.mode.set("design");
editor.mode.set("readonly");
but how can i toggle the dark theme for the editor and the content?
this will not work:
editor.mode.set.content_css("dark");
editor.mode.set.skin("dark-oxide");
No, it is not possible. All the settings defined in the tinymce.init() function cannot be changed without reinitialization. However, reinitialization can be done very fast. You will need to perform 4 steps:
Save current content somewhere with getContent()
Destroy the TinyMCE instance with destroy()
Reinitialize
Use setContent() to add the content saved on step 1.
I have a document editor that has an edit and readonly mode. The readonly mode is a static renderer that just uses HTML/CSS and the edit mode initializes a tinyMCE edtior. However I'm adding a track changes plugin that requires tinyMCE to be active in readonly and edit mode. My plan is to have tinyMCE active at all times but modify the toggle to switch between a readonly and edit state. The native tinyMCE methods for this don't seem to satisfy what I'm trying to do so this is my plan:
I used editor.setMode('readonly') and it makes the toolbar inaccessible but still visible and the document itself is still editable. Setting via DOM manipulation contenteditable="false" makes the document uneditable but it seems hacky, is there an editor method that would do this for me?
I can also just hide the toolbar using DOM manipulations but it also seemed hacky so I'm asking if there is a way to do this through some editor method without actually turning off any of the active plugins at the time?
You can disable the toolbar by setting the toolbar value in the configuration to false.
https://www.tiny.cloud/docs/configure/editor-appearance/#disablingthetoolbar
For example:
tinymce.init({
selector: "#theEditor",
toolbar: false,
...
});
I have a page with several TinyMCE (v4) editors, which all work great ... until I try and add:
inline: true
to their configuration. When I do that the inline-ing part works great (the toolbar is gone, then appears when I focus the editor), but for some strange reason the editor stops working at that point. Inside the editor I see:
<br data-mce-bogus="1">
but I can't edit that text, or add new text, or do anything at all really with the editor.
I can make the editor work again if I remove inline: true, but I really want the inline effect. Does anyone have any idea how I can get inline without breaking my editors?
Actually, the "bogus" br tags appear for inline divs, too. They are added whenever the input field is empty. There appears to be no easy way to get rid of them. I use a CSS rule during the preview phase:
br[data-mce-bogus="1"] {
display:none;
}
And then strip them out if they make it to the server when the user tries to save.
I recently had this problem, inline: true would not work with a textarea. I change mine to a div and it now works as expected.
Are you using the tinymce jQuery package? The same thing was happening to me until I tried using the normal tinymce package instead.
<script>
$(document).ready(function () {
$("#comment").ready(function () {
$("#comment").val("")
})
})
</script>
I add this jquery script in html to solve this bug.
Add this snippet to your CSS file. That would prevent video bogus.
[data-mce-bogus="all"] {
display:none;
}
Tinymce editor is not rendering editor properly when the content is something like
<textarea><p><sample data></p></textarea>
i.e. <sample data>.
When I initialize a TinyMCE editor here, I dont see anything as it looks like it assumes <sample data> is an HTML tag.
Please assume I have tinymce.js loaded and I initilize using tinymce.init.
Is there a fix for this? Please let me know if it is a server side fix, or is there a tinymce.init option I could give to fix this problem.
PS: It does look like this is an HTML Entity encoding related issue but I am hardly an expert in this area.
Have a look at the tinymce config parameter entity_encoding.
If this does not work you may use this workaround
// save content
var saved_content = document.getElementById('id_of_my_textarea').innerHTML;
// init the editor
tinyMCE.execCommand('mceAddControl', false, 'id_of_my_textarea');
// after tinymce is fully initialized do
// you should use the tinymce configuration parameter "setup" rather than this code here
tinymce.get('id_of_my_textarea').setContent(saved_content);