quill 相关问题

Quill是一个跨浏览器的富文本编辑器。它具有完整的API,允许对编辑器及其内容进行细粒度访问和操作。

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

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

回答 1 投票 0

将Quill绑定到asp net core模型

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

回答 2 投票 0

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

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

回答 1 投票 0

如何通过 Quill JS 富文本编辑器集成上传文件(pdf、doc 等)?

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

回答 2 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 2 投票 0

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

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

回答 1 投票 0

提交后清除鹅毛笔编辑器

我在我的 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>

回答 0 投票 0

如何禁用 Quill 编辑器

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

回答 8 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

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);

回答 2 投票 0

如何在没有 html 标记的情况下显示 React Quill 的内容?

我设法让我的 Quill 工作,但现在我想制作一个漂亮的分屏,就像我们在这个论坛上所做的那样,但我无法弄清楚的一件事是如何将 Quill 的输入转换为漂亮的.. .

回答 11 投票 0

将道具传递给react-quill处理程序

我已经建模了一个自定义工具栏,它使用以下代码笔在光标位置插入文本: https://codepen.io/alexkrolick/pen/gmroPj?editors=0010 但是,我需要能够通过...

回答 1 投票 0

如何从 ORM 填充 Django Quill 字段

我正在尝试通过 ORM 在 django 中保存带有 Quill Field 的对象。我正在使用 PyPI 中的 django-quill-editor 模块 这是模型: 从 django_quill.fields 导入 QuillField 类产品...

回答 1 投票 0

如何使用quill2.0.0-dev.3在angular14中创建表

我的角度项目版本: “@角度/动画”:“^14.2.0”, "@Angular/cdk": "^14.2.7", “@Angular/common”:“^14.2.0”, “@Angular/com...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.