quill 相关问题

如何将 Wiris 或 Mathjax 添加到 Quill 编辑器

如何将 Wiris 或 Mathjax 添加到 Quill 编辑器？并使用它？ 或者如何将 Quill 编辑器中的公式选项转换为 Wiris (Mathjax)？

React Quill 粘贴文本的字符限制

我通过以下方式对react-quill中输入的字符进行了限制 常量handleChange =（文本）=> { const value = text.substring(0, maxLength); onChange(值); }; 我通过以下方式对react-quill中输入的字符进行了限制 const handleChange = (text) => { const value = text.substring(0, maxLength); onChange(value); }; <ReactQuill value={value} onChange={(text) => handleChange(text)} /> 问题是，如果我在粘贴文本后删除任何字符（通过按退格键），编辑器会在粘贴文本的末尾添加一些奇怪的符号（看起来像 HTML 实体的一部分）。 这是一个例子： 我粘贴了一条长绳子，它在应该的地方被切断了。字符串是 <p>A game known as "football" was played 这就是我删除一个字母后变成的样子（不一定是字符串中的最后一个字母） <p>A game known as "football" was playe< 然后我再删除两个并得到 <p>A game known as "football" was pla&am 因此，字符并没有被删除，而是变成了 HTML 标签/实体。 我还尝试修改 handleChange 函数，以便它删除 HTML 标签和实体。 const handleChange = (text, source) => { if (source === 'api') { return; } const value = text.replace(/<\/?[^>]+(>|$)/g, '').substring(0, maxLength); onChange(value); }; 但是即使没有超出限制，它也不让我输入空格。 我的问题是如何避免这种情况，以及是否有更好的方法在 react-quill 中引入字符限制？ 我建议你检查文本编码是如何在各处指定的（Web服务器、浏览器、内存对象中的js或打字稿）。 我花了很多时间调查这个“错误”，但就我而言，它是由网页中的文本编码差异引起的。删除三字节序列中的一个字符可能会生成与非拉丁字母表完全不同的字形。

无法修补 PrimeNG p 编辑器组件的值

我创建了一个使用 p-editor 元素来编写富格式文本的表单，但我遇到了一个问题，编辑器创建并提交富文本，但是当我们想用...更新表单时

如何在鹅毛笔编辑器工具栏中实现工具提示

我们在 Ionic 4 应用程序中使用“quill”：“1.3.7”版本的 quill 编辑器。我们需要显示工具栏选项的工具提示。是否可以为工具栏启用工具提示...

我无法在 Prime React 编辑器中渲染数据

b 静态数据也不会在 PrimeReact 编辑器中呈现。后端有数据，数据正常，但没有显示在编辑器上 我试图渲染数据以到达

如何添加模块？

首先，我是法国人，所以请为我糟糕的英语道歉，二十年前我也有过一次严重的中风，所以对我来说理解新工具是相当困难的（尽管如此，我仍然有

react-quilljs 状态改变时不重新渲染

这是我使用react-quilljs的quill配置 函数 QuillEditor({ 值, setValue }) { const { quill, quillRef, Quill } = useQuill({ 模块：{ blotFormatter：{} }， }); 如果（鹅毛笔&...

ReactQuill imageHandler 函数无法在文本编辑器中插入图像

我试图限制鹅毛笔只允许一张图像，并且当上传图像时，它会自动添加换行符，但是当我运行代码时，鹅毛笔的输入框在

Quill - after.appendChild 不是函数

这是代码沙盒复制品。 https://codesandbox.io/s/intelligent-chihiro-9rp0d?file=/src/index.js:1285-1329 我的应用程序中有一个位置，我需要在其中插入

如何使用简单的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", “鹅毛笔”：...