Vue.js结合Laravel 5.5中CKeditor无法使用问题咨询

我之前在Laravel 5.5 + Vue.js的项目里踩过CKeditor初始化的坑，给你分享几个亲测有效的解决思路，应该能帮你搞定：

方法一：用官方Vue CKEditor组件（最省心） #

Laravel 5.5配套的Vue版本一般是2.x，所以咱们选适配Vue2的CKEditor5组件：

1. 先安装依赖：

npm install @ckeditor/ckeditor5-vue@1 @ckeditor/ckeditor5-build-classic

2. 在你的Vue组件里直接使用：

<template>
  <div class="form-group">
    <label>内容编辑</label>
    <ckeditor
      :editor="ClassicEditor"
      v-model="form.content"
      :config="{ toolbar: ['bold', 'italic', 'link', 'undo', 'redo', 'bulletedList'] }"
      class="form-control"
    ></ckeditor>
  </div>
</template>

<script>
// 导入编辑器和Vue组件
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import CKEditor from '@ckeditor/ckeditor5-vue';

export default {
  // 注册组件
  components: {
    CKEditor
  },
  data() {
    return {
      ClassicEditor,
      form: {
        content: ''
      }
    };
  }
};
</script>

这种方式不用手动处理DOM，v-model会自动同步内容，非常省心。

方法二：手动初始化原生CKEditor（适合自定义需求多的场景） #

如果你更习惯用原生CKEditor JS，核心是要在Vue组件挂载完成后再初始化，也就是在mounted钩子里面操作：

1. 安装CKEditor4（兼容性更好，适合老项目）：

npm install ckeditor4

2. 在resources/js/app.js里导入CKEditor：

import 'ckeditor4/ckeditor';

3. 在Vue组件里编写代码：

<template>
  <div class="form-group">
    <label>内容编辑</label>
    <textarea id="editor" class="form-control" v-model="form.content"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        content: ''
      },
      editorInstance: null // 存编辑器实例，方便后续销毁
    };
  },
  mounted() {
    // 等DOM渲染完成后，初始化CKEditor
    this.editorInstance = CKEDITOR.replace('editor', {
      // 自定义工具栏，按需调整
      toolbar: ['Bold', 'Italic', 'Link', 'Unlink', 'Undo', 'Redo', 'NumberedList', 'BulletedList']
    });

    // 监听编辑器内容变化，同步到Vue的data里
    this.editorInstance.on('change', () => {
      this.form.content = this.editorInstance.getData();
    });
  },
  beforeDestroy() {
    // 组件销毁时一定要销毁编辑器，避免内存泄漏
    if (this.editorInstance) {
      this.editorInstance.destroy();
    }
  }
};
</script>

几个Laravel环境下的注意事项 #

• 检查你的webpack.mix.js是否正确配置了Vue编译：

mix.js('resources/js/app.js', 'public/js')
   .vue({ version: 2 }) // Laravel 5.5对应Vue2，要指定版本
   .sass('resources/sass/app.scss', 'public/css');

• 如果用CDN引入CKEditor，一定要把CDN脚本放在app.js之前加载，确保CKEditor在Vue初始化前就已加载完成：

<script src="https://cdn.ckeditor.com/4.22.1/standard/ckeditor.js"></script>
<script src="{{ mix('js/app.js') }}"></script>

如果还是不行，打开浏览器控制台看看有没有报错信息，比如有没有找不到DOM元素、依赖未加载之类的问题，这些细节往往是关键。

内容的提问来源于stack exchange，提问作者nlagdhir