CKEditor4与vue集成

最新推荐文章于 2026-05-04 09:49:01 发布

原创

最新推荐文章于 2026-05-04 09:49:01 发布 · 8.3k 阅读

收录于

这篇博客记录了在公司ERP项目中，由于CKEditor 5的功能不满足需求，选择CKEditor 4并进行Vue集成的过程。内容包括CKEditor 4的下载、静态资源的存放、Vue组件的创建及使用，以及如何自定义CKEditor的菜单配置。

最近公司ERP功能使用富文本编辑器CKEditor，在官网上看了一下发现CKEditor 5的功能不满足需要，所以选择了CKEditor 4 ，但是官网暂时没有提供CKEditor4与Vue的集成，这里记录下集成过程

CKEditor 4下载地址（full-.zip）
https://ckeditor.com/ckeditor-4/download/
解压后的文件放在Vue项目的static目录下

在Vue的index.html中引入CKEditor4

<script src="static/ckeditor/ckeditor.js"></script>

新建Vue组件

<template>
    <div>
        <textarea :id="id"></textarea>
    </div>
</template>

<script>
export default {
  name: 'ckeditor4',
  props: [
    'value'
  ],
  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())
    })
  },