quill 相关问题

如何让 <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/

dart - 如何在 Quill 文本编辑器 (Flutter) 中监听文本更改

我只熟悉HTML/CSS/JS，以及dart/flutter的基础知识 开发人员级别：初级 项目类型和语言：我正在使用 flutter 为自己开发一个笔记应用程序。 我的目标是拯救我的n...

向 Quilljs 编辑器添加脚注（或页边注释等）

我正在寻找一种向 QuillJS.com 编辑器添加脚注/尾注功能的方法。我的要求是注释“文本”本身仍然可以像文档文本一样进行编辑 - 隐藏我...

Quill 文本编辑器如何使用 JQuery 创建实例后

我使用 Quill 文本编辑器作为我网站的文本编辑器，网站选项之一是创建动态文本编辑器，定义 Quill 编辑器的函数如下所示： 函数 quillDefine(

使用 NextJS 从 React Quill 库导入“ui/icons”时未定义获取文档

一切都很好，直到我导入 Quill.import('ui/icons') 来覆盖库的默认图标。它返回“文档未定义”。有没有什么办法解决这一问题？ 导入{圣...

ChromeWeb 中 FlutterQuill quill_toobar 无法实现插入图片按钮？

我无法使用 Quill 实现从 url 插入图像。我捕获了一些错误： 导入'dart：转换'； 导入 'dart:io'; 导入'包：flutter/foundation.dart'; 导入'包：flutter/material。

如何将 tailwindcss 实用程序类添加到 Quill 的文本对齐下拉列表中？

我在项目中使用Tailwindcss，它使用text-left、text-center、text-right和text-justify来对齐文本。 然而，Quill 添加了 ql-align-left、ql-align-center、ql-align-right 和 ql-align-

如何将默认字体大小选择器与自定义 Quill 工具栏一起使用？

普通/默认的 Quill 编辑器使用这种尺寸编辑器： 我正在使用 Quill 提供的工具构建自定义工具栏。看起来像这样： const 工具栏选项 = [ ...

有什么方法可以加快flutter中Quill HTML编辑器的加载时间吗？

我在我的 flutter 应用程序中使用 QuillHtmlEditor 包，每当我使用编辑器导航到页面时，文本编辑器的加载大约需要 200-500 毫秒。有什么办法可以加快速度吗

如何在flutter quill中添加表格？

有没有办法在flutter_quill中添加用户可以给出的n列m行的表格？ 我现在正在构建一个使用编辑器 [flutter_quill] 的应用程序（https://pub.dev/packages/flutter...

如何创建与示例中所示完全相同的 QuillJS 工具栏？

在此页面顶部，据称给出了如何创建工具栏来控制字体、大小、粗体、斜体、下划线、删除线、文本颜色、背景颜色、列表、公牛...

如何将RTL版本添加到Quild Editor？在 vuejs 3 中

我想使用Quild编辑器Bubble Version进行rtl项目 我阅读了 Quild 文档但没有得到结果 这对我来说真的很重要。如果您有 Quil 以外的编辑建议，

如何在 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 中的图像对齐问题。文本对齐效果很好，但图像对齐行为却出乎意料。我正在使用以下代码