I am having TinyMCE-6 with the following toolbar options:
menubar: false,
plugins: ['searchreplace', 'link', 'anchor', 'image', 'table', 'charmap','fullscreen','code', 'preview',
'lists','help','wordcount'],
toolbar: 'cut copy paste pastetext | undo redo | searchreplace | selectall | link unlink anchor | ' +
'image| table | hr| charmap |fullscreen | code | preview print | ' +
'bold italic underline strikethrough subscript superscript | removeformat |'+
'numlist bullist | outdent indent | blockquote |alignleft aligncenter alignright alignjustify |'+
'blocks fontfamily fontsize | forecolor backcolor|help |' +
'',
When it is rendered in a page, all the toolbars are not shown by default.
I have to click on the 3 dots on the right to expand the whole toolbar.
Is it possible to have all the toolbar expanded by default while loading tinyMCE ?
You can do what you want with an API call you add to your TinyMCE configuration.
The TinyMCE command to use is ToggleToolbarDrawer. You can use the setup function in your TinyMCE init to call this API:
tinymce.init({
...
setup: function (editor) {
editor.on('init', function (e) {
editor.execCommand('ToggleToolbarDrawer')
});
}
...
});
Here is a working example: https://fiddle.tiny.cloud/skiaab
We can make use of toolbar_mode configuration in TinyMCE
toolbar_mode :'wrap',
https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/#wrap
Working example - https://fiddle.tiny.cloud/duiaab/1
Related
I am configuring TinyMCE inline toolbar and I have set 3 toolbars, one above the other like this:
tinymce.init({
selector: '#myeditablediv',
inline: true,
plugins: ['link', 'lists', 'advlist'],
toolbar1: ' fontfamily fontsize forecolor | advancedButton ',
toolbar2: ' fontfamily fontsize bold italic underline strikethrough forecolor backcolor link',
toolbar3: ' alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | superscript subscript | insert-character ',
setup: (editor) => {
editor.ui.registry.addButton('advancedButton', {
text: 'Avanzado',
onAction: (_) => {
// hide toolbar 2 and 3 here
}
});
},
I want to hide toolbar2 and toolbar3 when clicking "advancedButton" on toolbar1. I tried setting an id to get to them or accessing like "editor" on onAction(). Nothing worked. Please help!
I am installing a new TinyMCE instance into a textarea. I am loading it using their cdn, and have registered an API Code, and registed my website on the dashboard. It works and loads tinyMCE correctly until I try to modify the toolbars to add the select options.
To be more clear, when I load with no configuration, I see a "Paragraph" Dropdown with the various Headings, Blocks etc. However when I try to load examples, or customize my own, I do not see those options.
Using this configuration:
tinymce.init({
selector: '#content',
plugins: 'fullscreen, link, image, table, code, lists, emoticons, advlist, charmap, searchreplace, codesample ',
toolbar: [
'undo redo | forecolor backcolor | formatting | align | numlist bullist | blockquote | link | image | table | code | template | symbol | searchreplace ',
'undo redo | sizeselect | styleselect | formatselect | fontselect | fontsizeselect | fullscreen '
],
toolbar_groups: {
formatting: {
icon: 'bold',
tooltip: 'Formatting',
items: 'bold italic underline | superscript subscript | codesample'
},
align: {
icon: 'align-left',
tooltip: 'Alignment',
items: 'alignleft aligncenter alignright alignjustify'
},
symbol: {
icon: 'insert-character',
tooltip: 'Symbol',
items: 'emoticons | charmap'
}
}
});
On the second toolbar, I only see icons for undo, redo and fullscreen. None of the selects render.
The configuration should work fine if you're using TinyMCE 5. However, if you're using TinyMCE 6 then the toolbar buttons were renamed: https://www.tiny.cloud/docs/tinymce/6/migration-from-5x/#things-we-renamed. So in that case, you'd need to use something like this instead: 'undo redo | sizeselect | styles | blocks | fontfamily | fontsize | fullscreen'.
I have installed TinyMCE Version: 5.10.3 (2022-02-09)
this is the code:
tinymce.init({
selector: 'textarea.redactor-editor',
plugins: 'preview paste searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap hr pagebreak nonbreaking toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap quickbars emoticons',
menubar: 'file edit view insert format tools table help',
toolbar: 'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen preview | image media template link codesample',
image_advtab: true,
height: 500,
extended_valid_elements: "pre[*],script[*],style[*]",
valid_children: "+body[style|script],pre[script|div|p|br|span|img|style|h1|h2|h3|h4|h5],*[*]",
valid_elements : "*[*]",
quickbars_insert_toolbar: '',
quickbars_selection_toolbar: '',
image_caption: true,
quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
noneditable_noneditable_class: 'mceNonEditable',
toolbar_mode: 'sliding'
});
and when I am landing to my page everytime it is showing this warning message:
The following deprecated features are currently enabled, these will be removed in TinyMCE 6.0. See https://www.tiny.cloud/docs/release-notes/6.0-upcoming-changes/ for more information. Plugins: - imagetools (moving to premium) - toc (moving to premium)
How can I turn off this message?
add deprecation_warnings: false, to you're init
the variable in double brackets comes from a Jinja/Flask template
here is the value of that variable, it is string
'<div id="item" >test</div>'
<script type="text/javascript">
tinymce.init({
selector: 'textarea',
setup: function (editor) {
editor.on('init', function (e) {
editor.setContent("{{editor_content|safe}}");
});
},
plugins: [
'advlist autolink autoresize link image imagetools lists charmap print preview hr anchor pagebreak spellchecker',
'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
'save table directionality template paste codesample'
],
imagetools_toolbar: "rotateleft rotateright | flipv fliph | editimage imageoptions",
toolbar: 'insertfile undo redo paste | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons | codesample',
images_upload_url: '{{ url_for("imageuploader") }}',
automatic_uploads: true,
images_reuse_filename: false,
images_upload_base_path: '/static/uploads',
visualblocks_default_state: true,
forced_root_block : 'p',
});
</script>
My code fails, this is what the browser console shows
Uncaught SyntaxError: missing ) after argument list
{{editor_content|safe}} instructs Jinja not to escape the code as it should be HTML
Update
More troubleshooting shows me that this is OK
"<div id='test'>sdsdsd</div>"
while this is not
'<div id="test">sdsdsd</div>'
How do I get around this because the source of the content of my editor uses " and not '
Turns out that inconsistent use of " in the initialization string is causing this issue
You should use " within tags for properties and you should use ' when initializing the editor
editor.setContent('{{editor_content|safe}}');
I saw a lot of posts here but each one of them is too old and its not connected with tinyMCE 4.x I am searching the web from days and I can't find an option to set tinyMCE 4.x in readonly mode.
At this moment I just hide toolbars and menubars but I still can delete text and so on...
This is how I make it read-only.
tinymce.init({
selector: "#id",
readonly: true,
toolbar: false,
menubar: false,
statusbar: false
// more inits...
});
You may need to tweak your styles to fix the editor borders.
As stated in the TinyMCE docs as seen via this link https://www.tiny.cloud/docs-3x/reference/configuration/Configuration3x#readonly/, the readonly attribute should be set to '1' not to 'true'.
// Move focus to specific element
tinyMCE.init({
theme : "advanced",
readonly : 1
});
Hope this helps
This take me some time to research how to make tinymce in readonly mode.
The key point here is set readonly to 1 or 0, not true or false. For example here is my init code:
tinymce.init({
selector: "#html-textarea",
menubar: false,
statusbar: false,
resize: "both",
plugins: [
"textcolor image link preview code table media noneditable"
],
readonly: status, // **status hold value 0 or 1, NOT true or false**
toolbar: 'preview | undo redo | removeformat | cut copy paste | formatselect fontselect fontsizeselect | forecolor backcolor | bold italic underline strikethrough subscript superscript | alignleft aligncenter alignright alignjustify | link unlink image media | code table | bullist numlist | outdent indent blockquote'
});