同一个页面多个quill编辑器处理
解决同一个页面多个quill编辑器不显示的问题
想要的结果
直接上代码，大家只需要那个思路
<html>
<head>
<!-- 引入样式文件 -->
<link href="https://cdn.quilljs.com/1.3.4/quill.snow.css" rel="stylesheet">
<!-- 引入Quill库文件 -->
<script src="https://cdn.quilljs.com/1.3.4/quill.js"></script>
</head>
<body>
<!-- 创建一个编辑器容器 -->
<div id="editor1" style="height: 100px;">
<p>editor1"</p >
<p>Some initial <strong>bold</strong> text</p >
<p>
</p >
</div>
<div id="editor2" style="height: 100px;">
<p>editor2</p >
<p>Some initial <strong>bold</strong> text</p >
<p>
</p >
</div>
<button onclick="test()">console</button>
<!-- 初始化Quill编辑器 -->
<script>
var quill_1;
var quill_2;
var content1;
var content2;
var length1;
var length2;
var initQuill = function(id){
switch(id) {
case '#editor1':
quill_1 = new Quill(id, {
theme: 'snow'
});
break;
case '#editor2':
quill_2 = new Quill(id, {
theme: 'snow'
});
break;
default:
}
}
initQuill('#editor1');
initQuill('#editor2');
// 按钮测试方法
function test(){
content1 = quill_1.getContents();
length1 = quill_1.getLength();
var text1 = quill_1.getText();
console.log(content1);
console.log(length1);
console.log(text1);
content2 = quill_2.getContents();
length2 = quill_2.getLength();
console.log(content2);
console.log(length2);
};
</script>
</body>
</html>
在这里处理了同一个页面多个quill不发显示的问题同时附带几个常用的方法
- quill_2.getContents() 获取当前编辑器的内容
- quill_2.editor.isBlank() 判断quill编辑器是否为空
需要注意的是提交表单的时候我们需要先将编辑器里面的值获取到，然后再将值赋值到隐藏的input里面，将这个inpot值提交表单
4336
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
