quill 相关问题

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

Flutter 中是否有通过 Delta 提供的 LaTeX 方程渲染方法？

我正在开发一个必须显示富文本的应用程序。所以这个富文本将来自 Quill 富文本编辑器。 Quill 以 Delta 格式导出此富文本，这基本上是一个 json

flutter latex wysiwyg quill delta

回答 1 投票 0

在 QuillJs 中的图像旁边添加文本

所以，我尝试在 QuillJs 中执行以下内容因此，为了使其工作，我需要添加 display: flex;到图像父级。那么，我该如何实现这一目标。

quill react-quill

回答 1 投票 0

如何在Quill编辑器中添加图像属性？我想添加 'alt' 和 'title' 属性

当我上传图像时，仅保存其“src”。我想添加替代文本和标题以用于 SEO 目的。我尝试在 Quill 文档中搜索模块，但找不到任何模块。

html angularjs image text-editor quill

回答 2 投票 0

如何在Vuejs中显示来自Quill的值

我在 Vue3 应用程序中使用 Quill 文本编辑器。所以我在管理面板中有我的文本编辑器，并且我将结果存储在 api 中。例如，它是 api 视图： { 描述：“< 我在 Vue3 应用程序中使用 Quill 文本编辑器。所以我在管理面板中有我的文本编辑器，并且我将结果存储在 api 中。例如，它是 api 视图： { description: "<p><strong><em>Description</em></strong></p>" } 所以描述是来自羽毛笔文本编辑器的值。所以我想在前端显示如下：<div>{{ product.attributes.description }}</div>但结果就像你在图片中看到的那样。那么我怎样才能以正确的方式显示这个粗体和斜体呢？您可以使用 v-html 指令： const app = Vue.createApp({ el: "#demo", data() { return { description: "<p><strong><em>Description</em></strong></p>" } } }) app.mount('#demo') <script src="https://unpkg.com/vue@3"></script> <div id="demo"> <div v-html="description"></div> </div> 使用 v-HTML，并且不要忘记将 ql-editor 类添加到元素中，以便正确显示您的内容。 <div class="preview ql-editor" v-html="description"></div> 如果您只显示文本，这很有效，假设您想使用 v-html 显示带有图像的内容，则不会响应地显示内容。这是我使用 Quil 编辑器 readOnly=true 解决它的方法。 <template> <v-container fluid> <div id="app"> <div id="app"> <div class="editor"> <quill-editor class="editor" v-model:content="description" theme="snow" toolbar="full" ></quill-editor> </div> </div> </div> <div class="preview"> <quill-editor v-model:content="description" :options="options"/> </div> </v-container> </template> <script> export default { data() { return { description:'', options: { debug: 'info', modules: { toolbar: null }, readOnly: true, theme: 'bubble' } } }, } </script>

vue.js vue-component vuejs3 text-editor quill

回答 2 投票 0

如何在编辑器中设置 Vue Quill Editor 增量内容

我正在开发 Nuxt 3 项目并使用 Vue Quill 编辑器。我已成功集成编辑器并能够在后端保存增量数据。现在，单击按钮（编辑按钮）我得到

vue.js nuxt.js nuxtjs3 quill vue-quill-editor

回答 1 投票 0

当我开始在其中或任何其他输入字段中键入时，react-quill 组件消失

我有一个反应应用程序，我正在使用 Quill 编辑器来创建帖子。每当我开始在任何字段（包括鹅毛笔编辑器）上输入内容时，编辑器就会完全消失。这是我的代码：导入

reactjs quill react-quill

回答 3 投票 0

如何更改占位符 iQuill js 文本编辑器的字体颜色

我正在使用 Quill js 文本编辑器，最近我发现它可以选择在其配置中设置占位符文本。 var quill = new Quill('#editor', { 主题：“雪”，占位符：“...

placeholder quill

回答 1 投票 0

在flutter中使用quill编辑器时出现错误

我正在做一个Flutter项目，我的Dart和Flutter SDK是Flutter：Flutter 3.3.10 Dart：Dart 2.18.6，我使用的是quill版本：6.4.2 但在运行该应用程序时，我收到以下错误：发射...

flutter dart quill

回答 1 投票 0

QuillJS：点击工具栏时光标跳到顶部

我一直在我的 svelte 项目中实现 Quill。但是当我按下工具栏上的按钮时，它会将光标放置在编辑器的开头，使其无法编辑中间某处的文本...

javascript html svelte quill rich-text-editor

回答 1 投票 0

如何让 Quill.js 解析包含块级元素的嵌套列表？

我把这个例子放在 Quill Playground 中，但在这里复制它。输入HTML 外部编号 para1 ... 我把这个示例放在 Quill Playground 中，但我在这里复制它。输入HTML <div id="editor"> <ol> <li> <p>Outer Numbered para1</p> <p>Outer numbered para2</p> <ol> <li>Inner Numbered List</li> </ol> </li> </ol> </div> JavaScript var quill = new Quill('#editor', { theme: 'snow' }); 输出 HTML <div class="ql-editor" contenteditable="true"> <ol> <li>Outer Numbered para1</li> <li>Outer numbered para2</li> <li class="ql-indent-1">Inner Numbered List</li> </ol> </div> 问题筑巢去哪儿了？我究竟做错了什么？如何防止嵌套消失或将其恢复？版本鹅毛笔版本1.2.4 Chrome 版本 58.0.3029.81（64 位） Ubuntu 16.04（64 位）您应该在以下情况下规范化嵌套列表值：您想在 quilljs 编辑器中插入嵌套值，这里有一些代码可能会有所帮助： function normalizeNestedList(editorValue){ if(document){ let tempEditorNode = document.createElement('div'); tempEditorNode.innerHTML = editorValue; const olElems = tempEditorNode.querySelectorAll('ol'); const ulElems = tempEditorNode.querySelectorAll('ul'); moveNestedList(olElems); moveNestedList(ulElems); return tempEditorNode.innerHTML; } } function moveNestedList(ContainerListElems){ const quillIntentConst = `ql-indent-`; let currentParentToInserted = null; for(let i=0; i< ContainerListElems.length; i++){ const containerListElem = ContainerListElems[i]; const listDepth = getMaxParents(containerListElem); if(listDepth > 0) { const containerListElemChilds = containerListElem.childNodes; for (let j = 0; j < containerListElemChilds.length; j++) { if (containerListElemChilds[j].nodeName === 'LI') { containerListElemChilds[j].setAttribute('class',`${quillIntentConst}${listDepth}`); } } insertAfter(currentParentToInserted,containerListElem.outerHTML); containerListElem.remove(); }else { currentParentToInserted = containerListElem; } } } function getMaxParents(elem){ let parentNode = elem.parentNode; let count = 0; if(parentNode !== null && typeof parentNode !== 'undefined') { let nodeName = parentNode.nodeName; while (parentNode !== null && typeof parentNode !== 'undefined' && (nodeName === 'UL' || nodeName === 'OL' || nodeName === 'LI')) { parentNode = parentNode.parentNode; nodeName = parentNode.nodeName; if(nodeName === 'UL' || nodeName === 'OL' ) { ++count; } } } return count; } function insertAfter(newNode, referenceNode) { newNode.insertAdjacentHTML('afterend', referenceNode); } 你可以调用normalizeNestedList函数我必须修改 @anztrax 提供的示例代码才能使其运行并正确处理深度。这是一个“简单”的解决方案，如果在“UL”列表项中找到“OL”（反之亦然），则完整修复将正确分解列表，以便保留数字和项目符号。 var formattedHTML = normalizeNestedList(HTML_Text); function normalizeNestedList (editorValue) { if (document) { const tempEditorNode = document.createElement('div') tempEditorNode.innerHTML = editorValue if (tempEditorNode.querySelectorAll('li ol, li ul').length) { const lists = tempEditorNode.querySelectorAll('ol, ul') moveNestedList(lists) } return tempEditorNode.innerHTML } } function moveNestedList (ContainerListElems) { const quillIntentConst = 'ql-indent-' const listsIndexesByDepth = Array.from(ContainerListElems) .map((x) => { const depth = getMaxParents(x) return { list: x, depth } }) .sort((a, b) => b.depth - a.depth) let currentParentToInserted = null for (let i = 0; i < listsIndexesByDepth.length; i++) { const containerListElem = listsIndexesByDepth[i].list if (listsIndexesByDepth[i].depth > 0) { const containerListElemChilds = containerListElem.childNodes currentParentToInserted = containerListElem.parentNode for (let j = 0; j < containerListElemChilds.length; j++) { if (containerListElemChilds[j].nodeName === 'LI' && containerListElemChilds[j].className.indexOf(quillIntentConst) === -1) { containerListElemChilds[j].setAttribute( 'class', `${quillIntentConst}${listsIndexesByDepth[i].depth}` ) } } insertAfter(currentParentToInserted, containerListElem.innerHTML) containerListElem.remove() } else { currentParentToInserted = containerListElem } } } function getMaxParents (elem) { let parentNode = elem.parentNode let count = 0 if (parentNode !== null && typeof parentNode !== 'undefined') { let nodeName = parentNode.nodeName while ( parentNode ) { parentNode = parentNode.parentNode nodeName = parentNode?.nodeName if (nodeName === 'UL' || nodeName === 'OL') { ++count } } } return count } function insertAfter (newNode, referenceNode) { newNode.insertAdjacentHTML('afterend', referenceNode) }

javascript html quill

回答 2 投票 0

在 Flutter Quill 中创建下拉菜单

我正在尝试在工具栏中创建一个类似于所附屏幕截图的下拉菜单。但是，我找不到任何组件来创建下拉列表以在

flutter dart quill

回答 1 投票 0

比较 ZIO Quill 中的 ZonedDateTime

我在尝试使用 > 基于 ZonedDateTime 进行过滤时遇到错误。它与 == 一起使用。我正在使用 scala 3.2.0 和 Quill 4.6.0。看来它应该基于 Quill 文档工作。可能会错过什么...

scala quill zio zio-quill

回答 1 投票 0

羽毛笔字体大小有问题

我正在使用 quill js 并制作一个完全响应式编辑器，该编辑器将使用视图宽度属性随容器缩放字体大小。我已经完全构建好了，除了一个问题：虽然我是...