CKEditor 5是一组随时可用的富文本编辑器，使用强大的框架创建，使您能够创建任何类型的文本编辑解决方案，并在其中包含实时协作编辑。将此标记用于任何与CKEditor 5相关的问题。有关CKEditor 4的问题，请使用“ckeditor4.x”标签。
CKeditor 自定义上传器，PHP 原生，“无法上传文件：download.jpeg。”
我正在使用 PHP、JS，目前正在尝试使用 CKEditor 5 的 Build 版本。目前，我被图像上传困住了。我必须用 JavaScript 开发自己的上传器。 这是 Java...
在CKEditor5中调用writer.setAttribute()时如何避免属性操作属性存在？
我正在开发一个简单的CKEditor5插件。 该插件的一部分是一个“命令”，其执行方式如下： 执行（选项）{ const contentItemUtils = this.editor.plugins.get('
我正在使用 django-ckeditor，由于支持结束而升级到 ckeditor-5，但我在前端看不到它。在管理面板中正常工作 管理面板： 前端： 形式.py： 班级
JBOSS 在响应标头中附加 charset=ISO-8859-1
JBOSS v7.4 将 charset=ISO-8859-1 附加到我的 js 文件中，因为浏览器对于具有特殊字符的文件会抛出“意外标记”错误。 相同的文件在 Weblogic 上正确加载并且......
是否可以在当前选择的编辑器中插入文本？ 我努力了 从 '@ckeditor/ckeditor5-engine/src/model/text' 导入文本； 函数插入文本() { 让文本=新文本（'测试...
Ckeditor 5 和 ASP.NET MVC 捆绑错误出现 NullReferenceException？
为了隔离任何问题以便重现该问题，我在 VS 2017 中使用 ASP.NET MVC 模板（.NET Framework 4.6.1）开始了一个全新的项目。 我将最新的ckeditor5添加到/Scripts/
我在我的项目中实现了 De CoupledEditor CKEditor 5： 解耦编辑...
为什么特殊字符列表和源代码编辑按钮在官方 CKEditor 5 版本中不起作用？
我根据官网De Coupled文档构建了CKEditor 5：https://ckeditor.com/ckeditor-5/online-builder/ 但有 2 个按钮在此版本中不起作用：特殊字符（空...
ckEditor 5 字体和 Ident 依赖项/模块包含内联样式并违反我的 CSP
我使用 CKEditor 5 进行自定义构建，将字体和缩进模块包含到 github 上存在的基本构建中。我的 Web 环境 CSP 不允许任何内联样式或 javascript。 ...
需要帮助在 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 组件教程，但是修改了...