vue-cli3外部引入插件CKEditor

参考 ：https://blog.csdn.net/asyadmin/article/details/98854034

1. 下载CKEditor4

https://ckeditor.com/ckeditor-4/download/

将解压后的CKeditor目录放至/public/static/目录下，然后在index.html中引入

2.引入vue-cli引入CKeditor

<!-- 引入 CKeditor-->
<script src='static/ckeditor/ckeditor.js' type="text/javascript"></script>

3. 创建CKeditor组件

在/src/components/CKEditor中创建index.vue组件

<template>
  <div>
    <textarea :id="id" />
  </div>
</template>
<script>
export default {
  name: 'CkEditor',
  /* eslint-disable */
  props: ['content'],
  mounted: function() {
    const self = this

    // 渲染编辑器
    self.ckeditor = window.CKEDITOR.replace(self.id)

    // 设置初始内容
    self.ckeditor.setData(self.value)

    // 监听内容变更事件
    self.ckeditor.on('change', function() {
      self.$emit('input', self.ckeditor.getData())
    })
  },
  // 销毁组件前，销毁编辑器
  beforeDestroy: function() {
    self.ckeditor.destroy()
  },
  data: function() {
    return {
      id: parseInt(Math.random() * 10000).toString(),
      ckeditor: null
    }
  },
  watch: {
    // 监听prop的变化，更新ckeditor中的值
    value: function() {
      if (this.value !== this.ckeditor.getData()) {
        this.ckeditor.setData(this.value)
      }
    }
  }
}
</script>

4. 引入组件

<template>
  <div>
    <div id="app" style="width:80%;margin-left:10%">
      <ck-editor v-model="content" />
    </div>
  </div>
</template>
<script>
import CkEditor from '@/components/CKEditor'
export default {
  components: { CkEditor },
  data() {
    return ({
      content: ''
    })
  }
}
</script>