quill 相关问题

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

如何在没有 html 标记的情况下显示 React Quill 的内容？

我设法让我的 Quill 工作，但现在我想制作一个漂亮的分屏，就像我们在这个论坛上所做的那样，但我无法弄清楚的一件事是如何将 Quill 的输入转换为漂亮的.. .

javascript reactjs quill

回答 11 投票 0

将道具传递给react-quill处理程序

我已经建模了一个自定义工具栏，它使用以下代码笔在光标位置插入文本： https://codepen.io/alexkrolick/pen/gmroPj?editors=0010 但是，我需要能够通过...

javascript reactjs quill react-quill

回答 1 投票 0

如何从 ORM 填充 Django Quill 字段

我正在尝试通过 ORM 在 django 中保存带有 Quill Field 的对象。我正在使用 PyPI 中的 django-quill-editor 模块这是模型：从 django_quill.fields 导入 QuillField 类产品...

django django-orm quill

回答 1 投票 0

如何使用quill2.0.0-dev.3在angular14中创建表

我的角度项目版本： “@角度/动画”：“^14.2.0”， "@Angular/cdk": "^14.2.7", “@Angular/common”：“^14.2.0”， “@Angular/com...

angular typescript quill

回答 1 投票 0

没有工具栏的primeng编辑器

如何关闭 primeNG 编辑器上的工具栏？我正在获取编辑器 (onInit) 的编辑器实例。然而下面的似乎不起作用。我从 quilljs 看到的例子似乎都......

editor toolbar primeng quill

回答 4 投票 0

如何在鹅毛笔工具栏中添加自定义图标

我在我的 React Native 应用程序中使用 quill 作为文本编辑器。我想在羽毛笔工具栏中添加自定义工具栏图标，有什么解决方案吗？我的代码是：鹅毛笔.html 我在我的 React Native 应用程序中使用 quill 作为文本编辑器。我想在羽毛笔工具栏中添加自定义工具栏图标，有什么解决方案吗？我的代码是： quill.html <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <style> html,body { height: 100%; width: 100%; margin: 0; padding: 0; background-color:rgba(0, 0, 0, 0); } #editor { height: calc(100% - 72px); background-color:rgba(0, 0, 0, 0); } </style> <link rel="stylesheet" type="text/css" href="https://cdn.quilljs.com/1.3.7/quill.snow.css"></link> </head> <body> <div id="editor"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.min.js" integrity="sha512-P2W2rr8ikUPfa31PLBo5bcBQrsa+TNj8jiKadtaIrHQGMo6hQM6RdPjQYxlNguwHz8AwSQ28VkBK6kHBLgd/8g==" crossorigin="anonymous" referrerpolicy="no-referrer" ></script> <script> const quill = new Quill('#editor', window.options); quill.on('text-change', function (delta, oldDelta, source) { const html = document.querySelector('#editor').children[0].innerHTML; const message = { type: 'onChange', message: html, }; window.ReactNativeWebView.postMessage(JSON.stringify(message)); }); </script> </body> </html> QuillEditor.tsx import React from 'react' import { Dimensions, Platform, ViewStyle } from 'react-native' import { WebView, WebViewMessageEvent } from 'react-native-webview' type Props = { style?: ViewStyle defaultValue?: string options?: any onChange?: (html: string) => void } const defaultValue = [[{ header: [1, 2, false] }], ['bold', 'italic', 'underline'], ['image', 'code-block']]; const Quill = (props: Props) => { const options = JSON.stringify({ placeholder: 'Type here...', modules: { toolbar: defaultValue, }, ...props.options, theme: 'snow', }) const injectedJavaScriptBeforeContentLoaded = `window.options=${options}` const injectedJavaScript = `document.querySelector('#editor').children[0].innerHTML="${props.defaultValue}"` const onMessage = (e: WebViewMessageEvent) => { const data = JSON.parse(e.nativeEvent.data) if (data.type === 'onChange') { props.onChange(data.message) } } return ( <WebView onMessage={onMessage} source={Platform.OS === 'ios' ? require('../../assets/quill.html') : { uri: 'file:///android_asset/quill.html' }} javaScriptEnabled injectedJavaScriptBeforeContentLoaded={injectedJavaScriptBeforeContentLoaded} injectedJavaScript={injectedJavaScript} style={{ height: Dimensions.get('window').height - 42, width: Dimensions.get('window').width, ...props.style }} /> ) } Quill.defaultProps = { style: {}, defaultValue: '', onChange: () => {}, options: {}, } export default Quill app.js import React from 'react'; import { SafeAreaView, StyleSheet } from 'react-native'; import QuillEditor from '../components/QuillEditor' export default function App() { const onChange = (html) => { console.log(html) } return ( <SafeAreaView style={styles.root}> <QuillEditor style={{ height: 300 }} options={{ placeholder: 'Type here...', }} onChange={onChange} /> </SafeAreaView> ); } const styles = StyleSheet.create({ title: { fontWeight: 'bold', alignSelf: 'center', paddingVertical: 10, }, root: { flex: 1, }, editor: { flex: 1, padding: 0, borderColor: 'gray', borderWidth: 1, marginHorizontal: 30, marginVertical: 5, backgroundColor: 'white', }, }); 我找到了解决方案。 quill.html <html> <head> <script src="https://cdn.quilljs.com/1.3.7/quill.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.quilljs.com/1.3.7/quill.bubble.css"></link> <link rel="stylesheet" type="text/css" href="https://cdn.quilljs.com/1.3.7/quill.snow.css"></link> <script src="https://cdn.jsdelivr.net/gh/T-vK/DynamicQuillTools@master/DynamicQuillTools.js"></script> </head> <body> <div id="editor"></div> <script> // Create a Quill Editor instance with some built-in toolbar tools const quill = new Quill('#editor', { theme: 'snow', modules: { toolbar: { container: [ ['bold', 'italic', 'underline', 'strike'], ['blockquote', 'code-block'], [{ 'header': 1 }, { 'header': 2 }], [{ 'list': 'ordered' }, { 'list': 'bullet' }], [{ 'script': 'sub' }, { 'script': 'super' }], [{ 'indent': '-1' }, { 'indent': '+1' }], [{ 'direction': 'rtl' }], [{ 'size': ['small', false, 'large', 'huge'] }], [{ 'header': [1, 2, 3, 4, 5, 6, false] }], [{ 'color': [] }, { 'background': [] }], [{ 'font': [] }], [{ 'align': [] }], ['clean'], ] } } }) // Add a custom Button to the Quill Editor's toolbar: const myButton = new QuillToolbarButton({ icon: `<svg viewBox="0 0 18 18"> <path class="ql-stroke" d="M5,3V9a4.012,4.012,0,0,0,4,4H9a4.012,4.012,0,0,0,4-4V3"></path></svg>` }) myButton.onClick = function(quill) { const { index, length } = quill.selection.savedRange const selectedText = quill.getText(index, length) const newText = selectedText.toUpperCase() quill.deleteText(index, length) quill.insertText(index, newText) quill.setSelection(index, newText.length) } myButton.attach(quill) </script> </body> </html> 经过验证的答案似乎使用以下库 https://github.com/T-vK/DynamicQuillTools 自述文件提供了清晰的示例

react-native quill react-quill

回答 2 投票 0

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