vue使用ckeditor插件基本操作步骤如下：
ckeditor 地址:https://ckeditor.com/
使用方法也很简单
1.下载ck的包，也可以使用npm直接下载，推荐使用ck4
下载地址：https://ckeditor.com/ckeditor-4/download/
（我下载的是Full Package的插件，根据个人的需求下载插件）
image.png
2.将下载好的包解压到文件夹
3.将解压好的包放到vue-cli的pubilc中
image.png
4.需要在index.html中引入ck的js代码
<script src="ckeditor/ckeditor.js"></script>
image.png
5.创建ck 公用模板 ckdeitor.vue (我定义的文件名)
image.png
代码如下：
<template>
<div>
<textarea :id="id" name="content"></textarea>
</div>
</template>
<script>
export default {
props: ["content"],//从父组件转递的内容
mounted: function() {
const self = this;
// 渲染编辑器
self.ckeditor = window.CKEDITOR.replace('content',{height:'280px'});//定义编辑器的高度
// 设置初始内容
self.ckeditor.setData(self.content);
// 监听内容变更事件
self.ckeditor.on("change", function() {
self.$emit("sendContnet", self.ckeditor.getData());
});
},
data: function() {
return {
id: parseInt(Math.random() * 10000).toString(),
ckeditor: null
};
},
watch: {
// 监听prop的变化，更新ckeditor中的值
content: function() {
if (this.content !== this.ckeditor.getData()) {
this.ckeditor.setData(this.content);
}
}
}
};
</script>
<style scoped>
</style>
6.在需要的地方引入ckeditor.vue插件
image.png
代码如下：
<template>
<div>
<ckeditor @sendContnet="getContent" :content="infoText"></ckeditor>
</div>
</template>
<script>
import ckeditor from '../../../../../../../components/ckeditor.vue'
export default {
components: { ckeditor },
data() {
return {
infoText: ' '
}
},
methods: {
//获取富文本编译器内容
getContent(val) {
this.infoText = val
}
}
}
</script>
7.最后效果图
image.png
