quill 相关问题

如何使用简单的javascript在Quill中设置格式列表（有序，项目符号），缩进（入，出），文本颜色，背景文本颜色

我想在 Quill 文本编辑器中设置列表的格式（有序、项目符号）、缩进（入、出）、文本颜色、背景文本颜色。 我用 this.quill.format('list',true) 这个函数来格式化列表...

鹅毛笔移动自定义属性

我在 Angular 13 项目中使用 Quill (v.2.0.0) 和 quill-better-table (v.1.2.10)。 我正在尝试向表标记添加自定义属性，例如 我在 Angular 13 项目中使用 Quill (v.2.0.0) 和 quill-better-table (v.1.2.10)。我正在尝试向表标签添加自定义属性，例如<table class="quill-better-table" custom-attribute="test" style="width: 100px;"> 一切似乎都正常，与 quill 内部 html 相对应的正确字符串保存在我的数据库中，并且还在表标记中包含我的自定义属性。然而，当我重新加载内容（因此正在阅读）时，Quill 会将我的属性剪切或移动到 col 标签，无论我设置的范围如何：<table class="quill-better-table" style="width: 100px;"> <colgroup> <col width="100" custom-attribute="test"> </colgroup> ... 这是我的 Quill 配置：const Parchment = Quill.import('parchment'); const customAttribute = new Parchment.Attributor('custom-attribute', 'custom-attribute', { scope: Parchment.Scope.BLOCK, whitelist: ['test'] }); Quill.register(customAttribute); Quill.register({ 'modules/better-table': QuillBetterTable }, true); this.quill = new Quill('#editor-container', { readOnly: this.editDisabled, modules: { toolbar: '#toolbar', table: false, 'better-table': {}, keyboard: { bindings: QuillBetterTable.keyboardBindings } }, theme: 'snow' }); 这里我添加了表和属性：let tableModule: any = this.quill.getModule('better-table'); tableModule.insertTable(2, 2); let table = tableModule.getTable(); table[0].domNode.setAttribute('custom-attribute', 'test'); 我希望 Quill 能够正确读取属性，而不需要剪切或移动它 我不明白为什么，但我通过写这个解决了它： this.quill.root.innerHTML = html; 而不是： const quillContent = this.quill.clipboard.convert({ html: html }); this.quill.setContents(quillContent, 'silent'); 在此处阅读 quillenter 代码的内容

选择新语言时，ngx 鹅毛笔占位符不会改变

对于学校项目，我们使用 Angular v4.4.6、ng2-translate 进行翻译，使用 [email protected] 进行文本编辑器。当我像这样使用占位符属性时： 对于学校项目，我们使用 Angular v4.4.6、ng2-translate 进行翻译，使用 [email protected] 进行文本编辑器。当我像这样使用占位符属性时： <quill-editor placeholder="{{'Topic.new.quill-placeholder' | translate}}"...></quill-editor> 然后我的占位符采用当前语言的值，但是当我选择新语言时，我的占位符不会改变。 我不知道为什么，想知道这个问题是否有解决方案？ 注意：到目前为止（7 个月后）您应该已经找到了解决方案。 但我认为您缺少的是在框中设置占位符。 <quill-editor [placeholder]="'Topic.new.quill-placeholder'|translate"...></quill-editor> 这应该可以解决上面的问题。 动态更改 Quill 占位符提供的解决方案对我有用： quill.root.dataset.placeholder = 'Your new placeholder'; 在 Angular 中，你的鹅毛笔代码可能是这样的： let editor = this.container.nativeElement.querySelector('#editor'); this.editor = new Quill(editor, { theme: 'snow', placeholder: this.placeholder }); 你的占位符属性可能是这样的： @Input() get placeholder() { return this._placeholder; } set placeholder(plh) { this._placeholder = plh; this.stateChanges.next(); } public _placeholder: string; 因此，您需要做的是在属性设置器中添加一些代码来更新占位符，如下所示： set placeholder(plh) { this._placeholder = plh; this.stateChanges.next(); if (this.editor != null) { this.editor.root.dataset.placeholder = this._placeholder; } }

