quill 相关问题

按需启用/禁用 Quill

我正在使用鹅毛笔使 myDiv 可编辑，如下所示： var myQuill = new Quill(myDiv, { 模块：{ 工具栏：{ 容器：我的工具栏 ...

如何使用工具栏选项在 Quill js 上添加字体类型？

我用Quill js制作了一个富文本区域。我的工具栏有以下选项： 新 Quill('#quilljs-container', { 模块：{ 工具栏：[ [‘粗体’、‘斜体’、‘

ReactQuill 不再工作，由于 DOMNodeInserted 调用而强制将焦点从元素/文本区域移开

我一直在 NextJS 14 应用程序中使用react-quill 包。它一直工作正常，直到今天，我去写一篇新文章，我在文本区域的焦点会跳回顶部...

使用react-quill进行具有丰富文本功能的后期创建，停止工作，当输入内容时文本区域会散焦

我一直在 NextJS 14 应用程序中使用react-quill 包。它一直工作正常，直到今天，我去写一篇新文章，我在文本区域的焦点会跳回顶部...

如何只获取一些flutter quill工具栏按钮？

我正在 AndroidStudio 中使用 Dart 创建应用程序，并希望使用 flutter_quill 10.1.6 创建文本页面的工具栏（类似于 docs/word/notion） 我已经尝试使用 10.1.4 好几天了...

在 quill js 中的表格单元格中列出

我正在寻找一种使用鹅毛笔库在表格单元格内创建列表的方法。我找到了一些 quill 库，如 tableui 和 quill-better-table，但它们不提供此类功能。 ...

用鹅毛笔处理桌子

我正在尝试将表格与 Quill WYSIWYG 编辑器一起使用。我正在尝试在沙箱中执行此操作：https://quilljs.com/playground/snow 。我已将 ['table'] 添加到工具栏，所以现在它看起来像这样： 常量

如何在 Quill 编辑器 - React 中更改图像大小？

我想为用户提供在鹅毛笔编辑器中更改图像大小的灵活性，我该怎么做？我目前正在正确执行此操作，但出现错误。这是我的代码： Quill.register("模块/

当我们尝试添加链接时，羽毛笔编辑器弹出窗口在左侧被切断

当我尝试在鹅毛笔编辑器中添加到最左侧文本的链接时，打开的弹出窗口隐藏在左侧。我正在使用 Snow 主题。 下图显示了我的问题。

在 Quill 上从 Delta 获取 HTML

我正在尝试从 Quill 上的 delta 获取 HTML 代码。 这是我的代码 <p>我正在尝试从 Quill 上的 delta 获取 HTML 代码。</p> <p>这是我的代码</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;!-- Main Quill library --&gt; &lt;script src=&#34;http://cdn.quilljs.com/1.2.0/quill.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;http://cdn.quilljs.com/1.2.0/quill.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;!-- Theme included stylesheets --&gt; &lt;link href=&#34;http://cdn.quilljs.com/1.2.0/quill.snow.css&#34; rel=&#34;stylesheet&#34;&gt; &lt;link href=&#34;http://cdn.quilljs.com/1.2.0/quill.bubble.css&#34; rel=&#34;stylesheet&#34;&gt; &lt;title&gt;Editor&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&#34;toolbar&#34;&gt;&lt;/div&gt; &lt;div id=&#34;editor&#34;&gt;&lt;/div&gt; &lt;script&gt; var toolbarOptions = [ [&#39;bold&#39;, &#39;italic&#39;, &#39;underline&#39;, &#39;strike&#39;], [&#39;blockquote&#39;, &#39;code-block&#39;], [{&#39;header&#39;: 1}, {&#39;header&#39;: 2}], [{&#39;list&#39;: &#39;ordered&#39;}, {&#39;list&#39;: &#39;bullet&#39;}], [{&#39;script&#39;: &#39;sub&#39;}, {&#39;script&#39;: &#39;super&#39;}], [{&#39;indent&#39;: &#39;-1&#39;}, {&#39;indent&#39;: &#39;+1&#39;}], [{&#39;direction&#39;: &#39;rtl&#39;}], [{&#39;size&#39;: [&#39;small&#39;, false, &#39;large&#39;, &#39;huge&#39;]}], [&#39;link&#39;, &#39;image&#39;, &#39;video&#39;, &#39;formula&#39;], [{&#39;color&#39;: []}, {&#39;background&#39;: []}], [{&#39;font&#39;: []}], [{&#39;align&#39;: []}] ]; var options = { debug: &#39;info&#39;, modules: { toolbar: toolbarOptions }, placeholder: &#39;Textttt&#39;, readOnly: false, theme: &#39;snow&#39; }; var editor = new Quill(&#39;#editor&#39;, options); var delta = quill.getContents(); function quillGetHTML(inputDelta) { var tempCont = document.createElement(&#34;div&#34;); (new Quill(tempCont)).setContents(inputDelta); return tempCont.getElementsByClassName(&#34;ql-editor&#34;)[0].innerHTML; } function callMe(){ $(document).ready(function(){$(&#34;#btn1&#34;).click(function(){$(&#34;p&#34;).append(quillGetHTML(delta));});});} &lt;/script&gt; &lt;p&gt;HTML: &lt;/p&gt; &lt;button id=&#34;btn1&#34; onClick=&#34;callMe()&#34;&gt;Get HTML From Delta&lt;/button&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>当我点击按钮时，什么也没有出现，我检查了 <pre><code>callMe()</code></pre> 函数并且它起作用了，这意味着问题出在从 delta 中提取 HTML。</p> </question> <answer tick="true" vote="29"> <p>是的，你是对的，提取 HTML 不起作用，但问题是 quill 拒绝支持 <pre><code>getHTML()</code></pre> 功能。 <a href="https://github.com/quilljs/quill/issues/903" rel="nofollow noreferrer">https://github.com/quilljs/quill/issues/903</a></p> <p>但是你可以使用<pre><code>quill.root.innerHTML</code></pre>。试试这个：</p> <p><a href="http://jsbin.com/zuniqef" rel="nofollow noreferrer">http://jsbin.com/zuniqef</a></p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&#34;utf-8&#34;&gt; &lt;meta name=&#34;viewport&#34; content=&#34;width=device-width&#34;&gt; &lt;title&gt;JS Bin&lt;/title&gt; &lt;!-- Main Quill library --&gt; &lt;script src=&#34;http://cdn.quilljs.com/1.2.0/quill.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;http://cdn.quilljs.com/1.2.0/quill.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;!-- Theme included stylesheets --&gt; &lt;link href=&#34;http://cdn.quilljs.com/1.2.0/quill.snow.css&#34; rel=&#34;stylesheet&#34;&gt; &lt;link href=&#34;http://cdn.quilljs.com/1.2.0/quill.bubble.css&#34; rel=&#34;stylesheet&#34;&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&#34;toolbar&#34;&gt;&lt;/div&gt; &lt;div id=&#34;editor&#34;&gt;&lt;/div&gt; &lt;div id=&#34;myDiv&#34; style=&#34;border:1 black solid;&#34;&gt;&lt;/div&gt; &lt;script&gt; var toolbarOptions = [ [&#39;bold&#39;, &#39;italic&#39;, &#39;underline&#39;, &#39;strike&#39;], [&#39;blockquote&#39;, &#39;code-block&#39;], [{&#39;header&#39;: 1}, {&#39;header&#39;: 2}], [{&#39;list&#39;: &#39;ordered&#39;}, {&#39;list&#39;: &#39;bullet&#39;}], [{&#39;script&#39;: &#39;sub&#39;}, {&#39;script&#39;: &#39;super&#39;}], [{&#39;indent&#39;: &#39;-1&#39;}, {&#39;indent&#39;: &#39;+1&#39;}], [{&#39;direction&#39;: &#39;rtl&#39;}], [{&#39;size&#39;: [&#39;small&#39;, false, &#39;large&#39;, &#39;huge&#39;]}], [&#39;link&#39;, &#39;image&#39;, &#39;video&#39;, &#39;formula&#39;], [{&#39;color&#39;: []}, {&#39;background&#39;: []}], [{&#39;font&#39;: []}], [{&#39;align&#39;: []}] ]; var options = { debug: &#39;info&#39;, modules: { toolbar: toolbarOptions }, placeholder: &#39;Textttt&#39;, readOnly: false, theme: &#39;snow&#39; }; var editor = new Quill(&#39;#editor&#39;, options); editor.insertText(0, &#39;Hello&#39;, &#39;bold&#39;, true);//set init value function callMe() //display current HTML { var html = editor.root.innerHTML; var myDiv = document.getElementById(&#34;myDiv&#34;); myDiv.innerText = html; } &lt;/script&gt; &lt;div&gt;HTML: &lt;/div&gt; &lt;button id=&#34;btn1&#34; onClick=&#34;callMe()&#34;&gt;Get HTML From Delta&lt;/button&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>如果此编辑器（鹅毛笔）不支持 getHTML（这对将来的使用很重要）。我建议您使用另一个文本编辑器库，例如：ckeditor，这是我 4 年来最好的推荐使用它（当然我在那段时间也尝试了很多文本编辑器）。</p> </answer> <answer tick="false" vote="6"> <p>我只是使用 - <strong>$("#form").find('#quill-editor .ql-editor').html();</strong></p> <p>其中 #form 是编辑器的包含形式...</p> </answer> <answer tick="false" vote="3"> <p>为了获得用户插入的任何额外空格，我使用</p> <p><pre><code>this.editor.root.innerHTML.split(&#39; &#39;).join(&#39; &amp;nbsp;&#39;)</code></pre></p> <p>（注意，<pre><code>split</code></pre>中有两个空格，<pre><code>join</code></pre>中有一个空格！）</p> </answer> </body></html>

使用 QuillJS 注册颜色

我有一个 dotnet Blazor 解决方案，需要 WYSIWYG 编辑器。我正在使用 QuillJS，但我正在努力将“颜色”添加到 QuillJS 工具栏。 我按照示例进行配置...

Quill 2.0 本地化

我正在使用新的 Quill 2.x WYSIWYG 编辑器。我想实施本地化。如何处理这个问题？我在知识库中找不到任何详细信息。 顺便提一句： 我正在使用新的 Quill 2.x WYSIWYG 编辑器。我想实施本地化。如何处理这个问题？我在知识库中找不到任何详细信息。 顺便说一句： <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.snow.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.js"></script> 事实证明这就是解决方案。可以通过 CSS 应用翻译。这是德语： <style> .ql-snow .ql-tooltip::before { content: "URL besuchen:" !important; } .ql-snow .ql-tooltip input[type=text]::placeholder { content: "https://www.beispiel.de"; } .ql-snow .ql-tooltip a.ql-action::after { content: 'Bearbeiten' !important; } .ql-snow .ql-tooltip a.ql-remove::before { content: 'Entfernen' !important; } .ql-snow .ql-tooltip.ql-editing a.ql-action::after { content: 'Speichern' !important; } .ql-snow .ql-tooltip[data-mode=link]::before { content: "Link eingeben:" !important; } .ql-snow .ql-tooltip[data-mode=formula]::before { content: "Formel eingeben:" !important; } .ql-snow .ql-tooltip[data-mode=video]::before { content: "Video-URL eingeben:" !important; } /* Zusätzliche Stile für bessere Anpassung */ .ql-snow .ql-tooltip input[type=text] { width: 200px; /* Breite anpassen, falls nötig */ } .ql-snow .ql-tooltip a.ql-preview { max-width: 250px; /* Maximale Breite für Vorschau-Links anpassen */ } </style>

Quill 2.0 本地化失败

我正在使用新的 Quill 2.x WYSIWYG 编辑器。我想实施本地化。到目前为止，我的方法如下： 常量 de = { '用户界面': { '字体': 'Schriftart', ...

如何正确将 hr 按钮添加到 Quill 编辑器？

如何正确将 hr 按钮添加到 Quill 编辑器？我将此按钮添加到工具栏，然后在 @ready 事件中执行以下代码： quill.getModule('toolbar').handlers['hr'] = ()...

如何向 Quill.js 添加新格式（<hr> 标签）？

我想添加一个按钮，将 标签添加到 quill.js（测试版）编辑器。 这里是小提琴。 我想添加一个按钮，将 <hr> 标签添加到 quill.js（测试版） 编辑器。 这里是小提琴。 <!-- Initialize Quill editor --> <div id="toolbar-container"> <span class="ql-formats"> <button class="ql-hr"></button> //here my hr-button </span> <span class="ql-formats"> <button class="ql-bold"></button> <button class="ql-italic"></button> </span> </div> <div id="editor"> <p>Hello World!</p> <hr> // this gets replaced by <p> tag automatically *strange* <p>Some initial <strong>bold</strong> text</p> </div> 我初始化我的编辑器： var quill = new Quill('#editor', { modules: { toolbar: '#toolbar-container' }, placeholder: 'Compose an epic...', theme: 'snow' }); 在这里，我向编辑器添加了 <h1> 标签功能，效果非常好： $('.ql-hr').on("click",function(){ var range = quill.getSelection(); var text = quill.getText(range.index, range.length); quill.deleteText(range.index, range.length); quill.pasteHTML(range.index, '<h1>'+text+'</h1>'); }) 现在我对 <hr> 标签尝试同样的操作，但根本不起作用： $('.ql-hr').on("click",function(){ var range = quill.getSelection(); quill.pasteHTML(range.index, '<hr>'); }) 初始 <hr> 中的 div#editor 标签被替换为 <p> 标签。我添加的按钮功能不适用于 <hr> 标签，但适用于其他标签。我知道 Quill.js 没有实现 <hr> 标签，这也是我得到这个控制台输出的原因： quill：工具栏忽略附加到不存在的格式 hr select.ql-hr 有什么办法可以解决这个问题吗？ 我仍然不知道为什么这个问题被否决，但是这是解决方案： 导入嵌入blot - 重要：不是“阻止”，不是“嵌入”，“阻止/嵌入”！ var Embed = Quill.import('blots/block/embed'); 定义一个扩展该嵌入的新类 class Hr extends Embed { static create(value) { let node = super.create(value); // give it some margin node.setAttribute('style', "height:0px; margin-top:10px; margin-bottom:10px;"); return node; } } 定义您的标签 Hr.blotName = 'hr'; //now you can use .ql-hr classname in your toolbar Hr.className = 'my-hr'; Hr.tagName = 'hr'; 为 按钮编写自定义处理程序 var customHrHandler = function(){ // get the position of the cursor var range = quill.getSelection(); if (range) { // insert the <hr> where the cursor is quill.insertEmbed(range.index,"hr","null") } } 注册您的新格式 Quill.register({ 'formats/hr': Hr }); 在 HTML 中使用正确的选择器实例化编辑器 var quill = new Quill('#editor', { modules: { toolbar: { container: '#toolbar-container', handlers: { 'hr': customHrHandler } } }, theme: 'snow' }); HTML 部分保持不变。整个 功能可以类似于 格式完成。 谢谢你，乐于助人的社区。 没有足够的代表发表评论，因此发布作为答案，以解决未成年人问题 问题。 由@Suisse 的精彩答案中显示的嵌入引起的默认提示框必须在工具栏处理程序中处理（带有第二个参数），如下所示： var toolbarOptions = { handlers: { // ... 'hr': function(value) { this.quill.format('hr', true); } } } 来源讨论 - 文档：通过工具栏模块调用自定义嵌入印迹时如何避免默认“提示” 工具栏处理程序文档中的提示示例：https://quilljs.com/docs/modules/toolbar/#handlers 这里的答案让我走上了整理 Quill2 hr 按钮的正确轨道，但 v2 的处理方式需要稍有不同： const BlockEmbed = Quill.import('blots/block/embed'); class DividerBlot extends BlockEmbed { static blotName = 'divider'; static tagName = 'hr'; } Quill.register(DividerBlot); this.quill.getModule('toolBar').handlers.divider = (value) => { this.quill.insertEmbed(quill.getSelection(focus = true).index, 'divider', true) }

无法使用 Quill 2.0-dev3 创建自定义 BlockEmbed

我们已经使用 Quill 1.3.7 一段时间了。我写了一些自定义嵌入印迹，可以正常工作。然后我们升级到 2.0.0-dev3 以获得新功能，这打破了我们的c...

Flutter Quill 嵌入构建器始终为 null 并抛出 UnimplementedError

我正在使用 Flutter Quill 包版本 6.0.6+1 并使用 flutter_quill_extensions.dart'。在我的 QuillEditor 中，我有以下内容： embedBuilders：FlutterQuillEmbeds.builders() 我

如何在 Quill 中禁用自动子弹

刚开始使用Quill，发现它非常有用。 我的项目需要纯文本编辑。 具体来说，我使用 quill 作为输入 YAML 代码的表单。 破折号“-”是 YAML 中的关键项。 该项目...

Quill 富文本编辑器在复制/粘贴时不保持字体大小

我正在通过 Javascript 在 xhtml 页面上使用 Quill 富文本编辑器 V2.0。当我将文本从 MS Word 复制并粘贴到编辑器时，字体大小丢失，这也发生在 https://qui 上的演示中...

如何正确添加cid到邮件正文？

我目前正在致力于将电子邮件发送与 GraphMailer 以及由 Quill 提供支持的富文本编辑器集成。我的目标是允许直接从编辑器将内联图像嵌入到电子邮件中。嗬...