I have a site, that when it loads, it initializes the tinyMCE, then, when you click a button, it opens a modal and while in that process, it brings some HTML into the modal.
then inside that modal, there is another button that should let you edit the content of the modal. and inside the DIV that holds the loaded HTML, there are divs with a class to make them editable by the tinyMCE.
the thing is, when you build the content of the modal and you save. everything is fine and it stores it with the format, because when you refresh the site, and load the content, everything is still with the correct format (bold,colors,etc). but then when you want to update the content, and you click the button to edit, I have an option to initialize again the tinyMCE and the contents editable zones loses their format.
now I suppose that the problem is when I initialize again the tinyMCE that causes the problem but how can I enable and disable the edition inside the modal when I click the button to make the edits?
I saw that there is an .on() and .off() functions, but I don´t understand well how to use them, is not clear enough in the documentation.
this is a sample of what I have.
<script>
var pathBotones = "<?=$pathBotones?>";
var modalEditor = {
mode: 'exact',
selector: '.zonaEditable',
menubar: false,
inline: true,
plugins: [
'link',
'autolink',
'lists',
'save'
],
toolbar: [
'undo redo | bold italic underline | fontselect fontsizeselect | link',
'forecolor backcolor | alignleft aligncenter alignright alignfull | numlist bullist'
],
valid_elements: 'strong,em,span[style],a[href]',
valid_styles: {
'*': 'font-size,font-family,color,text-decoration,text-align'
},
powerpaste_word_import: 'clean',
powerpaste_html_import: 'clean',
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i'
]
};
tinymce.init(modalEditor);
$(".edit-content").click(function(e) {
e.preventDefault();
//console.log($('.editOptions').css('display'))
if ($('.editOptions').css('display') === 'none') {
//this is supossed to enable the edition
tinymce.init(modalEditor);
} else {
console.log('NOOO se ve')
}
//this is supossed to disable the edition
$(".editOptions").slideToggle();
$(".deleteRowInfoBox").fadeToggle();;
});
</script>
You can use TinyMCE's APIs to set the mode on the editor to readonly.
https://www.tiny.cloud/docs/api/tinymce/tinymce.editormode/#set
The code would look something like:
tinymce.activeEditor.setMode('readonly');
...or...
tinymce.get('theEditor').setMode('readonly');
Related
I am using v5 of TinyMCE. By default, the style selected is 'Paragraph', as shown in this image :
[tinyMCE toolbar, as the user sees before he mades any format configuration]
But I know my users will all prefer to use 'Div' style. So I would like 'Div' to be selected by default. The toolbar should therefore appear like in this image :
[tinyMCE toolbar, as I want it to be configured by default]
Is it possible ?
I haven't find my answer in tinyMCE documentation.
Same question if you want for instead "bold" button to be selected by default, etc.
Thank you !
To replace the default <p> blocks with <div>, use forced_root_block: https://www.tiny.cloud/docs-3x/reference/Configuration3x/Configuration3x#forced_root_block/
tinymce.init({
// ...
forced_root_block : 'div'
});
To select the bold button by default, you could use execCommand: https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#execcommand
tinymce.init({
// ...
setup: function(editor) {
editor.on('init', function() {
this.execCommand('Bold');
});
}
});
Example fiddle combining both: https://fiddle.tiny.cloud/YShaab/1
I have this tinyMCE init:
tinymce.init({
selector: "textarea",
theme: "modern",
readonly:1,
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"emoticons template paste textcolor colorpicker textpattern"
],
toolbar: "print",
readonly:1,
height : 500
});
but with readonly:1 but all the menubar is disabled and I would like to have
the print option activated.
It's no difficult to have print option active in menu and, otherwise, not allowed to edit the textarea.
Just add the plugin "noneditable" in the lists of your plugins.
Add also these two statements in your tinymice.init:
content_css : "css/noneditable.css",
noneditable_regexp: /\[\]/g,
Delete the readonly statement.
With the definition of regexp all text inside "[]" is not editable. You can use any character instead of [].
If you want to put into noneditable all the textarea, use :
$foo="<div class='mceNonEditable'>[". $foo."]</div>";
On a form, I work with TinyMCE for editing textarea's.
Now I just want to offer the options "bold", "italic" and "underline" in TinyMCE.
Which settings should I do in the tinymce.init();?
See the tinymce fiddle here.
Here is the code:
tinymce.init({
selector: "textarea", // change textareas into tinymce editors
plugins: [], // no additional plugins needed
toolbar: "bold italic underline", // only those three buttons
menubar: false // no display of the top menubar
});
I'm using TinyMCE in a form where I use ajax to submit the form. I've been struggling for the last 4 hours to figure out what is going wrong but I have reached a dead end.
I initialize TinyMCE with the following code:
tinymce.init({
selector: "textarea.editme",
plugins: ["advlist autolink autosave link image lists charmap print preview hr anchor
pagebreak spellchecker","searchreplace wordcount visualblocks visualchars code
fullscreen insertdatetime media nonbreaking","table contextmenu directionality
emoticons template textcolor paste fullpage textcolor imageplugin"],
toolbar1: "image_list undo redo | bold italic underline strikethrough | alignleft
aligncenter alignright alignjustify | fontselect fontsizeselect forecolor backcolor",
toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent
blockquote | preview | table",
menubar: false,});
I don't have problems loading it so the code should be all right but I copied it here just in case.
I have a textarea with the right class "editme" to display TinyMCE. This text area is embedded in a form ()
I submit the form with the following code:
$("#submitform").submit(function(e)
{
tinyMCE.triggerSave(true,true);
var postData=$(this).serializeArray();
var url = 'php/forms_post.php';
$.ajax(
{
url : url,
type: "POST",
data : postData,
success:function(data, textStatus, jqXHR)
{
// DISPLAY SUCCESS
},
error: function(jqXHR, textStatus, errorThrown)
{
// DISPLAY FAILURE
}
});
e.preventDefault();
e.unbind();
});
The code works fine, except for one thing. If I write "aaaaaa" in the textarea the first time, it gets submitted correctly and everything is fine. But if I then change it to "bbbbbb", the data that is submitted is still "aaaaaa". It looks like the triggersave keeps the data in memory and refuses any changes. I already restarted the browser, the server, cleaned cache, cleaned cookies,... but still the problem is there.
If I remove TinyMCE and keep a standard textarea, I have no problem.
Do you have any idea of what's going wrong?
Thanks a lot
Laurent
I have a page with three horizontal tabs. Clicking on a tab dynamically populates a div with a form. I am using BackboneJS to manage views' rendering (not sure if relevant). When I call render() on the view, after I populate the element's html, I make a call to apply tinyMCE to a text area:
$('#text_' + this.model.id, this.$el).tinymce({
script_url : '/lib/tinymce/tinymce.min.js',
theme : "modern",
content_css: "/css/bootstrap.min.css",
menubar: false,
toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | " +
"bullist numlist outdent indent | link image | forecolor backcolor emoticons",
setup: function(editor) {
editor.on('change', function(e) {
var change = {};
change["content"] = e.level.content;
self.model.set(change);
});
}
});
This works perfectly fine on the first go. When view is removed, there is an event called that applies .tinymce().remove(); to the field to properly remove editor before displaying the next view. The next view renders - it's the same view but different model. On this, and all subsequent calls, tinyMCE hides the textarea, and doesn't show the editor. I know my views work - commenting out .tinymce() call in render() makes everything work as intended. TinyMCE stumbles somewhere. Any insight will be appreciated.
I'm not 100% clear on what .tinymce().remove(); is doing but have you tried this:
tinymce.triggerSave();
tinymce.execCommand('mceRemoveEditor', true, tinymce.activeEditor.id);
and when you switch to the next view try re-attaching the editor via:
tinymce.execCommand('mceAddEditor', false, selector);
If that doesn't work or doesn't apply to what you're doing. Have you considered having more than 1 tinyMCE editor? It sounds like you have a set number of tabs, so you could create a separate tinyMCE for each one and simply hide/show the editor on each as needed with:
tinymce.execCommand('mceToggleEditor', false, selector);
This method is considered much faster than adding/removing the editor.