有没有办法在 primeNg 的 p-editor 元素的工具栏中选择创建表格？

我在我的 Angular 项目 (14.2.0) 中使用 primeNg 库。 其中一个组件使用 p-editor 来创建模板，它具有我需要的选项，除了“创建表”之外。 &...

如何设置flutter_quill包中的默认Textstyle？

我的要求是在我的应用程序中强制颤动特定的文本样式，但我在 QuillTool.basic 中找不到该选项 列 buildEditor() { 返回列（ 孩子们： [ 展开（ ...

反应鹅毛笔公式和列表

我在项目中使用 React-quill 并遇到了 2 个问题 每当我使用有序和无序列表（项目符号和数字）编写一些内容，然后保存到我的数据库，然后获取 wh...

Quill 2.0.0 beta4 自动语法高亮不起作用

我通读了 quill 的语法高亮指南，但无法让它工作，因为 quill 一直抱怨 highlight.js 没有首先加载。 我在网上尝试了很多解决方案，但没有一个

Quilljs 通过按钮在光标位置插入图像单击转到顶部

我尝试在光标位置插入图像。 复制步骤 单击光标中的任意行 单击插入 预期行为： 在当前光标位置插入图像 空调...

在 Vue 3 环境中使用 Quill 库以像素 (px) 为单位指定字体大小，例如 (2px, 4px, 8px)

我在使用 Quill 库自定义字体大小（以像素 (px) 为单位）时遇到困难。下面是 HTML 和 JavaScript 代码 我在使用 Quill 库自定义字体大小（以像素 (px) 为单位）时遇到困难。下面是 HTML 和 JavaScript 代码 <template> <QuillEditor ref="myQuillEditor" @blur="onEditorBlur" @focus="onEditorFocus" @ready="onEditorReady" @text-change="onEditorChange" class="form-control" style="height: 800px;" :toolbar="toolbar" required /></template> import { QuillEditor } from '@vueup/vue-quill' import '@vueup/vue-quill/dist/vue-quill.snow.css'; import Quill from 'quill'; let SizeStyle = Quill.import('attributors/style/size'); SizeStyle.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px', '24px', '30px', '32px','36px','48px','60px','72px','96px']; Quill.register(SizeStyle, true); export default { components: { QuillEditor }, data() { return {toolbar: [ ['bold', 'italic', 'underline', 'strike'], [{ 'list': 'ordered' }, { 'list': 'bullet' }], [{ 'background': [] }, { 'color': [] }], [{ 'font': [] }], [{ 'script': 'sub' }, { 'script': 'super' }], [{ 'indent': '-1' }, { 'indent': '+1' }], [{ 'direction': 'rtl' }], [{ 'size': [false, '10px', '12px', '14px', '16px', '18px', '20px', '24px', '30px','32px','36px','48px','60px','72px','96px'] }], [{ 'header': [1, 2, 3, 4, 5, 6, false] }], [{ 'align': [] }], ['clean'], ['link', 'image', 'video'] ] } }, mounted() { this.$refs.myQuillEditor.quill.on('text-change', () => { let range = this.$refs.myQuillEditor.quill.getSelection(); if (range) { let format = this.$refs.myQuillEditor.quill.getFormat(range); let sizeDropdown = document.querySelector('.ql-size .ql-picker-label'); if (sizeDropdown) { sizeDropdown.textContent = format.size || 'Normal'; } } }); }, }; 我进行了尝试，结果如下。但是，选择字体大小时，文本仅显示为“正常”。 这是一个 CSS 问题。在 Quill for 下拉列表中，选项的值在 ::before 中命名。除了 ['small', 'large', 'huge'] 之外，其他值默认为 'Normal' 要修复它，您可以覆盖“正常” 示例： .ql-picker-item[data-value='10px']::before, .ql-picker-label[data-value='10px']::before { content: '10px' !important; } .ql-picker-item[data-value='12px']::before, .ql-picker-label[data-value='12px']::before { content: '12px' !important; } 相应地添加您的自定义值 快乐编码:)

鹅毛笔工具栏多个图像选择

我只能使用工具栏图像选择按钮选择一张图像。 使用图像放置模块，我可以一次放置许多图像，但想知道有什么方法可以选择多个图像...

Vue3 vite中使用‘quill editor’无法绑定数据模型（前端开发初学者）

这是我的代码案例研究： 依赖关系 “依赖项”：{ "@vueup/vue-quill": "^1.2.0", "element-plus": "^2.6.3", “鹅毛笔”：...

使用 React.js 将 HTML 标记从富文本编辑器保存到 MongoDB

我一直在尝试创建自己的博客应用程序，用户可以在其中创建帖子，并且我设法插入了 Quill 富文本编辑器。 它成功更新了一段状态，但我收到的数据......

Nextjs：如何将 quill-blot-formatter 注册到仅在客户端渲染上动态导入的react-quill？

我仅使用 ssr: false 在客户端动态导入react-quill。我的功能组件工作正常，我想将 quill-blot-formatter 包添加到......的模块部分

鹅毛笔编辑器工具栏下拉列表未显示

这是react-quill编辑器的配置。 const 工具栏选项 = [ [{ '尺寸': ['小', false, '大', '巨大'] }], [{ '标题': 1 }, { '标题': 2 }], [‘粗体’、‘斜体’、‘下划线’、‘...

ngx-quill 安装问题

我在编译我的项目时遇到这个错误 错误：node_modules/ngx-quill/lib/quill-editor.component.d.ts:3:21 - 错误 TS2614：模块“quill”没有导出成员“Delta”。你有没有...

quill-mention 选择事件。如何从 Quill Mention 中获取选定的提及

我使用 Quill 提及 ngx-quill。 每个文本编辑和格式设置都有效。 我找不到 QUILL Mention LIST 的 onSelect 事件。 我最终想要的是推动提到的ob...

使用 Vue.js 3 在 QuillJS 编辑器中删除文本时出错：未捕获类型错误：无法读取 null 的属性（读取“偏移”）

我在 Vue.js 3 项目（选项 API）上初始化了 QuillJS 编辑器，以下是组件中的代码： 从 '@fortawesome/vue-fontawesome' 导入 { FontAwesomeIcon } 导入</desc> <question vote="0"> <p>我在 <strong>Vue.js 3</strong> 项目（<strong>option API</strong>）上初始化了 <strong>QuillJS</strong> 编辑器，以下是组件中存在的代码：</p> <pre><code>&lt;script&gt; import { FontAwesomeIcon } from &#39;@fortawesome/vue-fontawesome&#39; import Quill from &#39;quill&#39; export default { name: &#39;AppChatContainer&#39;, components: { FontAwesomeIcon }, props: { messages: { type: Array, required: true, default: () =&gt; [] }, isSending: { type: Boolean, default: false } }, emits: [&#39;new-message&#39;], data() { return { quill: null } }, mounted() { this.quill = new Quill(&#39;#message&#39;, { theme: &#39;bubble&#39;, modules: { toolbar: [ [&#39;bold&#39;, &#39;italic&#39;, { color: [] }], [{ list: &#39;ordered&#39; }, { list: &#39;bullet&#39; }] ] } }) }, methods: { handleSubmission() { const message = this.quill.getContents() this.$emit(&#39;new-message&#39;, message) // this.quill.setContents([{ insert: &#39;\n&#39; }]) // &lt;= Error here // this.quill.setText(&#39;&#39;) // &lt;= Error here this.quill.deleteText(0, this.quill.getLength()) // &lt;= Error here }, convertDeltaToHtml(delta) { const tempQuill = new Quill(document.createElement(&#39;div&#39;)) tempQuill.setContents(delta) return tempQuill.root.innerHTML } } } &lt;/script&gt; &lt;template&gt; &lt;form class=&#34;h-100 position-relative&#34; @submit.prevent=&#34;handleSubmission&#34;&gt; &lt;div class=&#34;flex-grow-1 overflow-y-scroll&#34;&gt; &lt;div v-for=&#34;message in messages&#34; :key=&#34;message.id&#34; :class=&#34;`message mb-4 ${message.isAuthor ? &#39;author&#39; : &#39;&#39;} ${message.isSending ? &#39;sending&#39; : &#39;&#39;}`&#34; &gt; &lt;div class=&#34;content&#34; v-html=&#34;convertDeltaToHtml(message.content)&#34; /&gt; &lt;small v-if=&#34;message.isSending&#34; class=&#34;text-gray-700 fw-light d-block mt-1 ms-2 me-3&#34;&gt; Envois en cours... &lt;/small&gt; &lt;small v-else class=&#34;text-gray-700 fw-light d-block mt-1 ms-2 me-3&#34;&gt; {{ message.isAuthor ? &#39;Vous&#39; : message.authorName }}, le {{ message.date }}&lt;/small &gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;message-container&#34;&gt; &lt;div id=&#34;message&#34; /&gt; &lt;button type=&#34;submit&#34; class=&#34;btn btn-amsom-green&#34; :disabled=&#34;isSending&#34;&gt; &lt;font-awesome-icon v-if=&#34;!isSending&#34; icon=&#34;paper-plane&#34; /&gt; &lt;div v-else class=&#34;spinner-border spinner-border-sm&#34; role=&#34;status&#34;&gt; &lt;span class=&#34;visually-hidden&#34;&gt;Envois en cours...&lt;/span&gt; &lt;/div&gt; &lt;/button&gt; &lt;/div&gt; &lt;/form&gt; &lt;/template&gt; &lt;style scoped&gt; // ... &lt;/style&gt; </code></pre> <p>当我提交表单时，会调用 <pre><code>handleSubmission()</code></pre> 方法。当我尝试删除编辑器内容时出现此错误：</p> <pre><code>Uncaught TypeError: Cannot read properties of null (reading &#39;offset&#39;) at quill.js?v=b3144345:12600:26 at Array.map (&lt;anonymous&gt;) at Proxy.normalizedToRange (quill.js?v=b3144345:12597:31) at Proxy.getRange (quill.js?v=b3144345:12586:25) at Proxy.update (quill.js?v=b3144345:12723:43) at Proxy.update (quill.js?v=b3144345:13796:20) at Proxy.getSelection (quill.js?v=b3144345:13690:10) at Proxy.modify (quill.js?v=b3144345:13906:44) at Proxy.deleteText (quill.js?v=b3144345:13553:19) at Proxy.handleSubmission (AppChatContainer.vue:47:18) </code></pre> <p>我尝试了多种从编辑器中删除内容的方法，但我总是遇到同样的问题......</p> <pre><code>handleSubmission() { const message = this.quill.getContents() this.$emit(&#39;new-message&#39;, message) // this.quill.setContents([{ insert: &#39;\n&#39; }]) // this.quill.setText(&#39;&#39;); this.quill.deleteText(0, this.quill.getLength()) }, </code></pre> </question> <answer tick="false" vote="0"> <p>我找到了解决方案，但我认为这不是从编辑器中删除内容的好方法：</p> <pre><code>handleSubmission() { const message = this.quill.getContents() this.$emit(&#39;new-message&#39;, message) this.quill.root.innerHTML = &#39;&#39; }, </code></pre> <p>我用过<pre><code>this.quill.root.innerHTML = &#39;&#39;</code></pre></p> </answer> </body></html>

有没有办法覆盖Quill的svg图标？

我正在使用最新版本的 quill.js，并且想知道是否有一种方法可以覆盖 Quill 在生成编辑器工具栏时使用的 svg 图标（对于气泡主题，如果这很重要的话。） 我试过了

QuillJS - 粘贴到编辑器时删除格式

我之前使用过https://github.com/quilljs/quill/issues/1184#issuecomment-403657128来确保没有人可以在QuillJS编辑器中粘贴格式化文本，因为我希望人们只能我们.. .

Quill.js 2.0.0 图像调整大小插件可用性

我只是想知道是否有人已经将 quill 更新到最新的 2.0.0rc 版本并正在使用插件 image-resize 。 在它可以通过像这样使用它来简单初始化之前： 变量...