vue.js - 在同一页面上更新多个编辑器的现有内容
问题描述
我通过 VueJS 应用程序中的自定义包装器组件使用 quill。所以问题是,在打开用于编辑问题的模式并在两个不同的编辑器上回答时,会出现错误“quill Invalid Quill container #my_id”。其次是“nextTick 中的错误:”TypeError:无法设置未定义的属性“innerHTML””
这是包装器的代码:
import Quill from 'quill'
export default {
name: 'QuillWrapper',
props: {
value: {
type: String,
default: ''
},
id: {
type: String,
default: 'editor'
}
},
data() {
return {
editor: null,
quillToolbar: [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block', 'link'],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }],
[{ 'indent': '-1'}, { 'indent': '+1' }],
[{ 'direction': 'rtl' }],
['image', 'video'],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{'color': ['red', 'orange', 'yellow', 'green', 'blue', 'purple', 'white', 'black']}, {'background': ['red', 'orange', 'yellow', 'green', 'blue', 'purple', 'white', 'black']}],
[{ 'font': [] }],
[{ 'align': [] }],
['clean', 'formula']
],
};
},
mounted() {
this.$nextTick(function() {
this.editor = new Quill('#' + this.id, {
modules: {
toolbar: this.quillToolbar
},
bounds: '.text-editor',
theme: 'snow',
syntax: true
});
this.editor.root.innerHTML = this.value;
this.editor.on('text-change', () => this.update());
})
},
methods: {
update() {
this.$emit('input', this.editor.getText() ? this.editor.root.innerHTML : '');
}
}
}
解决方案
这不起作用的原因是因为element
内部DOM
不知道或实际上被分配了id
. 对了DOM
,财产this.id
无非是一个string
。
您必须在 .. 期间分配element
持有您的组件的id
时间mounted()
。此外,请确保您正在导入snow
主题.css
文件..
<link rel="stylesheet" href="https://cdn.quilljs.com/1.3.6/quill.snow.css">
代码片段如下,您还可以在此处找到 CodePen 镜像:
https://codepen.io/oze4/pen/wZdjbv?editors=1010
这是更改的内容:
mounted() {
/* THIS WAS ADDED */
this.$el.id = this.id;
/* ^^^^^^^^^^^^^^ */
this.$nextTick(function() {
this.editor = new Quill("#" + this.id, {
modules: {
toolbar: this.quillToolbar
},
bounds: ".text-editor",
theme: "snow",
syntax: true
});
this.editor.root.innerHTML = this.value;
this.editor.on("text-change", () => this.update());
});
},
const quillComponent = {
template: "#quillComponent",
props: {
value: {
type: String,
default: ""
},
id: {
type: String,
default: "editor"
}
},
data: {
editor: null,
quillToolbar: [
["bold", "italic", "underline", "strike"],
["blockquote", "code-block", "link"],
[{ list: "ordered" }, { list: "bullet" }],
[{ script: "sub" }, { script: "super" }],
[{ indent: "-1" }, { indent: "+1" }],
[{ direction: "rtl" }],
["image", "video"],
[{ size: ["small", false, "large", "huge"] }],
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[
{color: ["red","orange","yellow","green","blue","purple","white","black"]},
{background: ["red","orange","yellow","green","blue","purple","white","black"]}
],
[{ font: [] }],
[{ align: [] }],
["clean", "formula"]
]
},
mounted() {
/* THIS WAS ADDED */
this.$el.id = this.id;
/* ^^^^^^^^^^^^^^ */
this.$nextTick(function() {
this.editor = new Quill("#" + this.id, {
modules: {
toolbar: this.quillToolbar
},
bounds: ".text-editor",
theme: "snow",
syntax: true
});
this.editor.root.innerHTML = this.value;
this.editor.on("text-change", () => this.update());
});
},
methods: {
update() {
let r = this.editor.getText() ? this.editor.root.innerHTML : "";
console.log(r);
this.$emit(
"input",
this.editor.getText() ? this.editor.root.innerHTML : ""
);
}
}
};
new Vue({
el: "#app",
components: {
quillComponent,
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<link rel="stylesheet" href="https://cdn.quilljs.com/1.3.6/quill.snow.css">
<div id="app">
<quill-component></quill-component>
</div>
<script type="text/x-template" id="quillComponent">
<div></div>
</script>
推荐阅读
- datetime - Power BI 日期列
- angular - 如何在 Angular 7 中显示活动会话?
- javascript - for循环中的“等待仅在异步函数中有效”
- corda - 在 cordapp 中编写多个响应程序流是什么意思?
- javascript - 网络权限 API
- c# - 从 MS Graph API 获取最近的对话消息
- javascript - 当通过for循环调用的所有异步函数完成时,如何做smoething?
- arrays - 如何使用 Dart / Flutter 中的列表从列表中删除重复元素?
- javascript - 如何使 react + d3 堆叠条形图分组?
- android - 缩放给定的视图和屏幕宽度行为,使其对于不同的屏幕尺寸相同