quill 相关问题

反应鹅毛笔公式和列表

我在项目中使用 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 。 在它可以通过像这样使用它来简单初始化之前： 变量...

如何在Vue3中使用Quill文本编辑器作为组件

1 - 安装 NPM / Yarn npm install @vueup/vue-quill@latest --save # 或者纱线添加@vueup/vue-quill@latest 2 - 在组件中的使用 从 '@vueup/vue-quill' 导入 { QuillEditor } 导入'@vueup/vue-

如何让 <hr> 在 React 羽毛笔中被识别？

我正在尝试实现一个反应羽毛笔钩子，但无法将包含 hr 标签的字符串传递到 value 属性中。 props.val === '你好' 网上的例子不... 我正在尝试实现一个 React quill hook，但无法将包含 hr 标签的字符串传递到 value 属性中。 props.val === '<p>hello</p><h1>' 网上的示例并没有真正涉及使用 quill 作为钩子，但我想使用类似于现在设置的方式来尝试它。有没有一种好方法可以像这样在钩子中实现分隔符（hr）？这是我迄今为止尝试过的： import 'react-quill/dist/quill.snow.css' import { Grid, LinearProgress } from '@material-ui/core' import React, { useEffect, useRef, useState } from 'react' import { Quill } from 'react-quill' var Embed = Quill.import('blots/block/embed') class Hr extends Embed { static create(value) { return super.create(value) } } Quill.register({ 'formats/hr': Hr, }) export function TextEditor(props) { const [editor, setEditor] = useState(<LinearProgress />) let quillRef = null // Quill instance const [reactQuillRef, setReactQuillRef] = useState(useRef(null)) // ReactQuill component Hr.blotName = 'hr' Hr.className = 'hr' Hr.tagName = 'hr' var customHrHandler = function() { // get the position of the cursor var range = 0 console.log(range) if (range) { // insert the <hr> where the cursor is quillRef.insertEmbed(range, '<hr>', 'null') } } const textEditorModuleSettings = { toolbar: [ [{ header: [] }], [ 'bold', 'italic', 'underline', 'strike', { color: [] }, { background: [] }, ], [ { list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }, ], ['link', 'clean'], [ { container: '#toolbar', handlers: { hr: customHrHandler, }, }, ], ], } useEffect(() => { import('react-quill') .then(res => { const Quill = res.default console.dir(res) setEditor( <Quill className={props.className} maxLength={props.maxLength || 1500} modules={props.modules || textEditorModuleSettings} onChange={props.change} ref={el => { setReactQuillRef(el) }} theme={props.theme || 'snow'} value={props.val} /> ) }) .catch(console.log) }, []) useEffect(() => { if (!reactQuillRef.current) { reactQuillRef.current = true } else { attachQuillRefs() } if (reactQuillRef.editor) { quillRef = reactQuillRef.getEditor() //quillRef.insertEmbed(0, 'html', '<hr>') } }, [reactQuillRef, quillRef]) return editor } 一些相对但不完全是答案： https://quilljs.com/guides/cloning-medium-with-parchment/#dividers 我尝试过，它有助于将 渲染为空行，不完全是粗体分隔线，但比根本不渲染要好。

flutter_quill 错误：找不到类型“DragSelectionUpdateCallback””

我收到此错误。 在 iPhone 13 上以调试模式启动 lib/main.dart... 库/main.dart:1 Xcode 构建完成。 5.6秒 无法构建 iOS 应用程序 错误（Xcod...

Django - 将 html 数据保存到 quillfield 中

我有一个模型 产品类（型号.型号）： 描述 = QuillField(null=True, 空白=True) 在 django 视图中如何保存 html 数据？ 产品 = Product.objects.get(id=...) 产品描述...

如何向 vue-quill 添加羽毛笔表情符号

我想将表情符号添加到我的鹅毛笔工具栏我看到了 vue quill 的文档并尝试按照我的理解进行操作，但我在我的鹅毛笔工具栏上没有看到任何内容 https://vueup.github.io/vue-quill/