| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 |
- <!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>
|
