quill 相关问题

如何在 flutter 中预加载路线，或者即使在屏幕外也保持加载小部件？

我正在使用 GoRouter 在我的应用程序的页面之间导航。我导航的路线之一是使用 QuillHtmlEditor，当我导航到它时，它需要大约 1 秒的时间来加载，并且每次都会加载新鲜的......

2.0.0-dev 羽毛笔拖动文本不起作用如何让它拖动文本

一般来说，在quill 1.3稳定版中，文本是可以移动的，也就是说，我们可以将某个列表从内部移动到某个地方，或者我们可以从某个地方拖放文本，没有...

在 Quill 中，如何解析 delta 并替换其部分内容

在对 contenteditable 元素进行了大量实验后，我最终选择 Quill 在聊天应用程序上创建富文本消息框，因为它正确处理选择，这看起来很混乱

Angular PrimeNG 编辑器获取多个实例

嗨，我正在使用带有 Angular 的 prime ng 编辑器，并获得了多个 primeNg 编辑器 x.component.html 嗨，我正在使用带有 Angular 的 prime ng 编辑器，并获得了多个 primeNg 编辑器 x.component.html <p-editor [modules]="quillConfiguration" formControlName="questionName" id="questionContents" [style]="{'height':'90px'}" (onTextChange)="onTextChange($event,'questionName')"></p-editor> <p-editor [modules]="quillConfiguration" formControlName="questionDesc" id="questionDesccontents" [style]="{'height':'90px'}" (onTextChange)="onTextChange($event,'questionDesc')" ></p-editor> <p-editor [modules]="quillConfiguration" formControlName="guidelines" id="guidelinesContents" [style]="{'height':'90px'}" (onTextChange)="onTextChange($event,'guidelines')"></p-editor> <p-editor [modules]="quillConfiguration" formControlName="{{item.attributeName}}" id="contents{{item.attributeName}}" [style]="{'height':'90px'}" (onTextChange)="onTextChange($event,item.attributeName)"></p-editor> x.component.ts import * as Quill from 'quill' import { Editor } from "primeng/editor"; @ViewChildren(Editor) editorCmp : QueryList<Editor>; public quillConfiguration = { toolbar: { container: [...], handlers: { 'customStyles': (value) => { const selectionRange = this.quill.getSelection(); //throwing error cannot read properties of undefined(reading getSelection) } } } }; private quill: undefined | Quill; 使用 @ViewChildren() 我正在访问编辑器并在其上调用 getQuill 方法 x.component.ts ngAfterViewInit(): void { this.editorCmp.changes.subscribe(editor => { editor.toArray().forEach((edit, idx) => { this.quill = edit.quill }) }) } 我不确定这是否是获取编辑器实例的正确方法，只有最后一个p-editor获取实例，不知道我们如何才能获取所有实例？ ViewChildren 为您提供与您的查询匹配的所有项目的可观察列表，即 Editor。您将获得您正在使用的 4 个编辑器的列表。 在ngAfterViewInit中，当您订阅this.editorCmp.changes时，editor将获得4位编辑。然后你为其中的每个人分配 edit.quill 到 this.quill。因此，由于您覆盖了前 3 个作业，因此实际上只有最后一个作业有效。 如果你想存储全部 4 个，你可以将它们存储在编辑器数组中，如下所示： x.component.ts private quills: undefined | Quill[]; // Change to array of Quill ngAfterViewInit(): void { this.editorCmp.changes.subscribe((editors) => { this.quills = editors.map((editor) => editor.quill); }) }

在 Next.js 应用程序中的 React-Quill 中面临图像元素的对齐问题

在与 Next.js 应用程序集成时，正在努力解决 React-quill 中的图像对齐问题。文本对齐效果很好，但图像对齐行为却出乎意料。我正在使用以下代码

将Quill绑定到asp net core模型

我正在使用 ASP.Net Core 表单通过代码将数据从用户传递到服务器： @模型SomeModel @using(Html.BeginForm(...)) { @Html.TextBoxFor(s => s.PropertyName); } 效果很好，但现在我...

Primefaces v10 - 我需要使 <p:textEditor> 不可调整大小并设置最大长度

我使用 Primefaces v10，我需要使 不可调整大小并设置最大长度.. 非常感谢

如何通过 Quill JS 富文本编辑器集成上传文件（pdf、doc 等）？

默认情况下，Quill 支持图像、视频和公式等嵌入格式。如何使用 Quill Editor 嵌入 pdf 或 doc 文件？

如何在鹅毛笔编辑器中使用内联样式而不是颜色和背景颜色类

颜色和背景颜色不适用于在羽毛笔编辑器之外显示的内容。例如，我使用html内容发送电子邮件，并且颜色在电子邮件中不起作用

NextJs React-Quill 动态导入不起作用我该如何解决这个问题？

我正在将 NextJs 与 React-Quill 一起使用，但出现错误。 错误：-错误-unhandledRejection：ReferenceError：文档未定义 在对象。 ode_modules\quill\dist\quill.js:7661:12) 当我这么做的时候

为什么返回的文本格式为 html 格式而不是原始 ngx-quill 格式且属性为 Angular

我目前正在尝试实现发送消息按钮，用户在编辑器上键入并发送消息作为回报，我将在显示屏上输出消息，如下所示： 消息已发送

在 ngx-quill 编辑器中附加多个图像

我在我的角度项目中使用 ngx-quill 编辑器。默认情况下，一次仅支持一张图像选择和上传。我正在尝试配置编辑器以在一次拍摄中附加多个图像。 ...

重新定位鹅毛笔文本编辑器的工具栏

我想将羽毛笔文本编辑器的工具栏从其默认位置分离出来，并将其放置在一个完全独立的div中。我怎么做？ 我还想编辑顺序以及在

QuillJS - 需要单击第一行才能聚焦

在 QuillJS 上，我需要单击第一行才能聚焦，而我希望整个编辑器都可单击。 我尝试在 div 上添加 contenteditable="true" 并且它起作用了，但这造成了很多......

提交后清除鹅毛笔编辑器

我在我的 nuxt 3 项目上使用 vue-quill。我将它包装在一个组件中，一切正常，但在发布请求后，编辑器仍然显示内容。 应用程序编辑器 导入 { </desc> <question vote="0"> <div> </div> <p>我在我的 nuxt 3 项目上使用 vue-quill。我将它包装在一个组件中，一切正常，但在发布请求后，编辑器仍然显示内容。</p> <p><strong>应用程序编辑器</strong></p> <pre><code>&lt;script setup&gt; import { QuillEditor } from &#39;@vueup/vue-quill&#39; import &#39;@vueup/vue-quill/dist/vue-quill.snow.css&#39; const props = defineProps({ modelValue: { type: String, default: &#39;&#39;, }, taskId: { type: Number, default: null, }, initialContent: { type: String, default: &#39;&#39;, }, placeholder: { type: String, default: &#39;&#39;, }, taskmembers: { type: Array, required: true, }, }) const emit = defineEmits([&#39;update:modelValue&#39;, &#39;on-editor-ready&#39;]) const editor = ref() const toolbar = [ [{ header: [1, 2, 3, 4, 5, 6, false] }], [&#39;bold&#39;, &#39;italic&#39;, &#39;underline&#39;, &#39;strike&#39;], [{ list: &#39;ordered&#39; }, { list: &#39;bullet&#39; }], [&#39;link&#39;, &#39;image&#39;], [&#39;clean&#39;], ] const onUpdate = () =&gt; { const content = editor.value.getHTML() emit(&#39;update:modelValue&#39;, content) } const onEditorReady = (event) =&gt; { emit(&#39;on-editor-ready&#39;, event) } &lt;/script&gt; &lt;template&gt; &lt;div&gt; &lt;QuillEditor ref=&#34;editor&#34; theme=&#34;snow&#34; :toolbar=&#34;toolbar&#34; content-type=&#34;html&#34; :content=&#34;props.modelValue&#34; placeholder=&#34;Say something...&#34; @ready=&#34;onEditorReady&#34; @update:content=&#34;onUpdate&#34; /&gt; &lt;/div&gt; &lt;/template&gt; </code></pre> <p>在我的页面上我使用它如下</p> <p><strong>任务评论</strong></p> <pre><code>&lt;script setup&gt; import AppEditor from &#39;@/components/AppEditor.vue&#39; const postComment = async () =&gt; { const task = props.taskId const url = `/tasks/${task}/comments` loading.value = true try { await useBaseFetch(url, { method: &#39;POST&#39;, body: JSON.stringify({ comment: message.value, }), }) loading.value = false message.value = &#39;&#39; editor.value.setContents([]) //trying to clear the content currentPage.value = 1 getComments() } catch (error) { loading.value = false if (error.response &amp;&amp; error.response.status === 422) { console.log(&#39;error&#39;, error) } else { errorMsg.value = &#39;An error occured.&#39; } } } &lt;/script&gt; &lt;template&gt; &lt;Form @submit=&#34;onSubmit&#34;&gt; &lt;AppEditor ref=&#34;editor&#34; v-model=&#34;message&#34; :taskmembers=&#34;members&#34; :task-id=&#34;props.taskId&#34; /&gt; &lt;span v-if=&#34;errorMessage &amp;&amp; meta.touched&#34; class=&#34;text-red-500 text-sm normal-case&#34;&gt;{{ errorMessage }}&lt;/span&gt; &lt;div class=&#34;flex gap-2 mt-4&#34;&gt; &lt;ElementsAppButton size=&#34;small&#34; type=&#34;submit&#34; :loading=&#34;loading&#34;&gt; Save &lt;/ElementsAppButton&gt; &lt;/div&gt; &lt;/Form&gt; &lt;/template&gt; </code></pre> </question> <answer tick="false" vote="0"> <p>vue-quill 似乎不喜欢 <pre><code>message.value = &#39;&#39;</code></pre> 中的空字符串。</p> <p>相反，您可以将其设置为空段落<pre><code>&lt;p&gt;&lt;/p&gt;</code></pre>或<pre><code>&lt;p&gt;&lt;br&gt;&lt;/p&gt;</code></pre>，这就是quill用作空值的方式：</p> <pre><code>message.value = &#39;&lt;p&gt;&lt;/p&gt;&#39; </code></pre> <p>这是在<a href="https://play.vuejs.org/#eNqtVU1v20YQ/SsLXugAFNnYaQ8qLTgNDDRFk6Zx2ouoA0WOLMbLXXZ3KVsQ9N/79oMiLQQuWlQHgTufb97s7Byit12X7nqK5lGuK9V0hmkyfbcoRNN2Uhl2YIo27Mg2SrYshmn840kH59u6MVIFbZqdJDZoXIhCVFJow1rSurwndm2jXcSlrjfxq1EtxV2/bhsD/cUrdr1gh0KwwSndlby3rnHeLfKsWyDu0frmmYcMsDgYajteGsKJsXwjVctutIuadop2JMx1EQ2JisiZ4ZePRQAaTMgdiojtZq2siUMUgEA2N6V+aKldk9JQLFeDbNbUOL+5xDk7hV73xkjBzL4jKD0YZPYQ8syrPd7MAnaFWM8PPuGc5YC+OBwCgOMR5UNgSz+VGyWRb8esLbv0q5YCzXT8FUGhi2juGbWyG3Sm7zL8z/7qG86tsoi2xnR6nmVVLRADZTc7lQoymeja7Nzl5nV6mX6X1Y02ozAl3c7WSj5qUghRRDYh+nQEQKPR501zfwavkm3XcFK/dabBPXgGs+RcPv7iZEb1lAzyakvVwzfkX/WTr+STIiDYoVsnnSnVPYF5q769+0hP+D4p0eSew/oF5WfSkvcWozf7qRc1YE/sHNr3ju1G3H/Rt0+GhB6KskAdG86+iMDZuxdKH+FepVcTFp8N1wsTi3s8ndfJKP9uGxVu+2By3tzJ1HZKdhqDV9OmEfTJni78ZNrB+NOO5Qm2veRzdmcU6g+0wK3suZmzOHYSX76dlvf1md/H3o7UuZ/oOZ94NqIxTcnfSQFyof63mTEvFW0lr0n9N9hh8M+c3ypV7oOvInCoCOWdLqd1P07eOvLvnOf0Fgd9sYz7rsYsz0de44TFUsz8YzRTVNb7eIUoIYZvoX9NJ7GNlHxdWsXSpl4e2Baettzl64RdJuwqYW8S9n3CfkjYpuSaVuy4cjCX8RrM2LSNKXlT2S9cc1IcMO1Bg6MHioP1gXFMPziSCjZUx6gTFywI12gcGciG2Ajy4GK3eMaGGHHFqRTutJrugj8cGc93gdfh37YeKs+AXw0ppuXnLx9+tUwwx+/FNwkN3rBy62NI5+fhs6XY5nSrYkzsw523ImHe7J83Ed52Wzw6ZTeJNntOekt2vNnWL5z/4enVQj6mlcYzwkq7l1yasOPyutkNSCbzH3bU2dIbpGZLrdtZCDxK5+F+QRG+Rl0gdxaW3da02Cwnx6CFwr0p6diX0WgynrC7K/dMy5bMFpOZpulod+Na4Jb5pHUTfej9mHO4UoON39A5WLTMTHfp8W9neAdB" rel="nofollow noreferrer">游乐场</a></p> </answer> </body></html>

如何禁用 Quill 编辑器

我有一个显示富文本数据的模板。当用户单击“编辑”时，我将模板转换为可编辑的 Quill 编辑器，如下所示： '点击#editNote': (e, t) -> 注意= t.find '.contai...

React Quill 文本编辑器用双引号渲染数据

我正在使用 React Quill 文本编辑器将数据保存到数据库中。我面临的问题是当我检索它用“”（双引号）呈现的保存数据时。 例如：数据保存方式如下...

如何在react-quill编辑器中获取已删除的图像url

我正在使用react-quill，我想知道如何在插入编辑器后选择图像，以及如何在删除后获取已删除的图像url。 这是我的编辑器组件 导入R...

如何在flutter中的文本小部件中显示Quill控制器文本？

每当我单击 Quill Editor 的文本时，都会出现一个光标（“|”），该光标在编辑时通常可见。我不希望光标出现并且不知道如何防止它出现？ 目前我是

Quill 中的默认<p>标签可以添加样式吗？

我的目标是在工具栏中创建一个按钮，将样式添加到光标所在的默认 标签。例如： 从示例到示例... 我的目标是在工具栏中创建一个按钮，将样式添加到光标所在的默认 <p> 标签。例如： 从<p>Example</p>到<p style="color: white;">Example</p>没有嵌套格式？ 现在，我的解决方法是使用新的自定义印迹，它的作用与几乎相同 <p><custom style="color: white;">Example</custom><p> 我完全不知道该怎么做，因为我是羽毛笔新手。我花了几天时间研究羽毛笔/羊皮纸文档，但并没有 100% 理解它是如何工作的。如有任何帮助，我们将不胜感激！ 参见「ttypic」评论： 这是我的代码： const Block = Quill.import('blots/block'); class MyBlock extends Block { static create() { const node = super.create(); // Next, customize other functions node.setAttribute('style', 'margin: 0;'); return node; } } Angular 14 与 Primeng 这对我来说非常有用。 import * as QuillNamespace from 'quill'; const Block = this.Quill.import('blots/block'); class DivBlock extends Block {} DivBlock.tagName = 'DIV'; // true means we overwrite this.Quill.register('blots/block', DivBlock, true);