CKEditor是一个开源富文本编辑器生态系统,支持实时协作。将此标记与[ckeditor4]和[ckeditor5]标记一起使用以指示编辑器版本。
在 CKEditor 3 中使用“pastefromword”过滤所有粘贴的内容
CKEditor 是一个很棒的编辑器,pastefromword 插件也非常好。我希望将插件提供的过滤应用于所有粘贴的文本。例如,从word粘贴时,所有字体...
CKEditor - 使用 jquery val() 获取 HTML 值
我看到很多答案都说要使用以下方式获取 CKEditor 内容: CKEDITOR.instances['editor1'].getData(); 然而,我们一直在使用以下似乎有效的方法: $("#editor1").va...
如何使用reactjs在ckeditor5中上传图片base64
我正在使用ckeditor5制作一些富文本。我几乎需要经典构建器附带的所有功能。当我尝试插入一些图像时,我得到“filerepository-no-upload-adapter”...
在我们的一个项目中实施 CKEditor 5。我想允许最终用户创建一个页内锚标记,他们可以使用其他链接跳转到该标记(即th...
我有一个自定义 ckeditor5 插件,它用自定义标签包装字符串并插入可选属性。也可以手动输入标签。三种可能的形式是: [ 我有一个自定义 ckeditor5 插件,它用自定义标签包装字符串并插入可选属性。也可以手动输入标签。三种可能的形式是: [<bbref ver="RSV">Mt 2:1 rsv</bbref>] [<bbref ver="">Mt 2:2 null</bbref>] [<bbref>Mt 2:3 none</bbref>]</p> 编辑器识别(向上转换)前两个,但将第三个视为纯文本。 我的向上代码: // Conversion from a view element to a model attribute conversion.for('upcast').elementToAttribute({ view: { name: 'bbref', attributes: ['ver'] }, model: { key: 'bibleref', // Callback function provides access to the view element value: viewElement => { let ver = viewElement.getAttribute('ver'); console.log('in upcast ver=['+ver+']'); return ver; } } }); 第三种形式似乎甚至没有调用 viewElement 回调。 您无需列出视图的属性即可在模型值回调中获取它们。 attributes: ['ver'] 充当对哪些视图元素将被向上转换的约束,并表示“仅向上转换具有 bbref 属性的 ver 元素”。 // Conversion from a view element to a model attribute conversion.for('upcast').elementToAttribute({ view: { name: 'bbref', }, model: { key: 'bibleref', // Callback function provides access to the view element value: viewElement => { // You can still get the ver attribute. let ver = viewElement.getAttribute('ver'); console.log('in upcast ver=['+ver+']'); return ver; } } });
我有两个关于 CKEditor Widget 的问题: 首先 - 我想要做到这一点,以便当我突出显示文本然后单击小部件的工具栏按钮时,突出显示的内容将插入到其中...
我已添加 Javascript 代码之间。但这不是工作编辑器风格。 我尝试在 Javascript 中添加我的表单。 但编辑最终没有工作。 有人能解决这个问题吗? 我已经添加了 <</desc> <question vote="0"> <p>我已添加 Javascript 代码之间。但这不是工作编辑器风格。</p> <p>我尝试在 Javascript 中添加我的表单。 但编辑最终没有工作。 有谁能解决这个问题吗</p> <p>我已经添加了</p> <pre><code><script> <textarea type="text" id="dsc" name="dsc[]" class="form-control" placeholder="Enter Des"></textarea>\ </div> </script> </code></pre> <p>ckeditor 编辑器代码</p> <pre><code> <script src="https://cdn.ckeditor.com/4.12.1/standard-all/ckeditor.js"></script> <script> CKEDITOR.replace('dsc', { height: 260, }); </script> </code></pre> <p>谁能解决一下吗</p> <p>有谁能解决吗?</p> </question> <answer tick="false" vote="0"> <p>您的 <pre><code>HTML</code></pre> 结构无效。</p> <ul> <li>从您的 <pre><code><script></code></pre><pre> 中删除 </pre><code>textarea</code></li> 标签 <li>从 <pre><code>[]</code></pre><pre> 附近的 </pre><code>textarea's</code><pre> </pre><code>name</code><pre> 属性中删除 </pre><code>name="dsc[]"</code></li> <li>您还有孤儿 <pre><code></div></code></pre> 结束标签。</li> </ul> <p>示例工作代码</p> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.ckeditor.com/4.16.0/standard/ckeditor.js"></script> <title>CKEditor 4 Example</title> </head> <body> <h1>CKEditor 4 Example</h1> <textarea id="editor1" name="editor1" rows="10" cols="80"> <!-- You can provide initial content for the textarea if needed --> This is the initial content. </textarea> <script> // Replace the textarea with CKEditor CKEDITOR.replace('editor1'); </script> </body> </html> </code></pre> </answer> </body></html>
在 Vue3 中使用自定义构建的 Ckeditor5 和 Vite
我正在使用 Quasar 和 Vite 以及 Vue3。 我想在我的项目中添加一个ckeditor,但我需要有base64上传适配器来上传图像。 我明白我必须继续使用在线构建器,选择...
如何在react上删除ckeditor5工具栏上的图像插件? 从 'react' 导入 React, { Component, Fragment }; 从 '@ckeditor/ckeditor5-react' 导入 CKEditor; 从'@ckedi导入ClassicEditor...
CKeditor 无法在 PythonAnywhere 上工作,但在 localhost (Django) 上工作
我有一个简单的博客项目,我想在 pythonanywhere 上展示。不幸的是我似乎无法解决 CKeditor 的问题。它在本地主机上工作,但在 pythonanywhere 上它显示错误并且仅显示标准
我正在使用CKEDITOR文本编辑器进行描述。如果我将其留空或输入一些没有文本的空格,结果将如下所示: ... 我使用CKEDITOR文本编辑器进行描述。如果我将其留空或输入一些没有文本的空格,结果将如下所示: <p> </p> <p> </p> <p> </p> <p> </p> html 是: <form action="<?= base_url('Blogs/submit_post'); ?>" method="post"> <label>Description</label> <textarea id="des" name="descr"></textarea> </form> PHP 脚本是 (CI4) $data = $this->request->getVar(); $data['descr'] = htmlentities($data['descr']); print_r($data); 现在我需要,如果这个文本区域提交时没有文本或空格,例如 - <p> </p> 那么 $data['descr'] 的值应该 null 否则 $data['descr'] 的值 = htmlentities($data['descr']) 如何检查提交的textarea值是否为空? 如果您想检查提交的textarea值是否只包含不间断空格和HTML标签并将其视为空,您还可以使用strip_tags函数结合str_replace来删除HTML标签和不间断空格,然后检查结果字符串是否为空。 $data = $this->request->getVar(); $cleanedDescr = str_replace(' ', ' ', strip_tags($data['descr'])); if (empty(trim($cleanedDescr))) { $data['descr'] = null; } else { $data['descr'] = htmlentities($data['descr']); } print_r($data); 此方法还应该适用于处理值仅包含不间断空格和 HTML 标记的情况,将其视为空并将 $data['descr'] 设置为 null。
无法上传文件:*.png - CKEditor、CKFinder
我的API上传文件(ExpressJS) 在此输入图像描述 我在 ReactJS 上的 CKFinder 在此输入图像描述 我哪里出错了,有人可以帮助我吗? --------------------- 对不起我的英语...
这个问题似乎有很多想要同样东西的人的问题,但似乎没有一个答案能够正确解决它(在这里,或在 CKEditor 论坛上),但是我如何粘贴到...
我已经在 Django 管理界面的 CKEditor 中上传了一些图像。我可以通过单击编辑器中的“图像”按钮来浏览和选择图像,然后单击win中的“浏览服务器”...
所以我有一个 CKeditor 5 文本区域,当我单击提交按钮时,它会运行获取文本区域,并且为了这个示例,将其作为更改而触发。然而问题是它会引发什么......
在 MicroSoft Outlook 中打开时,CKEditor 在内容中嵌套列表后不允许有空格
大家好,我正在使用 CKEditor (react) 来编辑和创建要通过发送网格邮寄的内容。示例内容是这样的: Netflix 计划提高价格... 大家好,我正在使用 CKEditor (react) 来编辑和创建要通过发送网格邮寄的内容。内容举例是这样的: <ul><li><strong>Netflix plans to raise prices of ad-free tier following Actor’s Strike </strong> (链接) <strong>Details on timing and increase are still limited:</strong> It is still not known how much Netflix will raise prices by or when exactly the new prices will take effect, but the WSJ report says "a few months" after the strike ends </li> <li> <strong>Discussing raising prices in several markets globally, </strong>but will likely begin with the US and Canada </li> <li> <strong>Could represent the first price increase this year:</strong> Netflix last raised its prices in January 2022; The monthly cost for its basic plan for US customers rose $1 to $9.99, while its standard plan incr’d to $15.49 from $13.99 and the premium plan to $19.99 from $17.99 </li> <li> <strong>WGA noted that cost of their new contract will amount to 0.2% of Netflix’s annual revenue</strong> (<a href="https://www.thewrap.com/wga-strike-contract-studio-costs/">link</a>)<strong>:</strong> Under the new WGA contract, Netflix would pay up an additional $6mn, or 0.2% of its $31.6bn annual revenue; It remains to be seen how negotiations will shape up with the Screen Actor’s Guild and the impact it will have on the streamers’ financials <br> </li> </ul> </li> <li> 这里,当 li 元素嵌套时,在 Microsoft Outlook 中打开内容时,内部 li 元素后面的空格将被删除。如果我们在 Gmail 中打开邮件,看起来不错。 如何在列表嵌套中引入空格? 我尝试将内联 css 样式设置为 <li style ="margin-top : 10px;"></li> 我还尝试用 <br> 标签代替 我还尝试在 sendgrid 邮件模板中添加自定义样式,如下所示 <style>ul li ul li:last-child {margin-bottom: 10px;}</style> 上述解决方案均未按预期工作。 Outlook 在列表上应用间距的方式有点奇怪。在单个级别上(因此,不是嵌套的),第一个 <li> 的 margin-top 控制列表上方的间距,最后一个 <li> 的 margin-bottom 控制列表下方的间距。 IE。 不是 <ul> 或 <ol> 上的边距。 对于嵌套列表,在我刚才的测试中,是一样的。我测试了这个并且它有效: <ul> <li>And things here <ul> <li>one</li> <li>two</li> <li style="margin-bottom:50px;">three</li> </ul> </li> <li>And another story here <ul> <li>second list</li> <li>second two</li> <li>second three</li> </ul> </li> </ul> 或者,由于 Outlook 不接受像 :last-child (https://www.caniemail.com/features/css-pseudo-class-last-child/) 这样的花哨 CSS,您可以尝试向最后一个列表项并向其添加 margin-bottom ? 但是为了在电子邮件客户端之间保持一致,您可能会发现有一个空白段落更容易——您只需稍稍有所不同即可: <p style="font-size:0;line-height:0;margin:50px 0 0 0;"> </p> 有时,是编辑器本身删除了它认为的空白区域。在这种情况下,上面的方法仍然可以工作,或者,您可以尝试使用一些奇特的字符,例如 ‌(零宽度非连接符),这些字符通常不会被删除。
CKEDITOR 5 带 Bootstrap 5.3 深色主题
我刚刚找到 CKEditor 并离开 TinyMCE,但我在页面上安装的 CKEditor 5 没有识别出页面上的主题设置为我的 Bootstrap 我刚刚找到 CKEditor 并离开 TinyMCE,但我在页面上安装的 CKEditor 5 没有识别出页面上的主题是我的 Bootstrap 设置的 <html data-bs-theme="dark" lang="en"> 如何让 CKE5 来呈现主题? 我已经通过使用提供的链接并为我的项目自定义它来进行管理
CK-editor 在开发中工作正常,但在生产中却不起作用。 在控制台选项卡中显示错误: 无法加载资源:服务器响应状态为 404(未找到)ckeditor.js
我正在使用 npx playwright codegen 为我的剧作家测试提供代码。我有一个 CKEditor,我想填充一些测试内容。当我在 CKEditor 内部单击并写入“test&q...