ckeditor4与vue集成
ckeditor4与vue集成
公司的项目开始使用的是ckeditor5，由于ckeditor5目前功能还不够完善，所以不得不替换成ckeditor4，以下记录一下vue-cli项目与ckeditor的集成方法。
下载要使用的ckeditor4构建版本
下载地址:(偶尔会被墙，偶尔不会，建议访问外国网站连接)官网下载地址
根据自己的需要下载，之后解压放到vue的static目录中。
加载ckeditor
修改vue项目中的index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <script src="static/ckeditor/ckeditor.js"></script> <title>后台管理系统</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
复制以下内容，作为一个vue组件
<template> <div> <textarea :id="id"></textarea> </div> </template> <script> export default { name: 'ckeditor4', props: [ 'value' ], mounted: function() { const self = this // 渲染编辑器 self.ckeditor = window.CKEDITOR.replace(self.id) // 设置初始内容 self.ckeditor.setData(self.value) // 监听内容变更事件 self.ckeditor.on('change', function() { self.$emit('input', self.ckeditor.getData()) }) }, data: function() { return { id: parseInt(Math.random() * 10000).toString(), ckeditor: null } }, watch: { // 监听prop的变化，更新ckeditor中的值 value: function() { if (this.value !== this.ckeditor.getData()) { this.ckeditor.setData(this.value) } } }, // 销毁组件前，销毁编辑器 beforeDestroy: function() { self.ckeditor.destroy() } } </script>
使用组件
首先，引入组件
import ckeditor4 from 'path/to/CkeditorComponent'
添加组件：
... components: { 'ckeditor4': ckeditor4 }, ...
在模板中使用组件：
<ckeditor4 v-model="content"></ckeditor4>
这样，刷新页面，ckeditor4就与vue集成好了。相对于ckeditor5，目前ckeditor4基本包含了对于富文本编辑器的所有需求。鉴于百度ueditor已经不再维护，应该说ckeditor4还是一款非常不错的富文本编辑器。
文章作者ianzhi,原文地址：https://cloud.tencent.com/developer/article/1476872
文章版权归作者所有，转载请保留此声明。