Medium Editor 未在 VueJS 指令中预填充值

Question

我正在尝试将媒体编辑器与 VueJs 指令集成。

它运行良好，但该字段的初始 value 道具最初并未填充媒体编辑器。一旦我在媒体编辑器中更新文本，就会建立 link 并且 html 会填充到文本区域中。

指令：

Vue.directive('wysiwyg', {
  bind () {
    let editor = new MediumEditor(this.el)
  }
})

元素：

<textarea v-wysiwyg name="{{ name }}" class="wysiwyg">{{ value }}</textarea>

绑定函数似乎在值填充到 textarea 之前运行。

有谁有整合这两者的经验吗？

Answer 1

是的，容器上的绑定将在其内容绑定之前发生。您可以使用 nextTick.

等待它

Vue.directive('wysiwyg', {
  bind() {
    Vue.nextTick(() => new MediumEditor(this.el));
  }
});

new Vue({
  el: 'body',
  data: {
    value: 'Initial text'
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/medium-editor/5.22.0/js/medium-editor.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/medium-editor/5.22.0/css/medium-editor.min.css" rel="stylesheet" />
<textarea v-wysiwyg name="{{ name }}" class="wysiwyg">{{ value }}</textarea>

Medium Editor 未在 VueJS 指令中预填充值

Medium Editor not pre-filling value in VueJS directive

vue.js

medium-editor