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

Vue2.0中使用CKeditor富文本编辑器，主要包括使用实例，应用技巧的朋友可以参考一下。

因业务需求，需要用到富文本编辑器，经过一番调研，最终决定用CKEditor，因为需要结合VUE技术栈进行使用，故而有了这篇博客，以解决VUE中使用CKEditor的问题。

截止目前（2019年） -01-01），CKEditor有两个大的版本::

CKEditor 5不可用于商业用途，如果使用该版本，下面的内容不需要看，直接可以npm安装并使用，详见官方文档=> 富文本编辑器组件for Vue.js

CKEditor 4：可用于商业用途，博客内容主要是介绍这个版本的使用。

参考链接：

软件许可协议

各大开源协议的比较

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>

修改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() {

     this.$nextTick(() => {

        CKEDITOR.replace('ck-editor', {height: '400px', width: '100%', toolbar: 'toolbar_Full'})

      })

    },

    beforeDestroy() {

    },

    computed: {},

    methods: {},

    components: {}

  };

</script>

<style rel="stylesheet/less" scoped>

</style>

销毁插件

if (CKEDITOR.instances['ck-editor']) CKEDITOR.instances['ck-editor'].destroy()

猜你喜欢