CKEditor 5是一组随时可用的富文本编辑器，使用强大的框架创建，使您能够创建任何类型的文本编辑解决方案，并在其中包含实时协作编辑。将此标记用于任何与CKEditor 5相关的问题。有关CKEditor 4的问题，请使用“ckeditor4.x”标签。
我在使用 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 文件的示例，我想用我自己的字形扩展特殊字符插件（它在供应商文件中工作，但更新后会丢失......
我正在尝试创建一个自定义插件来插入来自我已构建的媒体浏览器的图像。我想为图像附加一些属性。无论我尝试什么，它都只会插入带有...
我最近遇到了以下问题，我将 ckeditor5 库更新到最新版本，现在尝试使用 Jest 运行测试时出现错误 console.error 错误：无法解析...
为什么 CKEditor5 将图像包装在 <span> 中，呈现为“HTML 对象”块？
我正在将应用程序从使用 CKEditor 4 更新到 5（我知道，太晚了）。 为什么 CKEditor5 将我的图像包裹在 span 标签中？我没有使用任何图像插件，图像是
对不起，我的英语不好。 有这么一段代码： 对不起，我的英语不好。 有这么一段代码： <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.1.0/ckeditor5.css" /> <body> <div id="addtext">button</div> <div id="inform"> <div class="editor"> <p>Hello from CKEditor 5!</p> </div> </div> </body> <script type="importmap"> { "imports": { "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/43.1.0/ckeditor5.js", "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/43.1.0/" } } </script> <script type="module"> import { ClassicEditor, Essentials, Bold, Italic, Font, Paragraph } from 'ckeditor5'; // При загрузки страницы ClassicEditor .create(document.querySelector('.editor'), { plugins: [Essentials, Bold, Italic, Font, Paragraph], toolbar: [ 'undo', 'redo', '|', 'bold', 'italic', ] }) .then( /* ... */) .catch( /* ... */); $("#addtext").on("click", function () { var a = $('.editor').html(); alert (a); }) </script> 我更改了ckeditor5表单中的文本并单击addtext，结果，我在警报中得到了旧文本。如何在 ckeditor5 表单中获取新文本？ 在此输入图片描述 我需要动态更改文本。 只需使用 CKEditor API editor.getData() let editor; ClassicEditor .create(document.querySelector('.editor'), { plugins: [Essentials, Bold, Italic, Font, Paragraph], toolbar: [ 'undo', 'redo', '|', 'bold', 'italic', ] }) .then(newEditor => { editor = newEditor; }) .catch( /* ... */); $("#addtext").on("click", function () { var a = editor.getData(); alert (a); })
CKEditor5 是 TYPO3 12 的标准编辑器，它带来了很多看起来很有前途的功能。不幸的是，也有一些我无法接受的回稿......
我试图在CKEDITOR5上添加锚点，但是当我退出文本源模式时，编辑器会自动删除“id”属性，我试图为ckeditor5找到一个锚点插件，但我什么也没找到...
我正在尝试在我的角度应用程序中使用ckeditor 5。我已经安装了受人尊敬的库并使用了。但默认的ckeditor5只显示有限的工具。所以我尝试使用
CKEditor5 未显示动态生成的 WTForms 表单字段
使用CKEditor5、WTForms、Flask。 --我知道这个问题看起来像是重复的，但请听我说完！ 如果您认为我应该删除并重新发布作为对我原来问题的评论，请告诉我。 巴克...