使用Inline CkEditor 5绑定数据值

Question

我要将CkEditor 4升级到CkEditor 5，并希望将内联编辑器与vue.js v1.0.24一起使用。如何使用vue.js绑定内联编辑器的值？

由于内联编辑器在新版本的CkEditor上不支持textarea，因此我无法使用v-model绑定值，因为我正在使用div创建不支持v-model的编辑器。我尝试了一个额外的隐藏文本区域，并对其进行了调度编辑器更改，并使用v模型绑定数据。但是，调度将抛出“无法读取属性'removeChild'为null”，并且当从文本区域中删除v-model属性时，错误停止显示。

 //ckeditor-upgrade.jsp
       <script src="https://cdn.ckeditor.com/ckeditor5/12.1.0/inline/ckeditor.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.5.1/vue-resource.js"></script>

    <div>
       <ckeditor-upgrade> 	</ckeditor-upgrade>
    </div>

    <script id="ckeditorUpgrade" type="text/x-template">
    <div>
       <div id="editor" contenteditable=true>
          {{{message}}}
       </div>
      <textarea id="txtArea_editor" v-model="message"></textarea>
    </div>
    </script>
    <script>
    Vue.component('ckeditor-upgrade', {
    	template: '#ckeditorUpgrade',
    	data:function(){	
    			return {message:"Test data"}
    		},
    	ready: function() {
    		$('div[contenteditable=true]').each(function(index) {
    			var that = this;
    			InlineEditor
    	        .create( document.querySelector( '#' +this.id ))
    	        .then( editor => {
    	        editor.model.document.on( 'change:data', () => {
    	    	       var hiddenTextArea = $('#txtArea_' +that.id)[0];
    	    	       hiddenTextArea.value = editor.getData();
    	    	       var e = document.createEvent('HTMLEvents')
    	               e.initEvent('change', false, true);
    	    	       hiddenTextArea.dispatchEvent(e);
    	        } );
    	      } )
    	        .catch( error => {
    	            console.error( error );
    	        } );
        	
    	})
    	}
    });

    var vm = new Vue({
    	el: '#wrap',
    	ready: function () {
    	
    	}
    })
    </script>

我希望在编辑器中进行更改时，编辑器的任何内容更改都将被分派到textarea并更新“消息”的值，而不会引发如上所述的任何控制台错误。