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>