问题遇到的现象和发生背景
VUE如何获取quill-editor里的内容?
用代码块功能插入代码,请勿粘贴截图
我想要达到的结果
使用quill-editor当作文本输入框,输入完以后在JS代码中如何分别quill-editor里的纯文本信息以及带格式的文本信息?
VUE如何获取quill-editor里的内容?
使用quill-editor当作文本输入框,输入完以后在JS代码中如何分别quill-editor里的纯文本信息以及带格式的文本信息?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#editor {
height: 200px;
}
</style>
<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<body>
<div id="app">
<div id="editor">
<p>Hello World!</p>
<p>Some initial <strong>bold</strong> text</p>
<p><br></p>
</div>
<input type="button" value="获取编辑器内容" @click="getContent" />
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script>
new Vue({
el: '#app',
data: { },
mounted() {
this.quill = new Quill('#editor', { theme: 'snow' });
},
methods: {
getContent() {
var d = this.quill.root.innerHTML
alert(d)
}
}
})
</script>
</body>
</html>