CKEditor 5是一组随时可用的富文本编辑器，使用强大的框架创建，使您能够创建任何类型的文本编辑解决方案，并在其中包含实时协作编辑。将此标记用于任何与CKEditor 5相关的问题。有关CKEditor 4的问题，请使用“ckeditor4.x”标签。
需要帮助在 MERN 堆栈应用程序中通过 CKEditor5 上传图像
我之前见过几个人问这个问题，但没有人遇到我的问题。 我已经在我的网络应用程序中使用 CKEditor 一段时间了，没有出现任何问题，但我最近注意到图像上传不...
我正在使用 @ckeditor/[email protected] 的自定义版本 标题：{ 选项： [ { 模型 : 'inlineParagraph', 查看...
Ckeditor5 - 从 Office (Word) 复制和粘贴不适用于列表
我正在尝试在我的网站中实现Ckeditor5，我想让用户从word复制和粘贴，但列表不能完全工作。 当我复制这个 1.Dfgdfgdfg dfgdfgdfgdf 2.Dfgdfgdfg
将 CKEditor 5 与 React 结合使用。我正在寻找更好的解决方案来限制编辑器的高度。默认情况下，它似乎设置了高度以适合编辑器中的内容。在我的应用程序中，
如何删除TYPO3 12 CKEditor 5中的对齐选项？
如何在您自己的预设中排除某些对齐选项？ 虽然我没有指定“right”和“justify”，但它们仍然显示： 进口： - {资源：'EXT：rte_ckedi...
CKEditor5：Django 中的图像上传问题 (django-ckeditor-5)
我在将 CKEditor5 集成到 Django 项目时遇到问题。具体来说，图像上传功能无法正常工作。当我尝试上传图像时，我收到一条警报...
在Angular 17中，我无法将CKeditor集成到项目中。在我想使用的组件中： "message": "组件'CKEditorComponent'出现在'imports'中，但不是独立的......
如何在我的 Vue 应用程序中集成自定义 bulid CKEditor 5
我已经从 CKEditor 5 Online Builder 进行了自定义构建并下载了它，但它是在 Webpack 中构建的，我在 Vue 3 项目中使用 Vite。 我试过下面的代码： 导入CKEd...</desc> <question vote="0"> <p>我已经从 <a href="https://ckeditor.com/ckeditor-5/online-builder/" rel="nofollow noreferrer">CKEditor 5 Online Builder</a> 进行了自定义构建并下载了它，但它是在 Webpack 中构建的，我在 Vue 3 项目中使用 Vite。</p> <p>我尝试过以下代码：</p> <pre><code><script setup> import CKEditor from "@/ckeditor5-custom-build/build/ckeditor" import { component as ckeditor } from "@ckeditor/ckeditor5-vue"; const editor = ref(CKEditor); const editorData = ref(""); const editorConfig = ref({}); </script> <template> <ckeditor :editor="editor" :config="editorConfig" v-model="editorData"></ckeditor> </template> </code></pre> <p>我遇到以下错误：</p> <blockquote> <p>找不到模块：错误：无法解析“ckeditor5-custom-build/build/ckeditor”</p> </blockquote> </question> <answer tick="false" vote="0"> <p>从<a href="https://ckeditor.com/ckeditor-5/online-builder/" rel="nofollow noreferrer">CKEditor 5 Online Builder</a>下载构建zip文件后。解压 zip 并转到文件夹打开 package.json 文件</p> <pre><code>{ ... "dependencies": { "@ckeditor/ckeditor5-alignment": "41.2.1", "@ckeditor/ckeditor5-autoformat": "41.2.1", "@ckeditor/ckeditor5-basic-styles": "41.2.1", "@ckeditor/ckeditor5-block-quote": "41.2.1", "@ckeditor/ckeditor5-cloud-services": "41.2.1", "@ckeditor/ckeditor5-editor-classic": "41.2.1", "@ckeditor/ckeditor5-essentials": "41.2.1", "@ckeditor/ckeditor5-font": "41.2.1", "@ckeditor/ckeditor5-heading": "41.2.1", "@ckeditor/ckeditor5-image": "41.2.1", "@ckeditor/ckeditor5-indent": "41.2.1", "@ckeditor/ckeditor5-link": "41.2.1", "@ckeditor/ckeditor5-list": "41.2.1", "@ckeditor/ckeditor5-media-embed": "41.2.1", "@ckeditor/ckeditor5-paragraph": "41.2.1", "@ckeditor/ckeditor5-paste-from-office": "41.2.1", "@ckeditor/ckeditor5-table": "41.2.1", "@ckeditor/ckeditor5-typing": "41.2.1", "@ckeditor/ckeditor5-undo": "41.2.1", "@ckeditor/ckeditor5-upload": "41.2.1" }, ... } </code></pre> <p>从 package.json 文件中复制除 devDependency 之外的所有依赖项，并将其粘贴到项目 package.json 文件中，然后运行 <pre><code>npm i</code></pre> 命令</p> <p>转到解压文件夹中的 <pre><code>src</code></pre> 子文件夹并打开 <pre><code>ckeditor.ts</code></pre> 文件</p> <p></p><div data-babel="false" data-lang="js" data-hide="true" data-console="false"> <div> <pre><code>/** * @license Copyright (c) 2014-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic'; import { Alignment } from '@ckeditor/ckeditor5-alignment'; import { Autoformat } from '@ckeditor/ckeditor5-autoformat'; import { Bold, Italic, Strikethrough, Underline } from '@ckeditor/ckeditor5-basic-styles'; import { BlockQuote } from '@ckeditor/ckeditor5-block-quote'; import { CloudServices } from '@ckeditor/ckeditor5-cloud-services'; import type { EditorConfig } from '@ckeditor/ckeditor5-core'; import { Essentials } from '@ckeditor/ckeditor5-essentials'; import { FontBackgroundColor, FontColor, FontFamily, FontSize } from '@ckeditor/ckeditor5-font'; import { Heading } from '@ckeditor/ckeditor5-heading'; import { AutoImage, Image, ImageCaption, ImageInsert, ImageResize, ImageStyle, ImageToolbar, ImageUpload } from '@ckeditor/ckeditor5-image'; import { Indent } from '@ckeditor/ckeditor5-indent'; import { AutoLink, Link, LinkImage } from '@ckeditor/ckeditor5-link'; import { List, ListProperties } from '@ckeditor/ckeditor5-list'; import { MediaEmbed } from '@ckeditor/ckeditor5-media-embed'; import { Paragraph } from '@ckeditor/ckeditor5-paragraph'; import { PasteFromOffice } from '@ckeditor/ckeditor5-paste-from-office'; import { Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar } from '@ckeditor/ckeditor5-table'; import { TextTransformation } from '@ckeditor/ckeditor5-typing'; import { Undo } from '@ckeditor/ckeditor5-undo'; import { Base64UploadAdapter } from '@ckeditor/ckeditor5-upload'; // You can read more about extending the build with additional plugins in the "Installing plugins" guide. // See https://ckeditor.com/docs/ckeditor5/latest/installation/plugins/installing-plugins.html for details. class Editor extends ClassicEditor { public static override builtinPlugins = [ Alignment, AutoImage, AutoLink, Autoformat, Base64UploadAdapter, BlockQuote, Bold, CloudServices, Essentials, FontBackgroundColor, FontColor, FontFamily, FontSize, Heading, Image, ImageCaption, ImageInsert, ImageResize, ImageStyle, ImageToolbar, ImageUpload, Indent, Italic, Link, LinkImage, List, ListProperties, MediaEmbed, Paragraph, PasteFromOffice, Strikethrough, Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar, TextTransformation, Underline, Undo ]; public static override defaultConfig: EditorConfig = { toolbar: { items: [ 'heading', '|', 'bold', 'italic', 'underline', 'alignment', '|', 'link', 'strikethrough', 'bulletedList', 'numberedList', '|', 'outdent', 'indent', '|', 'fontSize', 'fontFamily', '|', 'fontBackgroundColor', 'fontColor', '|', 'imageUpload', '|', 'undo', 'redo' ] }, language: 'en', image: { toolbar: [ 'imageTextAlternative', 'toggleImageCaption', 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', 'linkImage' ] }, table: { contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells', 'tableCellProperties', 'tableProperties' ] } }; } export default Editor;</code></pre> </div> </div> <p></p> <p>从<pre><code>ckeditor.ts</code></pre>文件中复制所有导入语句</p> <p>创建名为 <pre><code>Editor.vue</code></pre> 的新 Vue 文件并粘贴导入语句</p> <p>编辑器.vue</p> <pre><code><script setup> import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic'; import { Alignment } from '@ckeditor/ckeditor5-alignment'; import { Autoformat } from '@ckeditor/ckeditor5-autoformat'; import { Bold, Italic, Strikethrough, Underline } from '@ckeditor/ckeditor5-basic-styles'; import { BlockQuote } from '@ckeditor/ckeditor5-block-quote'; import { CloudServices } from '@ckeditor/ckeditor5-cloud-services'; import type { EditorConfig } from '@ckeditor/ckeditor5-core'; import { Essentials } from '@ckeditor/ckeditor5-essentials'; import { FontBackgroundColor, FontColor, FontFamily, FontSize } from '@ckeditor/ckeditor5-font'; import { Heading } from '@ckeditor/ckeditor5-heading'; import { AutoImage, Image, ImageCaption, ImageInsert, ImageResize, ImageStyle, ImageToolbar, ImageUpload } from '@ckeditor/ckeditor5-image'; import { Indent } from '@ckeditor/ckeditor5-indent'; import { AutoLink, Link, LinkImage } from '@ckeditor/ckeditor5-link'; import { List, ListProperties } from '@ckeditor/ckeditor5-list'; import { MediaEmbed } from '@ckeditor/ckeditor5-media-embed'; import { Paragraph } from '@ckeditor/ckeditor5-paragraph'; import { PasteFromOffice } from '@ckeditor/ckeditor5-paste-from-office'; import { Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar } from '@ckeditor/ckeditor5-table'; import { TextTransformation } from '@ckeditor/ckeditor5-typing'; import { Undo } from '@ckeditor/ckeditor5-undo'; import { Base64UploadAdapter } from '@ckeditor/ckeditor5-upload'; <script> </code></pre> <p>安装<pre><code>@ckeditor/ckeditor5-vue</code></pre>包并导入它</p> <pre><code><script setup> import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic'; ... ... ... import { component as ckeditor } from "@ckeditor/ckeditor5-vue"; /** <-- Here like this **/ const editor = ref(ClassicEditor); const editorData = defineModel(); const editorConfig = ref({ plugins: [] }) <script> <template> <ckeditor :editor="editor" :config="editorConfig" v-model="editorData"></ckeditor> </template> </code></pre> <p>打开<pre><code>ckeditor.ts</code></pre>并复制builtinPlugins数组中的所有元素</p> <pre><code>... class Editor extends ClassicEditor { public static override builtinPlugins = [ Alignment, AutoImage, AutoLink, Autoformat, Base64UploadAdapter, BlockQuote, Bold, CloudServices, Essentials, FontBackgroundColor, FontColor, FontFamily, FontSize, Heading, Image, ImageCaption, ImageInsert, ImageResize, ImageStyle, ImageToolbar, ImageUpload, Indent, Italic, Link, LinkImage, List, ListProperties, MediaEmbed, Paragraph, PasteFromOffice, Strikethrough, Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar, TextTransformation, Underline, Undo ]; ... </code></pre> <p>返回 Editor.vue 文件并将其粘贴到 <pre><code>editorConfig</code></pre> 变量插件属性</p> <pre><code>... const editor = ref(ClassicEditor); const editorData = defineModel(); const editorConfig = ref({ plugins: [ Alignment, AutoImage, AutoLink, Autoformat, Base64UploadAdapter, BlockQuote, Bold, CloudServices, Essentials, FontBackgroundColor, FontColor, FontFamily, FontSize, Heading, Image, ImageCaption, ImageInsert, ImageResize, ImageStyle, ImageToolbar, ImageUpload, Indent, Italic, Link, LinkImage, List, ListProperties, MediaEmbed, Paragraph, Strikethrough, Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar, TextTransformation, Underline, Undo ], }); ... </code></pre> <p>打开 ckeditor.ts 并复制具有值的所有属性 <pre><code>defaultConfig</code></pre> 并将其粘贴到 Editor.vue</p> <pre><code><script setup> import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic'; import { Alignment } from '@ckeditor/ckeditor5-alignment'; import { Autoformat } from '@ckeditor/ckeditor5-autoformat'; import { Bold, Italic, Strikethrough, Underline } from '@ckeditor/ckeditor5-basic-styles'; import { BlockQuote } from '@ckeditor/ckeditor5-block-quote'; import { CloudServices } from '@ckeditor/ckeditor5-cloud-services'; import { Essentials } from '@ckeditor/ckeditor5-essentials'; import { FontBackgroundColor, FontColor, FontFamily, FontSize } from '@ckeditor/ckeditor5-font'; import { Heading } from '@ckeditor/ckeditor5-heading'; import { AutoImage, Image, ImageCaption, ImageInsert, ImageResize, ImageStyle, ImageToolbar, ImageUpload } from '@ckeditor/ckeditor5-image'; import { Indent } from '@ckeditor/ckeditor5-indent'; import { AutoLink, Link, LinkImage } from '@ckeditor/ckeditor5-link'; import { List, ListProperties } from '@ckeditor/ckeditor5-list'; import { MediaEmbed } from '@ckeditor/ckeditor5-media-embed'; import { Paragraph } from '@ckeditor/ckeditor5-paragraph'; import { Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar } from '@ckeditor/ckeditor5-table'; import { TextTransformation } from '@ckeditor/ckeditor5-typing'; import { Undo } from '@ckeditor/ckeditor5-undo'; import { Base64UploadAdapter } from '@ckeditor/ckeditor5-upload'; import { component as ckeditor } from "@ckeditor/ckeditor5-vue"; const editor = ref(ClassicEditor); const editorData = defineModel(); const editorConfig = ref({ plugins: [ Alignment, AutoImage, AutoLink, Autoformat, Base64UploadAdapter, BlockQuote, Bold, CloudServices, Essentials, FontBackgroundColor, FontColor, FontFamily, FontSize, Heading, Image, ImageCaption, ImageInsert, ImageResize, ImageStyle, ImageToolbar, ImageUpload, Indent, Italic, Link, LinkImage, List, ListProperties, MediaEmbed, Paragraph, Strikethrough, Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar, TextTransformation, Underline, Undo ], toolbar: { items: [ 'heading', '|', 'bold', 'italic', 'underline', 'alignment', '|', 'link', 'strikethrough', 'bulletedList', 'numberedList', '|', 'outdent', 'indent', '|', 'fontSize', 'fontFamily', '|', 'fontBackgroundColor', 'fontColor', '|', 'imageUpload', '|', 'undo', 'redo' ] }, language: 'en', image: { toolbar: [ 'imageTextAlternative', 'toggleImageCaption', 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', 'linkImage' ] }, table: { contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells', 'tableCellProperties', 'tableProperties' ] }, heading: { options: [ { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' }, { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' }, { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }, { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' }, { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' }, { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' }, { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' } ] } }); </script> <template> <ckeditor :editor="editor" :config="editorConfig" v-model="editorData"></ckeditor> </template> </code></pre> <p>现在将编辑器组件导入项目中的任何位置</p> <pre><code><script setup> import { ref } from "vue"; import Editor from '@/components/Editor'; const description = ref(""); <script> <template> <Editor v-model="description"/> <template> </code></pre> </answer> </body></html>
我已经成功地使用我自己的插件向 CKEditor 添加了一个 span 元素。这可以正常工作，并且该元素可以放置在任何其他元素中。 问题是：插入时...
我正在尝试创建一个TYPO3扩展，将分页符功能添加到TYPO3 v12中的ckeditor5中。 我的扩展具有以下结构： rte_ckeditor_pagebreak/配置/JavaScriptModu...
CKEditor5+React：如何更新内联小部件表示的节点？
我们正在尝试在 CKEditor5 中使用内联 React 组件小部件。我们已经让它渲染，但现在不确定如何更新模型节点。我们遵循了 React 组件教程，但是修改了...
Angular 17 独立应用程序集成 CKEditor 5 -- 错误：窗口未定义
我的 Angular（版本 17.1.2 和独立版本）应用程序无法集成 CKEditor。 我已按照此处的分步指南进行操作。 错误： [vite] 内部服务器错误：窗口未定义 在 r (d:/研究/
我试图测试我的项目，该项目配置了vite（Typescript）。我用的是玩笑。该项目使用ckeditor。测试时显示以下错误； [！[在此处输入图像描述][1...
yarn 安装本地 npm 包，以便本地包使用主项目的 node_modules（ckeditor-duplicate-modules 错误）
在我的 MainProject 中，我尝试安装使用 ckeditor5 包生成器创建的 ckeditor-5 插件 PeteCkPlugin 的本地版本。 我尝试在本地 PeteCkPlugin 根目录中使用纱线链接...
我在我的项目中集成了CKEditor5编辑器来制作电子邮件模板。下面是我的 CKEditor 代码： 我在我的项目中集成了CKEditor5编辑器来制作电子邮件模板。以下是我的 CKEditor 代码： <CKEditor editor={ ClassicEditor } config={ { toolbar: [ 'heading', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote' , 'fontColor' , 'fontBackgroundColor' , 'code', 'uploadImage'], ckfinder:{ uploadUrl:'upload url' }} } data={template} onReady={ editor => { // You can store the "editor" and use when it is needed. //console.log( 'Editor is ready to use!', editor ); } } onChange={ ( event, editor ) => { const data = editor.getData(); console.log(data) setTemplate(data) } } /> 当我使用 CKEditor 在数据库中存储图像时，CKEditor 代码如下所示： <figure class="image image_resized" style="width:2.82%;"><img src="https://www.w3schools.com/html/pic_trulli.jpg"></figure><p> welcome to {{first_name}}</p> 我的模板是这样的： 我在 CKEditor 中设计了如下图所示的样式，但图像大小调整未出现在我的模板中： 问题是当使用像这样的图形标签时它可以工作： <figure> <img src="pic_trulli.jpg" alt="Trulli" style="width:10%"> <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption> </figure> 但是在 CKEditor 中会自动生成这样的代码： <figure style="width:20%;"> <img src="https://www.w3schools.com/html/pic_trulli.jpg"> <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption> </figure> 看这个，我猜你需要将图形标签显示更改为阻止。 <html> <head> <style> figure { display: block; } </style> </head> <body> <p>A figure element is displayed like this:</p> <figure> <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="2%" > </figure> <p>Change the default CSS settings to see the effect.</p> </body> </html> 你找到解决办法了吗？我也有同样的问题 我通过ckeditor5插入图像，它变成了200像素，但是ckeditor生成了这个代码 <figure class="image image_resized" style="width:200px;"> <img style="aspect-ratio:1280/720;" src="data:image/jpeg;base64 etc etc.." width="1280" height="720"> </figure> 浏览器尊重 img 标签的宽度
django-ckeditor-5 无法在本地上传文件并且不显示 youtube 链接的预览
我使用 django-ckeditor-5 包成功显示了 ckeditor5，但无法上传图像，并且无法在结果页面上显示 youtube 视频。 这是我在后端控制台上遇到的错误...
我使用 django-ckeditor-5 包成功显示了 ckeditor5，但无法上传图像，并且无法在结果页面上显示 youtube 视频。 这是我在后端控制台上遇到的错误...
我在React应用程序中使用自定义构建ckeditor5。想要自定义标题。如何为此创建反应类。或者我们可以直接在自定义标题中注入样式吗？ 无法...
我无法在 django-ckeditor-5 中使用完整工具栏 在 ckeditor-4 中使用： CKEDITOR_CONFIGS = { '默认'： { '工具栏': '完整', }, } 但在5版本中，这个方法不起作用 请帮我
当我调整图像大小并向右对齐时，它会生成： 当我仅输出此 Html 代码时，调整大小和对齐不起作用。 我正在打印生成的 html 代码，如下所示： 回声$