CKEditor 5 - 带有 VueJS v1 的经典 - 数据未设置

Posted 2023-02-23

【中文标题】CKEditor 5 - 带有 VueJS v1 的经典 - 数据未设置

【英文标题】：CKEditor 5 - Classic with VueJS v1 - data not getting set

【发布时间】：2018-04-06 00:00:15

【问题描述】：

我在 Vue V1 中有一个自定义类型：

Vue.component('c_k_editor-fieldtype', 

    mixins: [Fieldtype],

    template: `
        <div>
            <label class="block" style="font-weight:500">CKEditor</label>
            <textarea class="form-control" id="foo" v-model="data"></textarea>
        </div>
    `,

    data: function() 
        return 
            //
        ;
    ,

    computed: 
        //
    ,

    methods: 
        //
    ,

    ready: function() 
        ClassicEditor
            .create( document.querySelector( '#foo' ) );
    
);

它正确加载数据，但是当我在字段中输入时，data 属性没有更新（见截图）

每当编辑器数据更改时，是否有可以捕获的事件或其他什么，以便我可以更新 Vue (V1) 数据？

【问题讨论】：

我认为您需要将 props 值从子级更新为父级。试试看这里***.com/questions/43701175/…

【参考方案1】：

这可行，但我不知道它是否“正确”：

    ready: function() 

    ClassicEditor
        .create( document.querySelector( '#foo' ) )
        .then(editor => 
            editor.document.on( 'change', ( evt, data ) => 
                this.data = editor.getData();
             );
        );

【讨论】：

Document#event:changesDone 会更合适 - 它被触发的频率更低：docs.ckeditor.com/ckeditor5/latest/api/…。尽管如此，在用户执行每个操作（例如，使用箭头键更改选择）后，此事件至少会触发一次。