ckeditor5 相关问题

使用 Craft CMS 中的 CKEditor 配置选项将服装类添加到列表中

我在 Craft CMS 中使用 CKEditor，想要将自定义类添加到 （无序列表）和 （有序列表）。虽然我已经能够成功地将自定义类添加到其他 elem... 我在 Craft CMS 中使用 CKEditor，想要将自定义类添加到 <ul>（无序列表）和 <ol>（有序列表）。虽然我已经能够成功地将自定义类添加到 CKEditor 中的其他元素，但我很难将相同的逻辑应用于列表元素。 尽管知道可以自定义 CKEditor 的行为，但我无法弄清楚将自定义类动态附加到编辑器以及编辑器中的元素的确切实现。我的目标是确保每当在 CKEditor 中创建或编辑列表时，它都会自动接收其各自的自定义类。 最后我希望我的 HTML 代码看起来像这样： <ul class="class-ul"> <li>entry 1</li> <li>entry 2</li> <li>entry 3</li> </ul> 我已经尝试过这样的事情： "list":{ "options":[ { "model": "bulleted", "title": "Bulleted List", "view": { "attributes": { "id": "list-bulleted-0" }, "classes": [ "list-bulleted" ], "name": "ul" } } ]} 我知道这段代码行不通，但我尝试了任何围绕它的方法也没有成功。也许其他人也有和我一样的问题。 我可以通过使用 Twig 的替换过滤器简单地重写输出来实现此目的，如下所示： {% if richText %} {{ richText|replace({ '<dl>': '<ul class="my-dl-styles">', '<ol>': '<ol class="my-ol-styles">', '<ul>': '<ul class="my-ul-styles">' }) }} {% endif %}

如何在 Strapi 5 中更改 CKEditor 5 的默认文本颜色？

我按照 https://market.strapi.io/plugins/@ckeditor-strapi-plugin-ckeditor 的文档并在我的 Strapi 项目中实现了 CKEditor，但文本是白色的。我怎样才能把它变成黑色？

CKEditor 5工具栏固定位置

当您在 CKEditor 5 classic 中添加长内容时，滚动时工具栏会固定在浏览器窗口的顶部。 但我有一个固定位置的白色徽标区域，其下方有一个菜单栏...

hook.js：608错误跟踪OPENED_MTCT_EDITOR TypeError：无法读取未定义的属性（读取“track”）

我想在ckeditor中使用wiris mattype。在这种情况下，数学类型符号在 ckeditor 工具栏中可见。但是当我尝试使用模态在编辑器中输入公式时，我输入的公式...

ckeditor5 通过插件为插入的图像添加宽度

我正在慢慢地从ckeditor4迁移到ckeditor5，但它要复杂得多。 为了节省时间，我有专门的按钮来插入非常具体的图像，因此尝试将它们移至 ckeditor5。怎么...

如何在CKEditor占位符中添加换行符？

我想知道如何在 CKEditor 5 配置中添加换行符。 阅读文档后，我没有看到任何帮助。 按照文档示例，预期结果将显示...

Django - CKEditor5Field 字段默认字体颜色

我的一个模型中有 2 个 CKEditor5Fields。 我在管理面板中遇到一个问题，当浏览器处于深色模式时，该字段的背景颜色保持白色并且字体 c...

CKEditor编辑框无法输入

我正在我的 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 5中获取突出显示/选定的文本

我有内联CKeditor 让全局编辑器； InlineEditor.create(document.querySelector("#textarea"), { 工具栏：{ items: ['标题', '|', '粗体', '斜体', '链接', 'bulletedLi...

CKEditor 中的插件出现问题

我在使用 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 代码。 我想从复制的文本中删除跨度标签，但将文本保留在...

如何导入（或添加为依赖项）CKEditor 5 自定义构建

我使用 UI 创建了一个自定义构建： https://ckeditor.com/ckeditor-5/online-builder/ 下载 zip 后，如何将其作为依赖项添加到我的 Angular 项目中？ 我按照这个教程进行操作： 哈...

ckeditor 5 禁用内容过滤

我注意到从编辑器中提取数据时它会过滤一些类和样式。 我想使用与编辑器使用完全相同的样式。 所以，我有两个问题需要解决。 我怎样才能

ckeditor 提到未正确安装且无法工作

我正在使用CKeditor5和ckeditor在react中提及https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html#demo 但这个包似乎没有正确安装，并给出类似的错误...

CKEditor 未使用 Livewire 在模态中显示

我正在开发一个调查生成器，我让用户根据他们选择的字段添加不同的问题。对于问题字段，我想使用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。 仅供参考，我使用人工智能重新写了这个答案，因为英语不是我的主要语言