<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body,
html {
box-sizing: border-box;
max-height: 100vh;
}
* {
margin: 0;
padding: 0;
}
#editor {
height: 90vh;
}
</style>
<!-- 引入样式文件 -->
<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="editor"></div>
<!-- 初始化Quill编辑器 -->
<script>
var quill = new Quill("#editor", {
theme: "snow",
debug: "warn",
modules: {
toolbar: [
["bold", "italic", "underline", "strike", "link"],
["blockquote", "code-block"],
[{ size: ["small", false, "large", "huge"] }],
[{ font: [] }],
[{ align: [] }],
[{ list: "ordered" }, { list: "bullet" }],
[{ indent: "-1" }, { indent: "+1" }],
[{ header: [1, 2, 3, 4, 5, 6, false] }],
["image"],
[{ direction: "rtl" }],
[{ color: [] }],
[{ background: [] }],
],
},
placeholder: "在此编辑内容",
readOnly: false,
content: "",
contentType: "html",
});
</script>
<div style="text-align: center; padding: 10px">
<h6>Power By Lambert</h6>
</div>
</body>
</html>
标签:vue,false,list,height,编辑器,html,editor,quill
From: https://www.cnblogs.com/lambertlt/p/17962136