"Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'apply')" error in TinyMCE - tinymce

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.

Related

Create 2 different menu items with different template source

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.

tinymce losing the newlines when submiting a form via frame

I have a configuration (I didn't want it to be wrapped in a paragraph) where I expect newlines in the editor to be submitted as
var richtexteditorConfig = {
selector: 'textarea.tinymce',
forced_root_block: "",
menubar: false,
inline: false,
remove_linebreaks: false,
force_br_newlines: true,
force_p_newlines: false,
convert_newlines_to_brs: true,
branding: false,
plugins: [
'link'
],
toolbar: [
'undo redo | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | numlist bullist | forecolor backcolor casechange permanentpen formatpainter removeformat link' ],
valid_elements: 'p[style],strong,em,span[style],a[href],ul,ol,li',
valid_styles: {
'*': 'font-size,font-family,color,text-decoration,text-align'
}
};
tinymce.init(richtexteditorConfig);
However when I submit the form using a frame it strips out those newlines. It keeps some stuff like bolding and colors but I always lose the newlines. Is there somemething magical I need to do, it needs to be submitted with teh rest of the elements and right now I am just doing:
dojo.require('dojo.io.iframe');
dojo.io.iframe.send({
url: 'MyUrl',
handleAs: "text",
method: 'POST',
form: dojo.byId(formid),
load: function(response, ioArgs){
eval(response);
return response;
},
error: function(response, ioArgs){
console.log('error sending ' + response);
return response;
}
});
seems like it is the
forced_root_block: ""
causing all the problems.

Inserting custom element, attribute gets stripped

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.

TinyMCE multiple CSS classes

I’ve been looking for a way to do this. I have a style sheet that is loaded into TinyMCE. The style sheet is generated via my content management system based of the active template. Problem is I can not get TinyMCE to let me select multiple CSS classes to a signle element. Here is a example:
.left_round_thumb_small {
width:65px;
height:65px;
border-radius:35px;
-moz-border-radius:35px;
-webkit-border-radius:35px;
-khtml-border-radius:35px;
background:url(/skins/msc_2013/images/lines.png) repeat;
float:left;
margin:0 25px 0 0;
}
.center_round_thumb_large {
width:162px;
height:162px;
border-radius:85px;
-moz-border-radius:85px;
-webkit-border-radius:85px;
-khtml-border-radius:85px;
background:url(/skins/msc_2013/images/lines.png) repeat;
position:relative;
margin:0 25px 0 0;
}
.round_border_black {border:1px solid black;}
.round_border_red {border:1px solid red;}
.round_border_blue {border:1px solid #00aeef;}
.round_border_green {border:1px solid #3cb64b;}
Now I know I could go in and do something like:
tinyMCE.init({
style_formats : [
{title: 'Left Thumb Black', classes: 'left_round_thumb_small round_border_black'},
{title: 'Center Thumb Blue', classes: 'center_round_thumb_small round_border_blue'},
]
});
Now seeing that this style sheet loaded into TinyMCE is generated based of the CMS’s active template. If I were to change the template I would also have to change the style code. Which will be come a major hassle in the future.
So anyone knows of a code patch to the style selector or plugin that will let me do this?
see below usage of content_css for multiple css files
tinymce.init({
selector: 'textarea',
height: 500,
theme: 'modern',
plugins: [
'advlist autolink lists link image charmap print preview hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen',
'insertdatetime media nonbreaking save table contextmenu directionality',
'emoticons template paste textcolor colorpicker textpattern imagetools'
],
toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
toolbar2: 'print preview media | forecolor backcolor emoticons',
image_advtab: true,
templates: [
{ title: 'Test template 1', content: 'Test 1' },
{ title: 'Test template 2', content: 'Test 2' }
],
**content_css: [
'//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
'//www.tinymce.com/css/codepen.min.css']**
});
I know this is an old post, but here is what I do, in case someone else come looking.
style_formats: [
{
title: 'Button Styles', items: [
//{ title: 'Button Class (Must Select)', selector: 'a', classes: 'btn' },
{ title: 'Default Class', selector: 'a', classes: ['btn', 'btn-default'] },
{ title: 'Primary Class', selector: 'a', classes: ['btn', 'btn-primary'] },
{ title: 'Success Class', selector: 'a', classes: ['btn', 'btn-success'] },
{ title: 'Warning Class', selector: 'a', classes: ['btn', 'btn-warning'] },
{ title: 'Danger Class', selector: 'a', classes: ['btn', 'btn-danger'] },
{ title: 'Info Class', selector: 'a', classes: ['btn', 'btn-info'] },
{ title: 'Charcoal Class', selector: 'a', classes: ['btn', 'btn-charcoal'] },
{ title: 'Disabled Class', selector: 'a', classes: ['btn', 'btn disabled'] }]
}
]
As you can see, I wanted to include the 'btn' class with each of the Bootstrap button classes. All you have to do is wrap each class name in single-quotes, and separated each class name with a coma, then wrap all those class names in square brackets []
example: classes: ['btn','btn-default']
I hope this helps someone else.
Based on the name classes - being plural and also on other configuration setting example syntaxes, I would believe that it should look something like this:
tinyMCE.init({
style_formats : [
{title : 'Style1', classes : {'left_round_thumb_small','round_border_black'} },
{title : 'Style2', classes : {'center_round_thumb_small','round_border_blue'} },
]
});

Remove menu and status bars in TinyMCE 4

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