vue中引用CKEditor富文本编辑器及其图片上传

经理要求选择一款功能强大且比较成熟的富文本编辑器，所以初步决定使用ckeditor，在这里小金用的是ck4版本。

1、首先需要下载其安装包，在ckeditor-4官方下载地址下载；然后其解压到你的静态资源中

2、然后在index.html文件夹的header中引入：

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

3、再在build/webpack.base.conf.js中添加

externals: {

    "CKEDITOR": "window.CKEDITOR"

  },

4、封装成ck组件

<template>

    <div>

        <textarea id="editor" rows="10" cols="80"></textarea>

    </div>

</template>

<script type="text/ecmascript-6">

  import CKEDITOR from 'CKEDITOR';

  export default {

    name: 'editor',

    mounted() {

      CKEDITOR.replace('editor', {

            filebrowserImageUploadUrl= "这里是你上传服务器的路径"（ 在加上这句话之后就能打               开上传功能了）

    }）；

          this.editor = CKEDITOR.instances.editor;

   },

  };

</script>

<style scoped>

</style>

5、注意事项：报错400，弹框

    首先开启上传功能不是唯一的，还可以在源码中修改，并且在其config.js中也可以配置；

爬坑1：点击上传的时候报400，注意——ck上传文件并不是file格式，而是独特的upload格式；

爬坑2：文件上传服务器之后自动获取了并跳转到图片信息，图片的宽、高、路径；但是必须要求后端的数据格式符合ck的信息要求（详情见CKEditor 4 documentation）；如果不符合则会弹出一个alert框报错；

前端新手，有错请及时反馈，定认真修改