CKEditor 5是一组随时可用的富文本编辑器，使用强大的框架创建，使您能够创建任何类型的文本编辑解决方案，并在其中包含实时协作编辑。将此标记用于任何与CKEditor 5相关的问题。有关CKEditor 4的问题，请使用“ckeditor4.x”标签。
我正在慢慢地从ckeditor4迁移到ckeditor5，但它要复杂得多。 为了节省时间，我有专门的按钮来插入非常具体的图像，因此尝试将它们移至 ckeditor5。怎么...
我想知道如何在 CKEditor 5 配置中添加换行符。 阅读文档后，我没有看到任何帮助。 按照文档示例，预期结果将显示...
Django - CKEditor5Field 字段默认字体颜色
我的一个模型中有 2 个 CKEditor5Fields。 我在管理面板中遇到一个问题，当浏览器处于深色模式时，该字段的背景颜色保持白色并且字体 c...
我正在我的 Angular 项目中集成 CKEditor 的自定义构建并使用它的试用版本。 我能够初始化编辑器并能够在工具栏上显示所有自定义工具栏项，因为我们...
如何使 hcard.js 与 Angular 2 和 CKEditor 5 一起使用
到目前为止，我一直使用 CKEditor 4 及其拖放联系人解决方案。效果很好。现在我已将 CKEditor 5 添加到我的 Angular 2+ 解决方案中。编辑器已启动并正在运行，但我不能...
CKEditor 5 自定义插件：从外部源加载的标记结构不正确
我正在将自定义插件从 v4 迁移到 v5。这是一个相当陡峭的学习曲线，而且我仍然不太精通这些东西。看起来我现在在创建内容时几乎可以正常工作了...
如何使用用户脚本在 CKEditor 5（或其他富文本编辑器）编辑器中插入文本
因此，我尝试在 Tampermonkey 中创建一个自动完成脚本，它将通过下拉列表提供建议，以写入 Zendesk 中的作曲家（CKEditor 5 实现）。 我得到了每...
我有内联CKeditor 让全局编辑器； InlineEditor.create(document.querySelector("#textarea"), { 工具栏：{ items: ['标题', '|', '粗体', '斜体', '链接', 'bulletedLi...
我在使用 CKEditor 中的插件时遇到问题。我想使用表格插件，例如 Table、TableCellProperties、TableProperties、TableToolbar，但在 config.xml 中添加它们时出现一些错误。所以这里...
我需要为 .net mvc 项目中使用的 ckeditor 使用下划线工具选项
我用了这个ckeditor cdn 当我在 js 中使用此代码通过工具栏选项创建 ckeditor 时...
如何在原生javascript环境下使用CKEditor5？
在我们的项目中，到目前为止我们已经使用了 CKEditor4 - 现在我们想迁移到 CKE5。 在我们的 index.php 文件中，我们包含了文档中描述的要求，如下所示： 索引.php： 在我们的项目中，到目前为止我们已经使用了 CKEditor4 - 现在我们想迁移到 CKE5。 在我们的 index.php 文件中，我们包含了文档中描述的要求，如下所示： index.php： <script type="importmap"> { "imports": { "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/43.2.0/ckeditor5.js", "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/43.2.0/" } } </script> <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.2.0/ckeditor5.css"> <script type="module" src="./main.js"></script> 在提供的代码示例中，他们有一个 main.js 文件，在其中导入所有必需的模块，如下所示： main.js: import { ClassicEditor, AccessibilityHelp, Autoformat, AutoImage, Autosave, BalloonToolbar, Base64UploadAdapter, BlockQuote, Bold, CloudServices, Essentials, FontBackgroundColor, FontColor, FontFamily, FontSize, Heading, Highlight, ImageBlock, ImageCaption, ImageInline, ImageInsert, ImageInsertViaUrl, ImageResize, ImageStyle, ImageTextAlternative, ImageToolbar, ImageUpload, Indent, IndentBlock, Italic, Link, LinkImage, List, ListProperties, MediaEmbed, Paragraph, PasteFromOffice, RemoveFormat, SelectAll, ShowBlocks, SourceEditing, SpecialCharacters, SpecialCharactersArrows, SpecialCharactersCurrency, SpecialCharactersEssentials, SpecialCharactersLatin, SpecialCharactersMathematical, SpecialCharactersText, Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar, TextTransformation, ...(and so forth) 在文件的底部，他们用这一行初始化编辑器： ClassicEditor.create(document.querySelector('#editor'), editorConfig); 但是，这有效： 使用这一行，我们无法像以前那样在 JS 代码的其他函数中初始化编辑器，因为所有模块都没有加载。我们该如何解决这个问题？ 我们尝试在函数中加载模块，但无法使用 import。 如果我正确理解问题，你想在你的程序中使用 ckeditor5 遗留的非模块 js 脚本。 首先我必须说，推荐的也是唯一好的实践方法是将遗留脚本重构为模块。 如果由于某种原因你不想这样做，有一个丑陋的解决方案 通过全局变量在 module 脚本和非模块脚本之间共享数据，请参阅 this SO post 在浏览器上下文中执行此操作的最简单方法是通过全局 window。 因此，模块脚本 (main.js) 可能包含如下内容： import { ClassicEditor, Essentials, Paragraph, Bold, Italic, Font } from 'ckeditor5'; window._ckEditor = { ClassicEditor, Essentials, Paragraph, Bold, Italic, Font }; 并且遗留脚本必须从 window._ckEditor 检索数据，确保 数据检索在模块运行后运行，例如通过设置 DomContentLoaded： // non-module custom code addEventListener("DOMContentLoaded", () => { const { ClassicEditor, Essentials, Paragraph, Bold, Italic, Font } = window._ckEditor; ClassicEditor .create(document.querySelector('#editor'), ...... 演示片段： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test CKEditor5</title> <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.2.0/ckeditor5.css"> </head> <script type="importmap"> { "imports": { "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/43.2.0/ckeditor5.js", "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/43.2.0/", "ClassicEditor": "./main.js" } } </script> <script type="module"> import { ClassicEditor, Essentials, Paragraph, Bold, Italic, Font } from 'ckeditor5'; window._ckEditor = { ClassicEditor, Essentials, Paragraph, Bold, Italic, Font }; </script> <script> // your custom code here addEventListener("DOMContentLoaded", () => { const { ClassicEditor, Essentials, Paragraph, Bold, Italic, Font } = window._ckEditor; ClassicEditor .create(document.querySelector('#editor'), { plugins: [Essentials, Paragraph, Bold, Italic, Font], toolbar: [ 'undo', 'redo', '|', 'bold', 'italic', '|', 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor' ] }) .then(editor => { window.editor = editor; }) .catch(error => { console.error(error); }); }); </script> <body> <div id="editor"></div> </body> </html> 或 带有单独文件的 stackblitz ； 和一个变体 避免重复导入的值，但缺点是 lint 工具可能会抱怨并在 IDE 中提供代码帮助 通常不会识别任何导入的值。
DOMPurify（在ckeditor5上下文中）-如何将（子）强标签包含在已删除（不需要的）跨度标签中？
我使用 DOMPurify 库（https://github.com/cure53/DOMPurify）来清理从 google 文档复制的 html 代码。 我想从复制的文本中删除跨度标签，但将文本保留在...
我使用 UI 创建了一个自定义构建： https://ckeditor.com/ckeditor-5/online-builder/ 下载 zip 后，如何将其作为依赖项添加到我的 Angular 项目中？ 我按照这个教程进行操作： 哈...
我注意到从编辑器中提取数据时它会过滤一些类和样式。 我想使用与编辑器使用完全相同的样式。 所以，我有两个问题需要解决。 我怎样才能
我正在使用CKeditor5和ckeditor在react中提及https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html#demo 但这个包似乎没有正确安装，并给出类似的错误...
我正在开发一个调查生成器，我让用户根据他们选择的字段添加不同的问题。对于问题字段，我想使用CKEditor。 @if($isOpen) 我正在开发一个调查生成器，让用户根据他们选择的字段添加不同的问题。对于问题字段，我想使用 CKEditor。 <div> @if($isOpen) <div class="fixed inset-0 bg-opacity-50 flex items-center justify-center"> <div class="bg-white p-4 rounded-lg w-1/2"> <h2 class="text-lg font-bold mb-4">Add {{ ucfirst($fieldType) }}</h2> <div> <label for="question" class="block mb-2">Question</label> <textarea id="question" wire:model="question" class="form-control"></textarea> </div> @if (in_array($fieldType, ['checkbox', 'radio', 'dropdown'])) <div class="mt-4"> <h3 class="text-sm font-bold">Options</h3> @foreach ($options as $index => $option) <div class="flex items-center mb-2"> <input type="text" wire:model="options.{{ $index }}" class="form-control mr-2" placeholder="Option {{ $index + 1 }}"> <button wire:click.prevent="removeOption({{ $index }})" class="bg-red-500 text-white px-2 py-1 rounded">Remove</button> </div> @endforeach <button wire:click.prevent="addOption" class="bg-blue-500 text-white px-2 py-1 rounded">Add Option</button> </div> @endif <!-- Modal Actions --> <div class="mt-4 flex justify-end"> <button wire:click.prevent="saveField" class="bg-green-500 text-white px-4 py-2 rounded">Save Field</button> <button wire:click.prevent="closeModal" class="bg-gray-500 text-white px-4 py-2 rounded ml-2">Cancel</button> </div> </div> </div> <script src="https://cdn.ckeditor.com/ckeditor5/37.0.1/classic/ckeditor.js"></script> <script> ClassicEditor .create(document.querySelector('#question')) .catch(error => { console.error(error); }); </script> @endif </div> 添加字段的代码： <div class="field-options w-1/4 bg-gray-100 p-4 rounded-lg space-y-4"> <button wire:click.prevent="addField('textfield')" class="w-full py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600">Textfield</button> <button wire:click.prevent="addField('textbox')" class="w-full py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600">Textbox</button> <button wire:click.prevent="addField('checkbox')" class="w-full py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600">Checkbox</button> <button wire:click.prevent="addField('radio')" class="w-full py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600">Radio Buttons</button> <button wire:click.prevent="addField('dropdown')" class="w-full py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600">Drop Down</button> <button wire:click.prevent="addField('file')" class="w-full py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600">Image/File Slot</button> </div> 方法： public function addField($type) { $this->dispatch('openModal', $type); } 听众： protected $listeners = ['openModal' => 'open']; public function open($fieldType) { $this->reset(); $this->fieldType = $fieldType; $this->isOpen = true; } 问题 我遇到的问题是模式显示一个简单的文本区域而不是 CKEditor。但是，当我从项目中删除 if 语句时，它会正确显示。我尝试了不同的解决方案，但似乎没有任何效果。 当我单击“添加”时，我希望它显示带有 CKEditor 的模式。 Livewire 在服务器端呈现 HTML。最初，当页面加载时，CKEditor 不会显示。但是，当您打开模式时，Livewire 会重新渲染 Blade 模板，但 JavaScript 不会重新初始化。 这解释了为什么删除 if 语句可以解决问题：初始服务器端渲染会触发 JavaScript，后续重新渲染不会干扰它。 要解决此问题，请考虑使用 Alpine.js 初始化 CKEditor，而不是依赖当前的 JavaScript 解决方案。 Livewire 将识别新渲染的 HTML 中的 Alpine 组件，并相应地重新初始化 Alpine.js。 仅供参考，我使用人工智能重新写了这个答案，因为英语不是我的主要语言
我在 Django 项目中使用 django-ckeditor-5 这些是我在 settings.py 中的 ckeditor 设置 CKEDITOR_5_CONFIGS = { “延伸”：{ '块工具栏': [ '段落'，'标题1'，'他...
TYPO3 v12 捆绑 CKEditor v5，我们的客户报告在 TYPO3 v11 / CKEditor v4 中删除的内联样式不再从内容中删除。 例如，我们看到如下内容： TYPO3 v12 捆绑 CKEditor v5 和我们的客户报告在 TYPO3 v11 / CKEditor v4 中删除的内联样式不再从内容中删除。 例如，我们看到的内容如下： <span style="background-color;transparent;color:#000000;font-family:'Open Sans',sans-serif;font-size:11pt;font-style:normal;font-variant:normal;font-weight:400;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">...</span> 我认为安装 Paste From Office 插件可以解决这个问题。虽然我可以找到有关 在 TYPO3 中构建并包含我自己的插件的文档，但我不知道如何包含标准的 CKEditor 插件。 我尝试将插件添加到我的站点包的Configuration/RTE/Default.yaml，但似乎还不够。 editor: config: # ... importModules: - { module: '@ckeditor/ckeditor5-paste-from-office', exports: ['PasteFromOffice'] } 我需要使用 npm 在某个地方下载插件吗？我需要添加一些内容到 Configuration/JavaScriptModules.php 才能加载吗？ 或者有没有更好的方法来自动清理粘贴的内容以删除内联样式？ 在 v11 中您可能使用了“disallowedContent”。对于 v5，您需要迁移此 https://ckeditor.com/docs/ckeditor5/latest/features/html/general-html-support.html - 请参阅“htmlSupport”选项。这可能根本不允许使用 span.style（如果可以的话）。 实现第三方ckeditor插件可以这样完成： https://docs.typo3.org/c/typo3/cms-core/main/en-us/Changelog/12.0/Breaking-96874-CKEditor-latedPluginsAndConfiguration.html https://www.derhansen.de/2023/05/2023-05-05-create-a-custom-ckeditor5-plugin-for-typo3-12.html
我想用按钮添加一个链接到编辑器中。这在过去有效，但现在不再有效，即使我使用的是固定版本的 ckeditor，因此 npm 不会更新它。 我正在使用 v5.16 让c...
作为如何使用 TYPO3 调整 ckeditor5 文件的示例，我想用我自己的字形扩展特殊字符插件（它在供应商文件中工作，但更新后会丢失......