<!--引入样式表-->
<link href="https://cdn.staticfile.org/quill/1.3.6/quill.snow.css" rel="stylesheet">
<style>
pre {
white-space: pre-wrap;
word-wrap: break-word;
}
</style>
<button onclick="document.querySelector('#q-show').innerHTML = quill.root.innerHTML.split('<').join('&lt;').split('>').join('&gt;')">show html</button>
<pre id="q-show"></pre>
<!-- 创建容器 -->
<div id="editor">
<p>Hello World!</p>
<p>Some initial <strong>bold</strong> text</p>
<p><br></p>
</div>
<!-- 引入Quill -->
<script src="https://cdn.staticfile.org/quill/1.3.6/quill.js"></script>
<!-- Initialize Quill editor -->
<script>
var quill = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: [
["bold", "italic", "underline", "strike"],
["blockquote", "code-block"],
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表<div style="padding: 25px;"><hr class="hr-split"/></div>[{ list: 'ordered' }, { list: 'bullet' }]
[{ header: 1 }, { header: 2 }],
[{ script: "sub" }, { script: "super" }], // 上标/下标<div style="padding: 25px;"><hr class="hr-split"/></div>[{ script: 'sub' }, { script: 'super' }]
[{ indent: "-1" }, { indent: "+1" }],
[{ size: [] }], // 配置字号
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题<div style="padding: 25px;"><hr class="hr-split"/></div>[{ header: [1, 2, 3, 4, 5, 6, false] }]
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色<div style="padding: 25px;"><hr class="hr-split"/></div>[{ color: [] }, { background: [] }]
[{ font: [] }], //显示字体选择
[{ align: [] }], // 对齐方式<div style="padding: 25px;"><hr class="hr-split"/></div>[{ align: [] }]
["clean"], // 清除文本格式<div style="padding: 25px;"><hr class="hr-split"/></div>['clean']
["link"],
],
},
});
</script>
quill 富文本编辑器 显示 HTML
一次购买，永久免费
去创作
评论
{{item.path.join('.')}}
{{item.item.name}}