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

  1. 根据需要下载对应的 CKEditor 程序包:https://ckeditor.com/ckeditor-4/download/
  2. 解压程序包到 vue-cli 的静态资源目录 /static 中,如图所示:
    目录结构
  3. index.html 页面引入 ckeditor.js 文件,尽量采用绝对路径引入(刷新页面时,会根据路由相对路径加载该 js 文件,采用相对路径会有时会导致找不到该文件!)
<script src="/static/ckeditor/ckeditor.js" type="text/javascript"></script>
  1. 修改 webpack 配置文件 build/webpack.base.conf.js,内容如下:
module.exports = {
  externals: {
    "CKEDITOR": "window.CKEDITOR"
  }
}
  1. 根据需要创建 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

Logo

前往低代码交流专区

更多推荐