Laravel+Vue3集成CKEditor5无法显示的问题求助

问题场景 #

在Laravel + Vue3（Inertia）项目中替换富文本编辑器为CKEditor5，按官方文档安装依赖后编辑器无法显示，控制台出现以下警告：

• [Vue警告]：组件缺少模板或渲染函数。
• [Vue警告]：传递了多余的非props属性(rows)，但由于组件渲染片段或文本根节点，无法自动继承。

现有代码（Form.vue） #

<script setup>
import { ref } from 'vue';
import { Inertia } from '@inertiajs/inertia';
import { useForm, usePage } from '@inertiajs/inertia-vue3';

import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

const props = defineProps({
  // ... 现有props配置
});

const form = useForm({
  // ... 现有表单配置
});

const save = () => {
  // ... 现有保存逻辑
};
</script>

<div class="mb-8 min-h-[450px] bg-gray-200 rounded-lg">
  <CKEditor
    v-model="form.content"
    :editor="ClassicEditor"
  />
  <JetInputError
    :message="form.errors.content"
    class="mt-2"
  />
</div>

问题原因 #

组件导入方式错误：@ckeditor/ckeditor5-vue的Vue3版本中，CKEditor组件是命名导出，直接导入整个模块会得到一个包含组件的对象，而非组件本身，导致Vue无法识别并渲染。

正确集成步骤 #

1. 修正组件导入 #

将原导入语句：

import CKEditor from '@ckeditor/ckeditor5-vue';

改为：

import { CKEditor } from '@ckeditor/ckeditor5-vue';

2. 确认依赖安装 #

确保已安装正确的依赖包：

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

3. 完善表单初始值 #

确保form.content有初始值（比如空字符串），避免modelValue=undefined引发的潜在问题：

const form = useForm({
  content: ''
  // ... 其他表单字段
});

4. 完整修正后的代码片段 #

<script setup>
import { ref } from 'vue';
import { Inertia } from '@inertiajs/inertia';
import { useForm, usePage } from '@inertiajs/inertia-vue3';

import { CKEditor } from '@ckeditor/ckeditor5-vue';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

const props = defineProps({
  // ... 现有props配置
});

const form = useForm({
  content: ''
  // ... 其他表单字段
});

const save = () => {
  // ... 现有保存逻辑
};
</script>

<div class="mb-8 min-h-[450px] bg-gray-200 rounded-lg">
  <CKEditor
    v-model="form.content"
    :editor="ClassicEditor"
  />
  <JetInputError
    :message="form.errors.content"
    class="mt-2"
  />
</div>

验证效果 #

重新编译项目（执行npm run dev），CKEditor5即可正常渲染，控制台的警告也会消失。

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