我在https://ckeditor.com/ckeditor-5/online-builder/（基于“解耦组件”类型）中创建了自定义ckeditor 5 build，最后我下载了带有文件的zip。但是接下来我应该怎么做如何将它导入 main.js / package.js 并最终导入到组件中？
我能找到的所有材料都是 https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs-v3.html ，解耦文档预设构建工作，但想添加图像调整大小，所以创建了自定义构建并卡在了那个点。
Tnx 响应。
【问题讨论】：
这篇文章可能更长，但它超级容易 5 分钟完成。
此示例适用于 ckeditor 5 的完整文档类型，解耦文档几乎是您需要的一切，只是它缺少 image-resize，请添加到 https://ckeditor.com/ckeditor-5/online-builder/ 一路点击并添加 image-resize 或所有其他有趣的东西，下载 zip 文件，不要忘记在步骤 1 中选择与您将使用/安装的类型相同的类型。
安装（如经典指南 - https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs-v3.html）
npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-decoupled-document
在 main.js 中
import CKEditor from '@ckeditor/ckeditor5-vue';
createApp(App)
.use(router)
.use(CKEditor)
.mount("#app");
在你的组件中
import DocumentEditor from '@ckeditor/ckeditor5-build-decoupled-document';
现在将配置添加到数据中，您可以在从在线生成器生成器获得的文件中找到此配置生成的复制/粘贴，因此 不要惊慌 :) 。您可以在 /sample/index.html 中找到它，如果您不设置它可能会看到有关缺少“工具栏”选项的警告。不要复制您在下面看到的内容，请使用您自定义生成的配置，它仅用于说明：
data: function () {
return {
editor: DocumentEditor,
editorData: '<p>Content of the editor.</p>',
editorConfig: {
ckfinder: {
uploadUrl: 'http://www.mypage.com/api/uploadckeditor'
},
toolbar: {
items: [
'heading',
'|',
'fontSize',
'fontFamily',
'fontColor',
'fontBackgroundColor',
'imageInsert',
'|',
'bold',
'italic',
'underline',
'strikethrough',
'highlight',
'removeFormat',
'|',
'alignment',
'|',
'numberedList',
'bulletedList',
'|',
'indent',
'outdent',
'|',
'todoList',
'link',
'blockQuote',
'imageUpload',
'insertTable',
'mediaEmbed',
'|',
'undo',
'redo',
'CKFinder'
]
},
language: 'cs',
image: {
toolbar: [
'imageTextAlternative',
'imageStyle:full',
'imageStyle:side',
'linkImage'
]
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells'
]
},
licenseKey: ''
}
现在在组件 html 中使用它
<ckeditor :editor="editor" @ready="onReady" v-model="editorData" :config="editorConfig"></ckeditor>
解耦组件ckeditor包需要@ready="onReady"否则不会初始化（经典不需要这个）
方法如下：
methods: {
onReady( editor ) {
// Insert the toolbar before the editable area.
editor.ui.getEditableElement().parentElement.insertBefore(
editor.ui.view.toolbar.element,
editor.ui.getEditableElement()
);
},
现在好了，你几乎已经完成了最后一个神奇的事情。 在您下载的文件中，转到 /build 文件夹并将所有文件 COPY 到 "node_modules@ckeditor\ckeditor5-build-decoupled-document\build" 并覆盖初始解耦文档。这是要做的关键事情，即使听起来很可怕。
奖励：我还想上传图片，所以添加到配置中
**ckfinder: {
uploadUrl: 'http://mypage/api/uploadckeditor'
},**
这是 php 端的实现，它只是基本的，没有错误处理
$uploaddir = '../www/adminUpload/';
$uploadfile = $uploaddir . basename($_FILES['upload']['name']);
if (move_uploaded_file($_FILES['upload']['tmp_name'], $uploadfile)) {
//$this->sendJson(array("message"=>"sucess"));
} else {
//$this->sendJson(array("message"=>"failed"));
}
$returnArray = array();
$returnArray["uploaded"] = true;
$returnArray["url"] = "http://www.mypage.com/adminUpload/".$_FILES['upload']['name'];
header('Content-type: application/json');
$this->sendJson($returnArray);
$this->terminate();
对于最后 2 行，它们是特定于 Nette php 框架的，只需发送 $returnArray 作为 json 响应。
【讨论】：
这是我将 CKEDITOR 与 Vue3.js 集成的方式
安装所需的包
npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic
main.ts
import CKEditor from '@ckeditor/ckeditor5-vue'
const app = createApp(App)
app.use( CKEditor ).mount('#app')
然后在你想要使用 ckeditor 的组件中
<template>
<ckeditor :editor="editor" v-model="data.description"></ckeditor>
</template>
<script>
import {onMounted, reactive, computed} from "vue"
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
export default{
name:'Add',
setup() {
//....
const data = reactive({
description: '',
})
return {
data,
editor: ClassicEditor
}
}
}
</script>
enter code here
我在 ckeditor5-build-classic 中上传图片时遇到问题，
对于图片上传，我使用的是 Node.js 服务器和 S3，这是从 Node.js 服务器返回 json 响应的方式，uploaded 标志更重要：
exports.upload_file_ckeditor = async(req, res) => {
let obj = {
"uploaded" : true,
"url" : 'http://example.com/upload/xyz.png'
}
return res.send(obj)
}
【讨论】：