CKEditor4富文本编辑器安装和使用

使用CKEditor4富文本编辑器和其他的第三方组件库不一样，不可以使用npm install 进行下载。
而是必须进入官网进行下载压缩包。（CKEditor官方网址—可以点击直接过去）

进去后会发现分为：基本套餐、标准套餐、全包、定制四种使用方式，每个都对应着不同的样式和功能。
1、这时就可以选择你需要的进行下载，解压时切记一定要选择 解压到当前文件夹。
2、解压后需要将文件夹复制到项目根目录下 public/static 下。
3、完成后需要在index.html进行引入。

4、这时就需要配置一下webpack文件，注意的是旧版本会有 webpack.base.conf.js 这个文件夹，新版本这个文件被去除了，改为了 vue.config.js。
webpack.base.conf.js中可以直接在导出项中写入下面这行代码。

           externals: {"CKEDITOR": "window.CKEDITOR"},
 

vue.config.js则需要找到 configureWebpack 这个函数，将上面的代码复制进去。

5、接下来就需要在你需要使用到富文本编辑器的页面进行引入。

import CKEDITOR from "CKEDITOR"
 

6、使用时在 template 中写入下面的代码。

7、在 mounted 这个生命周期中写入下面这行代码。

    mounted() {CKEDITOR.replace("editor", {height: "300px", width: "100%", toolbar: "Full"});},
 

这时你在打开你的页面就可以看见他出来啦！

功能还是很强大的，同时告诉大家可以通过 CKEDITOR.instances.editor.getData() 这个函数获取到编辑器的值。