vue组件初始化给tinymce设置内容报错

Question

问题描述

vue组件初始化给tinymce设置内容报错

问题出现的环境背景及自己尝试过哪些方法

设置定时器，可解决。

    setTimeout(() => {
        tinymce.activeEditor.setContent("内容")
    }, 1000);

相关代码

tinymce.init({
        selector: '#articleEditor',
        branding: false,
        elementpath: false,
        height: 600,
        language: 'zh_CN.GB2312',
        menubar: 'edit insert view format table tools',
        theme: 'modern',
        plugins: [
            'advlist autolink lists link image charmap print preview hr anchor pagebreak imagetools',
            'searchreplace visualblocks visualchars code fullscreen fullpage',
            'insertdatetime media nonbreaking save table contextmenu directionality',
            'emoticons paste textcolor colorpicker textpattern imagetools codesample'
        ],
        toolbar1: ' newnote print fullscreen preview | undo redo | insert | styleselect | forecolor backcolor bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image emoticons media codesample',
        autosave_interval: '20s',
        image_advtab: true,
        table_default_styles: {
            width: '100%',
            borderCollapse: 'collapse'
        }
    });
    
    // 如果没有定时器 || 定时器时间低于500ms(视电脑硬件配置及代码量)，会出现报错
    setTimeout(() => {
         tinymce.activeEditor.setContent(this.articleContent.content)
    }, 1000);

你期待的结果是什么？实际看到的错误信息又是什么？

如果不设置定时器，会报错
错误代码如下

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'parse' of undefined"

Answer 1

tinymce支持Promise，所以可以在init完成后，利用回调函数，完成操作

tinymce.init({
       // config
}).then( resolve=>{
        // init完成后，回调
        // doSomething
})

Answer 2

tinymce.init({
  selector: 'textarea',
  setup: function (editor) {
    editor.on('init', function (e) {
      console.log('初始化完成');
    });
  }
});

因为还没init完成，写着这个里面