Vue2.0 中使用 CKeditor 富文本编辑器

因业务需求，需要用到富文本编辑器，经过一番调研，最终决定用 CKEditor，因为需要结合 VUE 技术栈进行使用，故而有了这篇博客，以解决 VUE 中使用 CKEditor 的问题。
截止目前（2019-01-01），CKEditor 有两个大的版本：
CKEditor 5：不可用于商业用途，如果使用该版本，下面的内容不需要看，直接可以 npm 安装并使用，详见官方文档 => Rich text editor component for Vue.js
CKEditor 4：可用于商业用途，博客内容主要是介绍这个版本的使用。
参考链接：
Software License Agreement
各大开源协议的比较

根据需要下载对应的 CKEditor 程序包：https://ckeditor.com/ckeditor-4/download/
解压程序包到 vue-cli 的静态资源目录 /static 中，如图所示：
在 index.html 页面引入 ckeditor.js 文件，尽量采用绝对路径引入（刷新页面时，会根据路由相对路径加载该 js 文件，采用相对路径会有时会导致找不到该文件！）

<script src="/static/ckeditor/ckeditor.js" type="text/javascript"></script>

修改 webpack 配置文件 build/webpack.base.conf.js，内容如下：

module.exports = {
  externals: {
    "CKEDITOR": "window.CKEDITOR"
  }
}

根据需要创建 CKEditor.vue 组件，内容如下：

<template>
    <div>
        <textarea id="ck-editor" rows="10" cols="80"></textarea>
    </div>
</template>

<script type="text/ecmascript-6">
  import CKEDITOR from 'CKEDITOR';
  export default {
    name: 'editor',
    data() {
      return {};
    },
    mounted() {
      CKEDITOR.replace('ck-editor', {height: '400px', width: '100%', toolbar: 'toolbar_Full'});
      this.editor = CKEDITOR.instances.editor;
    },
    beforeDestroy() {
    },
    computed: {},
    methods: {},
    components: {}
  };
</script>

<style lang="less" rel="stylesheet/less" scoped>

</style>

最后，开启服务，打开浏览器查看效果即可，CKEditor 更多高级用法，参见官方文档：
https://ckeditor.com/docs/ckeditor4/latest/index.html
https://ckeditor.com/docs/ckeditor5/latest/index.html

Vue2.0 中使用 CKeditor 富文本编辑器

猜你喜欢