checkbox居中 editor_vue项目集成富文本编辑器CKEditor4

1. 官网下载CKEditor 4，将解压的ckeditor文件夹整体放在项目的public下

2.在Vue的index.html中引入CKEditor4

3.在components下新建ckeditor.vue文件，并在其中配置上出图片的路径

let { kpaasApiHost }=httpConfig;

import sysConfigfrom '../config/system';

exportdefault{

name:"ckeditor4",

props: ["value"],

mounted: function() {const self = this;//渲染编辑器，配置上传图片的路径

// self.ckeditor = window.CKEDITOR.replace(self.id);

setTimeout(function(){

// 渲染编辑器

self.ckeditor = window.CKEDITOR.replace(self.id,{filebrowserImageUploadUrl:  kpaasApiHost+'api/assets_service/v1/assets/upload_editer?secret_key='+sysConfig.secret_key+'&session_id='+localStorage.getItem("sessionId") });

// 设置初始内容

self.ckeditor.setData(self.value);

// 监听内容变更事件

self.ckeditor.on("change", function() {

self.$emit("input", self.ckeditor.getData());

});

},100)

},

data: function() {return{

id: parseInt(Math.random()* 10000).toString(),

ckeditor:null};

},

watch: {//监听prop的变化，更新ckeditor中的值

value: function() {if (this.value !&#