在组件之间更新 tinymce 编辑器文本

Question

所以我正在使用 Vue 的 tinymce 编辑器。我在父组件中显示一个编辑器，然后在子组件中呈现另一个编辑器，它反应性地显示在父组件中键入的内容。我遇到的问题是孩子落后了一个角色。我尝试使编辑器内容在子项中成为其自己的变量，而不是通过道具传递，但我无法找到一种正确更新的方法，同时还保存了 tinymce 添加的 HTML 标签。

这是我所拥有的：

父组件：

                        <Editor
                          v-model="body"
                          api-key=****
                          model-events="change keydown blur focus paste undo redo"
                          :init="{
                            height: 300,
                            menubar: false,
                            nonbreaking_force_tab: true,
                            branding: false,
                            init_instance_callback: function (editor) {
                              editor.on('Change', function (e) {
                                setHasChanges(); //this just says the form has updates
                              });
                            },
                            plugins: [
                              'advlist autolink lists link image charmap',
                              'searchreplace visualblocks code fullscreen',
                              'print preview anchor insertdatetime media',
                              'paste code help wordcount table'
                            ],
                            toolbar:
                              'undo redo | formatselect | bold italic | \
                            bullist numlist | \
                            alignleft aligncenter alignright outdent indent | help'
                          }"
                        >
                        </Editor>

还有孩子：

        <Editor
          :value="body"
          api-key=***
          model-events="change keydown blur focus paste undo redo"
          disabled="true"
          :init="{
            menubar: false,
            branding: false,
            toolbar: false,
            statusbar: false,
            content_style:
              'body { font-size: 12px; line-height: 1.35; margin: 10px auto 0; display: block; position: relative; height: 100px; overflow-x: hidden }'
          }"
        >
        </Editor>

所以如果父组件的编辑器有这个：

<h2>Here is a title!</h2>
<ul>
 <li>and a bullet point</li>
 <li>and another</li>
</ul>

孩子会显示：

这是一个标题！

1. 和一个要点
2. 和另一个

如何在保持 HTML 标记的同时响应式更新子级？

Answer 1

所以我想通了。我所要做的就是将“输入”添加到父组件上编辑器的模型事件中。