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!
Related
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
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 use Tinymce, I have two dots at the beginning of the url when I insert an image file, how can this be removed.Beacause
The project has been seamlessly integrated into the target file,
I register the HTML result in the database
I am undoing the record but there is a double dot in the image source
I need to remove double
how do I make that change
img src="../Content/Images/Upload" > img src="/Content/Images/Upload"
tinymce.init({
selector: '#HTML',
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor textcolor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code help'
],
toolbar: 'insert | undo redo | formatselect fontsizeselect | fontselect bold italic backcolor forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help | link image code',
font_formats: "Andale Mono=andale mono, times;" +
"Arial=arial,helvetica,sans-serif;" +
"Arial Black=arial black,avant garde;" +
"Book Antiqua=book antiqua,palatino;" +
"Comic Sans MS=comic sans ms,sans-serif;" +
"Courier New=courier new,courier;" +
"Georgia=georgia,palatino;" +
"Helvetica=helvetica;" +
"Impact=impact,chicago;" +
"Symbol=symbol;" +
"Tahoma=tahoma,arial,helvetica,sans-serif;" +
"Terminal=terminal,monaco;" +
"Times New Roman=times new roman,times;" +
"Trebuchet MS=trebuchet ms,geneva;" +
"Verdana=verdana,geneva;" +
"Webdings=webdings;" +
"Wingdings=wingdings,zapf dingbats",
fontsize_formats: '8pt 10pt 12pt 14pt 18pt 24pt 36pt 72pt',
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tinymce.com/css/codepen.min.css'],
paste_data_images: true,
images_upload_url: '/UploadImage',
images_upload_base_path: '/Upload',
language: 'tr',
});
TinyMCE has a variety of configuration options to deal with URLs and how they are processed. Take a look at the following:
https://www.tinymce.com/docs/configure/url-handling/
...and specifically the following on that page:
https://www.tinymce.com/docs/configure/url-handling/#convert_urls
https://www.tinymce.com/docs/configure/url-handling/#relative_urls
https://www.tinymce.com/docs/configure/url-handling/#urlconverter_callback
The last of those (urlconverter_callback) allows you to implement your own logic if TinyMCE's built in options don't solve your issue.