quill 相关问题

动态更改 Quill 工具栏可见性

我知道在 Quill 编辑器实例化时，有一个工具栏可见性选项。有没有一种方法可以在编辑器实例化后动态更改此工具栏的可见性？ 选项...

如何在quill.js的工具栏中创建自定义下拉菜单

我正在使用 quill.js 在我的项目中创建一个编辑器。到目前为止，我已经成功地将 quill 与我的 web 项目集成。现在我想做的是在 quill 工具栏中创建一个自定义下拉菜单。博士.. .

如何向 QuillJS 编辑器添加自定义字体大小

如何使用 QuillJS 将自定义字体大小添加到工具栏？我尝试过两种方法： // 启动编辑器 让工具栏选项= [ [‘粗体’、‘斜体’、‘下划线’、‘删除线’]...

如何将鹅毛笔编辑器设置为必填表单字段？

我在我的角度应用程序中使用 ngx-quill 编辑器。我想确保在提交表单之前填写此表单字段。当我尝试添加时 [要求]=“真” ...并通过

点击工具栏时光标跳到顶部

我一直在我的 svelte 项目中实现 Quill。但是当我按下工具栏上的按钮时，它会将光标放置在编辑器的开头，使其无法编辑中间某处的文本...

如何在 QuillJS (React) 中关闭拼写检查

如何在 React 中关闭 quill.js 中的拼写检查？ 我发现这个 GitHub 页面显示了如何在普通 JavaScript 中禁用 quill 的拼写检查器： const quill = new Quill('#editor-container') 鹅毛笔根。

按需启用/禁用 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'] = ()...