1.官网下载cksditor的文件包放到public目录下。
CKEditor 5 - Download Latest Version
2.index.html中引入ckeditor.js文件。
<script type="text/javascript" src="<%= BASE_URL %>ckeditor/ckeditor.js"></script>
3.创建子组件creditor.vue。
<template>
<div>
<textarea :id="id" name="content"></textarea>
</div>
</template>
<script>
export default {
name:"ckeditor",
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>
4.页面引入子组件。
<template>
<div>
<ckeditor @sendContnet="getContent" :content="infoText"></ckeditor>
</div>
</template>
<script>
import ckeditor from './ckeditor.vue'
export default {
name: 'Analysis',
components: { ckeditor },
data() {
return {
infoText: ' '
}
},
methods: {
//获取富文本编译器内容
getContent(val) {
this.infoText = val
}
}
}
</script>
5.页面效果展示