vue中使用富文本编辑器ckeditor

1.官网下载cksditor的文件包放到public目录下。

CKEditor 5 - Download Latest Version

2.index.html中引入ckeditor.js文件。

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

3.创建子组件creditor.vue。

<template>
  <div>
    <textarea :id="id" name="content"></textarea>
  </div>
</template>
<script>
export default {
 name:"ckeditor",
  props: ["content"],//从父组件转递的内容
  mounted: function() {
    const self = this;
    // 渲染编辑器
    self.ckeditor = window.CKEDITOR.replace('content',{height:'280px'});//定义编辑器的高度
    // 设置初始内容
    self.ckeditor.setData(self.content);

    // 监听内容变更事件
    self.ckeditor.on("change", function() {
      self.$emit("sendContnet", self.ckeditor.getData());
    });
  },
  data: function() {
    return {
      id: parseInt(Math.random() * 10000).toString(),
      ckeditor: null
    };
  },
  watch: {
    // 监听prop的变化，更新ckeditor中的值
    content: function() {
      if (this.content !== this.ckeditor.getData()) {
        this.ckeditor.setData(this.content);
      }
    }
  }
};
</script>
<style scoped>
</style>

4.页面引入子组件。 

<template>
  <div>
    <ckeditor @sendContnet="getContent" :content="infoText"></ckeditor>
  </div>
</template>
<script>
import ckeditor from './ckeditor.vue'
export default {
  name: 'Analysis',
  components: { ckeditor },
  data() {
    return {
      infoText: ' '
    }
  },
  methods: {
    //获取富文本编译器内容
    getContent(val) {
      this.infoText = val
    }
  }
}
</script>

5.页面效果展示