vue2.x项目引入CKEditor4的两种方式

百度用了不行的看过来，本文专治各种流程不通的

一.直接npm下载型

1. 下载ckeditor到vue项目

npm install ckeditor4-vue

2.在main.js里导入

import Vue from 'vue';
import CKEditor from 'ckeditor4-vue';

Vue.use( CKEditor );

3.在需要使用的组件里这样使用

<template>
    <div id="app">
        <ckeditor v-model="editorData" :config="editorConfig"></ckeditor>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data() {
            return {
                editorData: '<p>Content of the editor.</p>',
                editorConfig: {
                    // The configuration of the editor.
                }
            };
        }
    }
</script>

不用做什么配置，傻瓜式安装。
另附官网文档：

vue2.x项目里引入cleditor4

二、下载文件引入型

1.先去官网下载你所需要的包
2.将下载好的包放在 public文件里面，如下图

3.在public/index.html里引入文件,路径一定要正确

4.在需要的组件使用即可

<template>
  <div style="text-align: center; margin: 20px">
    <textarea name="editor1" id="editor1" rows="10" cols="80"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  mounted() {
    CKEDITOR.replace("editor1")
  },

  methods: {},
}
</script>

然后运行项目即可看到效果。
出现找不到CKEDITOR，检查一下index.html里的引入路径，一般都是路径不正确导致的