解决使用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代码 :
第一次我在使用的时候 是吧 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("您还没有选择封面图片...");}
})