For now I was able to add a new menu item called order with a template source:
<Editor apiKey='123456' init=
{{
selector: 'textarea', // change this value according to your HTML
plugins: 'template',
menu: {
file: { title: 'File', items: 'newdocument restoredraft | preview | export print | deleteallconversations' },
edit: { title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall | searchreplace' },
view: { title: 'View', items: 'code | visualaid visualchars visualblocks | spellchecker | preview fullscreen | showcomments' },
insert: { title: 'Order', items: 'template' },
format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript codeformat | styles blocks fontfamily fontsize align lineheight | forecolor backcolor | language | removeformat' }
},
templates: order // where order is my JSON file contains the template definition,
}} />
now I would like to add a new menu item called customer on which the user will choose to use a template which is completely different from the order template.
How can I achieve this? I just see 1 attribute called templates in order to specify the template.
Related
I'm getthing this error message "Cannot read properties of undefined (reading 'apply')" when I applied TinyMCE and run in my webpage.
tinymce.min.js:9 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'apply')
at _x.execCallback (tinymce.min.js:9:366461)
at m1 (tinymce.min.js:9:332437)
at h1 (tinymce.min.js:9:333521)
at tinymce.min.js:9:340110
This is the error point but I don't know how can I fix this error message.
_x.prototype.execCallback = function(e) {
for (var t = [], n = 1; n < arguments.length; n++)
t[n - 1] = arguments[n];
var r, o = this.settings[e];
if (o)
return this.callbackLookup && (r = this.callbackLookup[e]) && (o = r.func,
r = r.scope),
"string" == typeof o && (r = (r = o.replace(/\.\w+$/, "")) ? Ex(r) : 0,
o = Ex(o),
this.callbackLookup = this.callbackLookup || {},
this.callbackLookup[e] = {
func: o,
scope: r
}),
o.apply(r || this, t)
}
This is the init value in TinyMCE. I copied default value in one of the free bootstrap templates.
var useDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
tinymce.init({
selector: 'textarea',
plugins: 'print preview paste importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount textpattern noneditable help charmap quickbars emoticons',
imagetools_cors_hosts: ['picsum.photos'],
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 save print | insertfile image media template link anchor codesample | ltr rtl',
toolbar_sticky: true,
table_background_color_map: [
{title: 'Red', value: 'FF0000'},
{title: 'White', value: 'FFFFFF'},
{title: 'Yellow', value: 'F1C40F'}
],
table_border_styles: [
{title: 'Solid', value: 'solid'},
{title: 'Dotted', value: 'dotted'},
{title: 'Dashed', value: 'dashed'}
],
autosave_ask_before_unload: true,
autosave_interval: '30s',
autosave_prefix: '{path}{query}-{id}-',
autosave_restore_when_empty: false,
autosave_retention: '2m',
image_advtab: true,
link_list: [{
title: 'My page 1',
value: 'https://www.tiny.cloud'
},
{
title: 'My page 2',
value: 'http://www.moxiecode.com'
}
],
image_list: [{
title: 'My page 1',
value: 'https://www.tiny.cloud'
},
{
title: 'My page 2',
value: 'http://www.moxiecode.com'
}
],
image_class_list: [{
title: 'None',
value: ''
},
{
title: 'Some class',
value: 'class-name'
}
],
importcss_append: true,
file_picker_callback: function(callback, value, meta) {
/* Provide file and text for the link dialog */
if (meta.filetype === 'file') {
callback('https://www.google.com/logos/google.jpg', {
text: 'My text'
});
}
/* Provide image and alt text for the image dialog */
if (meta.filetype === 'image') {
callback('https://www.google.com/logos/google.jpg', {
alt: 'My alt text'
});
}
/* Provide alternative source and posted for the media dialog */
if (meta.filetype === 'media') {
callback('movie.mp4', {
source2: 'alt.ogg',
poster: 'https://www.google.com/logos/google.jpg'
});
}
},
templates: [{
title: 'New Table',
description: 'creates a new table',
content: '<div class="mceTmpl"><table width="98%%" border="0" cellspacing="0" cellpadding="0"><tr><th scope="col"> </th><th scope="col"> </th></tr><tr><td> </td><td> </td></tr></table></div>'
},
{
title: 'Starting my story',
description: 'A cure for writers block',
content: 'Once upon a time...'
},
{
title: 'New list with dates',
description: 'New List with dates',
content: '<div class="mceTmpl"><span class="cdate">cdate</span><br /><span class="mdate">mdate</span><h2>My List</h2><ul><li></li><li></li></ul></div>'
}
],
template_cdate_format: '[Date Created (CDATE): %m/%d/%Y : %H:%M:%S]',
template_mdate_format: '[Date Modified (MDATE): %m/%d/%Y : %H:%M:%S]',
height: 600,
image_caption: true,
quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
noneditable_noneditable_class: 'mceNonEditable',
toolbar_mode: 'sliding',
contextmenu: 'link image table',
skin: useDarkMode ? 'oxide-dark' : 'oxide',
content_css: '../static/assets/js/mycontent.css',
content_style: 'body { font-family: Malgun Gothic; font-size:13px}',
font_formats: 'Gothic=Malgun Gothic, sans-serif',
init_instance_callback: 'insert_contents'
});
The problem appears to be caused by this line:
init_instance_callback: 'insert_contents'
In there you're telling TinyMCE to call a function called insert_contents in the global scope when the editor initializes, however in the examples you've given that's never defined. This would then explain why the o variable is undefined as TinyMCE is unable to lookup that function and execute it as part of its initialization sequence.
I'm not sure what your expected behavior is there, but the simplest solution is likely going to be to just remove it.
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 made a tinymce fiddle about this problem: http://fiddle.tinymce.com/O0gaab
I add a custom element "custom-block" and a custom plugin to insert that element.
tinymce.PluginManager.add('custom', function(editor, url) {
editor.addButton('custom', {
text: 'CUSTOM',
onclick: function() {
// Open window
editor.windowManager.open({
title: 'Custom plugin',
body: [
{type: 'textbox', name: 'src', label: 'SRC'},
{type: 'label', name: 'title', text: 'Insert content bellow:'},
{type: 'textbox', name: 'content', multiline: true, style: 'width:500px;height:100px;'}
],
onsubmit: function(e) {
console.log(e.data);
editor.insertContent('<custom-block src="' + e.data.src + '">' + e.data.content + '</custom-block>');
}
});
}
});
});
tinymce.init({
selector: "textarea",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste custom"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | custom",
//valid_elements: "+*[*]", //when using this option trying to allow everything get an error "Cannot read property 'src' of undefined"
extend_valid_elements: "custom-block[src]",
custom_elements: "custom-block"
});
The element, get inserted correctly but without the src attribute.
From the documentation I though that extend_valid_elements: "custom-block[src]" would allow src attribute on a custom-block but it gets stripped everytime.
I also tried to set valid_elements to everything(+*[*]) just in case, but then gets worse because at inserting, I get an error: "Cannot read property 'src' of undefined".
I am making any mistake or what is the problem?
The name of the configuration option is extended_valid_elements so you simply named it wrong in your configuration. It should be:
extended_valid_elements: "custom-block[src]"
I have updated your fiddle (http://fiddle.tinymce.com/O0gaab/1) and things appear to work.
Is it possible to remove menu items in tinymce?
Also is it possible to remove an entire dropdown such as 'insert'?
Yes it is possible to remove individual menu items.Please add following code to your tinymce init.
tinymce.init({
removed_menuitems: "undo,redo"
});
To get list of all menu items that can be removed - link
To remove/edit an entire menu dropdown please use the following configuration for the menu while initializing the tinymce.
tinymce.init({
menu: {
file: {title: 'File', items: 'newdocument'},
edit: {title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall'},
insert: {title: 'Insert', items: 'link media | template hr'},
view: {title: 'View', items: 'visualaid'},
format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
table: {title: 'Table', items: 'inserttable tableprops deletetable | cell row column'},
tools: {title: 'Tools', items: 'spellchecker code'}
}
});
I am trying to remove the menu and status bars from TinyMCE 4 because I want to setup a very basic editor. Is this possible?
The documentation for TinyMCE 3 does not seem to be relevant and I cannot find anything for version 4.
I looked at the source and it was fairly obvious:
tinyMCE.init({
menubar:false,
statusbar: false,
//etc
})
This removes both.
You can also customise what parts of the default menu bar are visible by specifying a string of enabled menus - e.g. menubar: 'file edit'
You can define your own menus like this:
menu : {
test: {title: 'Test Menu', items: 'newdocument'}
},
menubar: 'test'
If you want to remove entire Menu bar from top
tinymce.init({
menubar: false,
});
But if you want Custom menubar with some submenu
tinymce.init({
menu: {
file: {title: 'File', items: 'newdocument'},
edit: {title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall'},
insert: {title: 'Insert', items: 'link media | template hr'},
view: {title: 'View', items: 'visualaid'},
format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
table: {title: 'Table', items: 'inserttable tableprops deletetable | cell row column'},
tools: {title: 'Tools', items: 'spellchecker code'}
}
});
see TinyMCE for more help.
So, It is clearly metioned in their docs that to make the values to false.
tinymce.init({
menubar: false,
branding: false,
statusbar: false,
})
In the latest update to v5
You can display menubar as such
tinymce.init({
menu: {
edit: { title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall searchreplace' },
insert: { title: 'Insert', items: 'image link charmap pagebreak' },
format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat' },
table: { title: 'Table', items: 'inserttable tableprops deletetable | cell row column' }
},
menubar: 'edit insert format table',
});
see https://www.tiny.cloud/docs/ for more details
If you want a completely clean text box, you could disable all the bars, including de "toolbar":
tinymce.init({
selector:'textarea',
branding: false,
menubar:false,
statusbar: false,
toolbar: false,
});
In the community edition I think you are not allowed to hide the statusbar (Powered by Tiny) branding part.
https://www.tiny.cloud/docs-4x/configure/editor-appearance/#branding