quill 相关问题

我在我的 nuxt 3 项目上使用 vue-quill。我将它包装在一个组件中，一切正常，但在发布请求后，编辑器仍然显示内容。应用程序编辑器导入 { </desc> <question vote="0"> <div> </div> <p>我在我的 nuxt 3 项目上使用 vue-quill。我将它包装在一个组件中，一切正常，但在发布请求后，编辑器仍然显示内容。</p> <p><strong>应用程序编辑器</strong></p> <pre><code><script setup> import { QuillEditor } from '@vueup/vue-quill' import '@vueup/vue-quill/dist/vue-quill.snow.css' const props = defineProps({ modelValue: { type: String, default: '', }, taskId: { type: Number, default: null, }, initialContent: { type: String, default: '', }, placeholder: { type: String, default: '', }, taskmembers: { type: Array, required: true, }, }) const emit = defineEmits(['update:modelValue', 'on-editor-ready']) const editor = ref() const toolbar = [ [{ header: [1, 2, 3, 4, 5, 6, false] }], ['bold', 'italic', 'underline', 'strike'], [{ list: 'ordered' }, { list: 'bullet' }], ['link', 'image'], ['clean'], ] const onUpdate = () => { const content = editor.value.getHTML() emit('update:modelValue', content) } const onEditorReady = (event) => { emit('on-editor-ready', event) } </script> <template> <div> <QuillEditor ref="editor" theme="snow" :toolbar="toolbar" content-type="html" :content="props.modelValue" placeholder="Say something..." @ready="onEditorReady" @update:content="onUpdate" /> </div> </template> </code></pre> <p>在我的页面上我使用它如下</p> <p><strong>任务评论</strong></p> <pre><code><script setup> import AppEditor from '@/components/AppEditor.vue' const postComment = async () => { const task = props.taskId const url = `/tasks/${task}/comments` loading.value = true try { await useBaseFetch(url, { method: 'POST', body: JSON.stringify({ comment: message.value, }), }) loading.value = false message.value = '' editor.value.setContents([]) //trying to clear the content currentPage.value = 1 getComments() } catch (error) { loading.value = false if (error.response && error.response.status === 422) { console.log('error', error) } else { errorMsg.value = 'An error occured.' } } } </script> <template> <Form @submit="onSubmit"> <AppEditor ref="editor" v-model="message" :taskmembers="members" :task-id="props.taskId" /> <span v-if="errorMessage && meta.touched" class="text-red-500 text-sm normal-case">{{ errorMessage }}</span> <div class="flex gap-2 mt-4"> <ElementsAppButton size="small" type="submit" :loading="loading"> Save </ElementsAppButton> </div> </Form> </template> </code></pre> </question> <answer tick="false" vote="0"> <p>vue-quill 似乎不喜欢 <pre><code>message.value = ''</code></pre> 中的空字符串。</p> <p>相反，您可以将其设置为空段落<pre><code><p></p></code></pre>或<pre><code><p><br></p></code></pre>，这就是quill用作空值的方式：</p> <pre><code>message.value = '<p></p>' </code></pre> <p>这是在<a href="https://play.vuejs.org/#eNqtVU1v20YQ/SsLXugAFNnYaQ8qLTgNDDRFk6Zx2ouoA0WOLMbLXXZ3KVsQ9N/79oMiLQQuWlQHgTufb97s7Byit12X7nqK5lGuK9V0hmkyfbcoRNN2Uhl2YIo27Mg2SrYshmn840kH59u6MVIFbZqdJDZoXIhCVFJow1rSurwndm2jXcSlrjfxq1EtxV2/bhsD/cUrdr1gh0KwwSndlby3rnHeLfKsWyDu0frmmYcMsDgYajteGsKJsXwjVctutIuadop2JMx1EQ2JisiZ4ZePRQAaTMgdiojtZq2siUMUgEA2N6V+aKldk9JQLFeDbNbUOL+5xDk7hV73xkjBzL4jKD0YZPYQ8syrPd7MAnaFWM8PPuGc5YC+OBwCgOMR5UNgSz+VGyWRb8esLbv0q5YCzXT8FUGhi2juGbWyG3Sm7zL8z/7qG86tsoi2xnR6nmVVLRADZTc7lQoymeja7Nzl5nV6mX6X1Y02ozAl3c7WSj5qUghRRDYh+nQEQKPR501zfwavkm3XcFK/dabBPXgGs+RcPv7iZEb1lAzyakvVwzfkX/WTr+STIiDYoVsnnSnVPYF5q769+0hP+D4p0eSew/oF5WfSkvcWozf7qRc1YE/sHNr3ju1G3H/Rt0+GhB6KskAdG86+iMDZuxdKH+FepVcTFp8N1wsTi3s8ndfJKP9uGxVu+2By3tzJ1HZKdhqDV9OmEfTJni78ZNrB+NOO5Qm2veRzdmcU6g+0wK3suZmzOHYSX76dlvf1md/H3o7UuZ/oOZ94NqIxTcnfSQFyof63mTEvFW0lr0n9N9hh8M+c3ypV7oOvInCoCOWdLqd1P07eOvLvnOf0Fgd9sYz7rsYsz0de44TFUsz8YzRTVNb7eIUoIYZvoX9NJ7GNlHxdWsXSpl4e2Baettzl64RdJuwqYW8S9n3CfkjYpuSaVuy4cjCX8RrM2LSNKXlT2S9cc1IcMO1Bg6MHioP1gXFMPziSCjZUx6gTFywI12gcGciG2Ajy4GK3eMaGGHHFqRTutJrugj8cGc93gdfh37YeKs+AXw0ppuXnLx9+tUwwx+/FNwkN3rBy62NI5+fhs6XY5nSrYkzsw523ImHe7J83Ed52Wzw6ZTeJNntOekt2vNnWL5z/4enVQj6mlcYzwkq7l1yasOPyutkNSCbzH3bU2dIbpGZLrdtZCDxK5+F+QRG+Rl0gdxaW3da02Cwnx6CFwr0p6diX0WgynrC7K/dMy5bMFpOZpulod+Na4Jb5pHUTfej9mHO4UoON39A5WLTMTHfp8W9neAdB" rel="nofollow noreferrer">游乐场</a></p> </answer> </body></html>

vuejs3 nuxtjs3 quill

回答 0 投票 0

如何禁用 Quill 编辑器

我有一个显示富文本数据的模板。当用户单击“编辑”时，我将模板转换为可编辑的 Quill 编辑器，如下所示： '点击#editNote': (e, t) -> 注意= t.find '.contai...

quill

回答 8 投票 0

React Quill 文本编辑器用双引号渲染数据

我正在使用 React Quill 文本编辑器将数据保存到数据库中。我面临的问题是当我检索它用“”（双引号）呈现的保存数据时。例如：数据保存方式如下...

html reactjs text-editor quill react-quill

回答 1 投票 0

如何在react-quill编辑器中获取已删除的图像url

我正在使用react-quill，我想知道如何在插入编辑器后选择图像，以及如何在删除后获取已删除的图像url。这是我的编辑器组件导入R...

javascript reactjs quill react-quill

回答 1 投票 0

如何在flutter中的文本小部件中显示Quill控制器文本？

每当我单击 Quill Editor 的文本时，都会出现一个光标（“|”），该光标在编辑时通常可见。我不希望光标出现并且不知道如何防止它出现？目前我是

flutter quill

回答 1 投票 0

Quill 中的默认<p>标签可以添加样式吗？

我的目标是在工具栏中创建一个按钮，将样式添加到光标所在的默认标签。例如：从示例到示例... 我的目标是在工具栏中创建一个按钮，将样式添加到光标所在的默认 <p> 标签。例如：从<p>Example</p>到<p style="color: white;">Example</p>没有嵌套格式？现在，我的解决方法是使用新的自定义印迹，它的作用与几乎相同 <p><custom style="color: white;">Example</custom><p> 我完全不知道该怎么做，因为我是羽毛笔新手。我花了几天时间研究羽毛笔/羊皮纸文档，但并没有 100% 理解它是如何工作的。如有任何帮助，我们将不胜感激！参见「ttypic」评论：这是我的代码： const Block = Quill.import('blots/block'); class MyBlock extends Block { static create() { const node = super.create(); // Next, customize other functions node.setAttribute('style', 'margin: 0;'); return node; } } Angular 14 与 Primeng 这对我来说非常有用。 import * as QuillNamespace from 'quill'; const Block = this.Quill.import('blots/block'); class DivBlock extends Block {} DivBlock.tagName = 'DIV'; // true means we overwrite this.Quill.register('blots/block', DivBlock, true);

quill react-quill

回答 2 投票 0

如何在没有 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

quill 相关问题

最新问题