ckeditor 相关问题

Modern Sharepoint Online 页面上的 SPFX Accordion Webpart 中的 CKeditor 多版本冲突

我为我们的 Modern Sharepoint 网站构建了一个手风琴 spfx web 部件，我正在使用 CKeditor 版本 4.13.0（完整）CDN 版本，以便在页面处于 edi 时为每个手风琴选项卡添加富文本...

CKEditor 只读

自从使用 CKEditor (http://ckeditor.com/) 以来，我遇到了问题。问题是我找不到一种方法使编辑器只读，而且我不能只使用文本区域，因为我想保持一致性......

CKeditor 富文本编辑器在浏览器中显示 html 标签

我刚刚在我正在构建的网站上安装了 CKeditor 富文本 WYSIWYG 编辑器，它似乎工作正常，除了它将文本作为编码的 html 而不是

CKEditor 5 - 如何告诉它不使用“hsl()”生成颜色，以便我可以将它用于电子邮件内容

我正在使用 CKEditor v5，因此用户可以编辑一些文本，这些文本将包含在 Outlook 电子邮件客户端必须可读的电子邮件中。 Outlook 似乎不喜欢 CKEd 的颜色样式...

CKEditor 5迷你版

我最后一次使用ckeditor 是在一年前。就是这样。 去他们的网站。 选择您想要的。 更改工具栏顺序。 选择语言。 下载 zip 并在您的项目中使用它。 现在...

ckeditor 5 自定义下拉菜单呈现为空

我遵循了 ckeditor 5 的指南： https://ckeditor.com/docs/ckeditor5/latest/api/module_ui_dropdown_dropdownview-DropdownView.html 我还发现了这个主题： 在 ckedit 上注册点击监听器...

如何在 jQuery 中动态添加的文本区域上初始化编辑器？

我有一个表单，当我单击按钮时，我可以根据需要添加许多文本区域。每个文本区域必须是一个ckeditor。 我设法初始化现有的文本区域，但我不知道如何为广告执行此操作...

CKeditor5 与 Angular 18

我已经将一个角度项目从角度13更新到角度18，但现在我的Ckeditor5不再工作了，我在Ckeditor5网站上找不到与之相关的任何内容，有一个快速启动

Yii2 KCFinder : 如何上传图片到“Common”或“Frontend”目录

我遇到了问题。我使用 CKEditor 来创建 HTML 编辑器，并使用 KCFinder 在 HTML 编辑器中上传和插入图像。我的问题是，我无法显示我通过 KCFin 上传的图像...

CKFinder 文件上传器在 PHP 8.2 中无法工作

我在php版本7中使用ckfinder没有问题，但是将服务器更新到php 8.2后，当我通过快速上传上传照片时，出现以下错误。 CKSource\CKFinder\Filesystem\File\

CKeditor 实例已存在

我在堆栈溢出上找到了一些类似的帖子，但没有一个给出有效的答案。 我的页面上有几个选项卡，根据他们点击的选项卡，他们会看到一个特定的...

在redmine docker中安装插件redminex_ckeditor会抛出捆绑器错误

我正在将旧的 redmine 2.6 迁移到较新的版本 (5.x)。迁移本身效果很好。我可以找到我的问题和配置。一切看起来都很好。 我现在需要导入插件。第一个已经...

Ck Editor 4 中的图片上传器看不到加载的图片

我正在使用 Ck 编辑器来编辑我的描述字段。当我单击上传文件时，它可以，但 ckeditor 不会在文本区域上渲染图像。 这是我在 _Layout.cshtml 中使用的配置函数 <...

删除使用 ImageInsert 在 CKEDITOR 5 中上传图像的选项

我正在使用CKEditor 5，我需要阻止用户将图像上传到我的服务器。我知道通过删除相应的模块 Image 可以轻松完成此操作。 这里要注意的是，ImageInsert 模块看起来不错...

为什么当我在 ckeditor 区域内开始输入时，在 Laravel 11 应用程序中添加的 ckeditor 会丢失？

阅读 https://startutorial.com/view/using-ckeditor-with-laravel-livewire 文章我在 Laravel 11 应用程序中的 1 页中添加了 ckeditor，就像示例一样，它工作正常。 但要让编辑器有一些默认值

Ckeditor 4 将内容复制到word文档

Ckeditor 4 内容要复制到 Microsoft Word 文档。 HTML： 复制 <h1>标题</h1> ...</desc> <question vote="0"> <p>将 Ckeditor 4 内容复制到 Microsoft Word 文档。</p> <p>HTML：</p> <pre><code><button id="copy">Copy</button> <textarea id="textarea"> <h1>Title</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </textarea> </code></pre> <p>JS：</p> <pre><code>var editor = CKEDITOR.replace( 'textarea' ); document.getElementById('copy').onclick = function(){ var content = CKEDITOR.instances.textarea.getData(), newElement = document.createElement("textarea"); newElement.style.position = 'absolute'; newElement.style.left = '99999px'; newElement.innerHTML = content; document.body.appendChild(newElement) newElement.select(); document.execCommand('copy'); } </code></pre> <p>这是一个用于测试的小提琴：<a href="https://jsfiddle.net/oL04y3g5/" rel="nofollow noreferrer">https://jsfiddle.net/oL04y3g5/</a></p> <p>此代码将复制 html 源代码：</p> <pre><code><h1>Title</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </code></pre> <p>将其粘贴到 Word 文档中会将其显示为纯文本，而不是应有的样子。</p> <p>如何像选择框中的文本一样复制并将其粘贴到word文档中？</p> </question> <answer tick="false" vote="0"> <p>您需要有一个隐藏的 <pre><code>div</code></pre>，一旦用户单击副本，所有内容都会进入剪贴板。这样就可以得到<pre><code>textarea</code></pre>的内部内容了。</p> <p>参考下面的示例代码：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>var editor = CKEDITOR.replace('textarea'); document.getElementById('copy').onclick = function () { var content = CKEDITOR.instances.textarea.getData(); var hiddenDiv = document.createElement('div'); // Create a sample hidden div element hiddenDiv.style.position = 'absolute'; // add sample styling hiddenDiv.style.left = '-9999px'; hiddenDiv.style.whiteSpace = 'pre-wrap'; hiddenDiv.innerHTML = content; document.body.appendChild(hiddenDiv); var range = document.createRange(); range.selectNodeContents(hiddenDiv); var selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); document.execCommand('copy'); // Copy things out selection.removeAllRanges(); // Remove everything out document.body.removeChild(hiddenDiv); };</code></pre> <pre><code><script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script> <button id="copy">Copy</button> <textarea id="textarea"> <h1>Title</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </textarea></code></pre> </div> </div> <p></p> </answer> </body></html>

CKEditor5 图像无法正确调整大小

我尝试使用ckeditor5但图像无法正确调整大小.. 我通过ckeditor5插入图像，它变成了200像素，但是ckeditor生成了这个代码 我尝试使用 ckeditor5 但图像大小无法正确调整.. 我通过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 标签的宽度 根据此页面上的文档，您需要包含内容的 css 样式。 例如： <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/42.0.0/ckeditor5-content.css">

为什么figure和oembed标签不起作用？文档标题

给出以下 html： 文档标题 嘿... 鉴于以下html： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> </head> <body> <h2>Header</h2> <figure> <oembed url="https://www.youtube.com/watch?v=7km4EHgkQiw&amp;list=RDQK-Z1K67uaA&amp;index=9"></oembed> </figure> </body> </html> 为什么页面不显示 youtube 视频？ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> </head> <body> <h2>Header</h2> <figure> <oembed url="https://www.youtube.com/watch?v=7km4EHgkQiw&amp;list=RDQK-Z1K67uaA&amp;index=9"></oembed> </figure> </body> </html> 主体代码由CKEditor生成（我刚刚从figure标签中删除了“media”类）。您可以在这里查看我的原始帖子link 已针对 CKeditor 5 测试解决方案 使用以下代码将 CKeditor 中显示的确切视图保存到数据库中 mediaEmbed: { previewsInData:true }, 完整的JS代码 var KTCkeditorDocument = function () { // Private functions var demo = function () { ClassicEditor .create( document.querySelector( '#kt-editor' ),{ mediaEmbed: { previewsInData:true }, } ) .then( editor => { // console.log( editor ); } ) .catch( error => { // console.error( error ); Swal.fire("Info !", error, "error"); } ); } return { // public functions init: function() { demo(); } }; }(); jQuery(document).ready(function() { KTCkeditorDocument.init(); }); 有关更多详细信息，您可以查看此链接：https://ckeditor.com/docs/ckeditor5/latest/features/media-embed.html figure 和 oembed 标签无法显示预览。为了使其工作，我必须将 youtube 链接转换为可嵌入链接并使用 iframe 添加它们。 为此，我使用了此线程中提出的解决方案：link function getId(url) { var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/; var match = url.match(regExp); if (match && match[2].length == 11) { return match[2]; } else { return 'error'; } } var videoId = getId('http://www.youtube.com/watch?v=zbYf5_S7oJo'); var iframeMarkup = '<iframe width="560" height="315" src="//www.youtube.com/embed/' + videoId + '" frameborder="0" allowfullscreen></iframe>'; 这有点旧了，但我总是很难获得 React 的 CKEditor 答案： 将此配置添加到 CKEditor 组件中： config={{ mediaEmbed: { previewsInData: true } } 我可以在ckeditor5中预览视频。但是，我保存了 ckeditor 中的内容，并在另一个页面的 div 中显示内容，而不是在 ckeditor5 中。如何让视频在 div 中工作？我得到的是类似的东西

如何防止CKEditor改变标签顺序

CKEditor 转换以下代码： H3 1 2 到 H3 ... CKEditor 转换以下代码： <h3>H3 <ul> <li>el 1</li> <li>el 2</li> </ul></h3> 到 <h3>H3 </h3> <ul> <li>el 1</li> <li>el 2</li> </ul> 有办法阻止这种行为吗？ TL;博士; 不 CKEditor 是一个 HTML4/xHTML 编辑器，基于 DTD，它提供了一整套关于哪些标签可用以及它们在 DOM 中出现在何处/如何出现的规则。 如果您检查 DTD，您可以看到 H3 是一个 heading 标签（这是一个 block），内部只能包含内联标签。 <!ENTITY % heading "h1|h2|h3|h4|h5|h6"> .... <!ENTITY % block "p | %heading; | div | %lists; | %blocktext; | isindex |fieldset | table"> .... <!ELEMENT h3 %Inline;> <!ATTLIST h3 %attrs; %TextAlign; > ul标签也是一个block标签，所以它不能出现在h3标签内： <!ENTITY % lists "ul | ol | dl | menu | dir"> .... <!ENTITY % block "p | %heading; | div | %lists; | %blocktext; | isindex |fieldset | table"> 这个例子怎么样？ （故意添加空格） < strong >< em >内容在此< /em >< /strong > < strong >和< em >的顺序是否错误？ CKEditor 5 坚持将顺序改为： < em >< strong >内容在此< /strong >< /em >

以编程方式从 CKEditor5 修订历史记录工具栏触发“打开修订历史记录”

我目前在我的项目中使用CKEditor5修订历史记录功能。我需要以编程方式打开修订历史记录而不使用工具栏选项，是否有任何函数或 API