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.