解决使用vue.js与ckeditor.js时，ckeditor不显示问题

我们都知道在vue2.js中新增了虚拟dom 

这里是我的js代码：

var vm1 = new Vue({
el : '.myfrom',
data : {
items : []
},
created : function(){
$.post("/island/admin/queryOneNewsById.do",{"id":parseInt(id)},function(data){
vm1.items = data;
/*Vue.nextTick(function () {
CKEDITOR.replace('editor01');
       });*/
}); //end post
}
})

这里是我的html代码 : 

action="/island/admin/reviseOneNews.do">

前台小窗口

新闻标题 id="news_title" name="title" placeholder="请输入新闻标题"
v-text="items.title">

新闻封面内容
<span></span>placeholder="请输入新闻封面内容" id="news_covercontent">{{items.covercontent}}

作者
<span></span>placeholder="请输入作者姓名" id="news_author">{{items.author}}

请选择新闻封面

type="button" name="file" class="button" value="Browse..." /> type="file" size="30" name="file" />

新闻内容

请输入...

style="float:right;width:100px;margin-top:10px;">提交

第一次我在使用的时候 是吧 CKEDITOR.replace('editor01'); 这里的editor01是textarea中的name名，我把ckeditor的初始化放在了vue初始化的前面 ，这里就会出现错误，而放在后面则不会 原因就是当vue.js初始化的时候 el 是一个容器 而且此时会把el下的所有元素作为虚拟dom放在内存中 也就是这个时候 页面中是不存在这个表单的  而我们把ckeditor的初始化放在前面就会出错（因为你在初始化一个根本不存在的节点）  

这里推荐一种做法 ：

Vue.nextTick(function () {
CKEDITOR.replace('editor01');
       });

将此代码放入created方法中

这样做后仍然可能会不管用  请清理缓存 服务器上的缓存清理干净 浏览器缓存清理 再打开即可

这里还有一个需要注意的是  我的jquery中有对vue.js渲染的dom部分进行dom节点操作  但是这部分等于是后来通过jquery的方式添加(动态加载)  所以需要使用on方法进行数据绑定

示例代码如下

//显示上传图片名字(前台上传按钮样式)
$(document).on("change","input[type=file]",function(){
$(this).parents(".uploader").find(".filename").val($(this).val().substring(12,$(this).val().length));
})
$(document).on("each","input[type=file]",function(){
if($(this).val()==""){$(this).parents(".uploader").find(".filename").val("您还没有选择封面图片...");}
})