vue 使用CKEditor 富文本

 引入：

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，cli3在根目录下新建vue.config.js文件里面写，内容如下：

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

项目中即可使用

使用：

<template>
  <div id="all">
        <textarea id="content" rows="10" cols="80"></textarea>
        <el-button type="primary" class="community_submit_btn" @click='clickBtn'>提交</el-button>
  </div>
</template>

<script>
 import CKEDITOR from 'CKEDITOR'
  export default {
    name: 'editor',
    data() {
      return {

      };
    },
    mounted() {
    //构造一个富文本编辑器 给一个div用id绑定
      CKEDITOR.replace('content', {height: '300px', width: '600px', toolbar: 'toolbar_Full'});
      this.editor = CKEDITOR.instances.editor;
    },
    methods:{
        clickBtn(){
            var stemTxt=CKEDITOR.instances.content.document.getBody().getText(); //取得纯文本     
            console.log(stemTxt)
            var stem = CKEDITOR.instances.content.getData();  //取得带标签的文本 给后端的传值
            console.log(stem)
        }
    }
}
</script>

<style scoped>
#all{
    background: #fff;
}
.community_submit_btn{
    margin-top: 20px;
}
</style>