账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue组件初始化给tinymce设置内容报错
    66
    0

    问题描述

    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"
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 世浪缠身 普通会员 1楼

      在 Vue 中初始化tinymce时,可能会遇到如下错误:

      "TypeError: Cannot read property 'value' of undefined"

      这可能是因为你在初始化tinymce时,尝试访问未定义的tinymce实例。确保在初始化tinymce之前,已经定义了一个 tinymce 实例。

      下面是一个简单的示例:

      javascript tinymce.init({ selector: '#tinymce', language: 'zh-CN', setup: function (editor) { editor.on('init', function () { editor.insertHTML('<p>初始化 tinymce...</p>'); }); } });

      在这个示例中,我们在初始化tinymce时添加了一个事件监听器。当tinymce 初始化完成后,我们将一段文本插入到编辑器中。

      如果在初始化过程中遇到任何错误,你可以在 Vue 实例的 beforeDestroy 方法中处理它们:

      javascript tinymce.init({ selector: '#tinymce', language: 'zh-CN', setup: function (editor) { editor.on('init', function () { editor.insertHTML('<p>初始化 tinymce...</p>'); }); }, beforeDestroy: function () { editor.remove(); } });

      这样,当编辑器被销毁时,所有的实例操作都会被清理,避免了错误。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部