I have to remove some buttons from the tinyMCE 5 Editor.
How can I control which buttons are being shown?
I can't find anything in the documentation.
This is my init code:
tinymce.init({
selector: 'textarea.property_remark'
,branding: true
,menubar: false
,statusbar: true
,toolbar: true
});
I found it here
tinymce.init({
selector: 'textarea.property_remark'
,branding: true
,menubar: false
,statusbar: true
,toolbar: 'undo redo | styleselect | bold italic | link image'
});
In order to use certain toolbar buttons or menu options you need to load some plugins. check this link
Related
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');
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 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.
Is there anyway to force tinymce to resize vertical only? It breaks my layout when resized horizontal.
So that this works the same as a default textarea resize: vertical;
tinymce.init({
selector: 'textarea', // change this value according to your HTML
resize: true
});
resize option has 3 values:
false: to disable.
true: enable only Vertical resize
'both': enable both resize directions
check the Documentation
IMPORTANT NOTE: to make it work you have to enable the statusbar option, it's enabled by default, but in case if turned it to statusbar: false you will have to re-enable it statusbar: true
you can use:
tinyMCE.init({
// other stuff...
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : false
});