|
|
@@ -0,0 +1,50 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <title>文本编辑器示例</title>
|
|
|
+ <!-- 引入Quill样式 -->
|
|
|
+ <link rel="stylesheet" href="//cdn.quilljs.com/1.3.6/quill.snow.css">
|
|
|
+ <style>
|
|
|
+ #editor {
|
|
|
+ height: calc(100vh - 70px); /* 假设其他元素的高度是100px */
|
|
|
+ }
|
|
|
+
|
|
|
+ /*.ql-editor ul, ol {*/
|
|
|
+ /* padding-left: 0.25rem;*/
|
|
|
+ /*}*/
|
|
|
+
|
|
|
+ /*.ql-indent-1, .ql-indent-2, .ql-indent-3, .ql-indent-4, .ql-indent-5, .ql-indent-6, .ql-indent-7 {*/
|
|
|
+ /* padding-left: 2.5rem;*/
|
|
|
+ /*}*/
|
|
|
+
|
|
|
+ /* Continue replicating until ql-indent-9*/
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<!-- 创建一个用于编辑的容器 -->
|
|
|
+<div id="editor"></div>
|
|
|
+
|
|
|
+<!-- 引入Quill库 -->
|
|
|
+<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
|
|
|
+<script>
|
|
|
+ const quill = new Quill('#editor', {
|
|
|
+ theme: 'snow', // 指定使用的主题
|
|
|
+ modules: {
|
|
|
+ toolbar: [
|
|
|
+ [{'header': [1, 2, false]}, 'bold', 'italic', 'blockquote', 'code-block', 'link'],
|
|
|
+ [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}, 'image', 'video'],
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 获取编辑器内容
|
|
|
+ function getContent() {
|
|
|
+ const content = quill.root.innerHTML;
|
|
|
+ console.log(content);
|
|
|
+ }
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|
tianyun