富文本编辑器quill的集成
Posted 月疯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了富文本编辑器quill的集成相关的知识，希望对你有一定的参考价值。
中文地址：https://www.kancloud.cn/liuwave/quill/1409366
只要模块：
<!-- Quill主要库 -->
<script src="//cdn.quilljs.com/1.3.4/quill.js"></script>
<script src="//cdn.quilljs.com/1.3.4/quill.min.js"></script>
<!-- 主题样式 -->
<link href="//cdn.quilljs.com/1.3.4/quill.snow.css" rel="stylesheet">
<link href="//cdn.quilljs.com/1.3.4/quill.bubble.css" rel="stylesheet">
<!-- 核心库，不包含主题、格式化等非必要模块 -->
<link href="//cdn.quilljs.com/1.3.4/quill.core.css" rel="stylesheet">
<script src="//cdn.quilljs.com/1.3.4/quill.core.js"></script>
通过一个js数组来配置初始化容器：
var toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // 切换按钮
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }], // 用户自定义按钮值
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }], // 上标/下标
[{ 'indent': '-1'}, { 'indent': '+1' }], // 减少缩进/缩进
[{ 'direction': 'rtl' }], // 文本下划线
[{ 'size': ['small', false, 'large', 'huge'] }], // 用户自定义下拉
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }], // 主题默认下拉，使用主题提供的值
[{ 'font': [] }],
[{ 'align': [] }],
['clean'] // 清除格式
];
var quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});通过html来创建工具栏冰初始化容器：
<div id="toolbar-container">
<span class="ql-formats">
<select class="ql-font"></select>
<select class="ql-size"></select>
</span>
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-strike"></button>
</span>
<span class="ql-formats">
<select class="ql-color"></select>
<select class="ql-background"></select>
</span>
<span class="ql-formats">
<button class="ql-script" value="sub"></button>
<button class="ql-script" value="super"></button>
</span>
<span class="ql-formats">
<button class="ql-header" value="1"></button>
<button class="ql-header" value="2"></button>
<button class="ql-blockquote"></button>
<button class="ql-code-block"></button>
</span>
<span class="ql-formats">
<button class="ql-list" value="ordered"></button>
<button class="ql-list" value="bullet"></button>
<button class="ql-indent" value="-1"></button>
<button class="ql-indent" value="+1"></button>
</span>
<span class="ql-formats">
<button class="ql-direction" value="rtl"></button>
<select class="ql-align"></select>
</span>
<span class="ql-formats">
<button class="ql-link"></button>
<button class="ql-image"></button>
<button class="ql-video"></button>
<button class="ql-formula"></button>
</span>
<span class="ql-formats">
<button class="ql-clean"></button>
</span>
</div>
<div id="editor"></div>
<script>
var quill = new Quill('#editor', {
modules: {
toolbar: '#toolbar-container'
}
});
</script>表单提交：
// 提交表单
function sub_post() {
var html = document.querySelector('#editor').children[0].innerHTML;
html = '<div class="ql-container ql-snow"><div class="ql-editor">'+html+"</div></div>";
$('[name=content]').val(html);
$("#submitForm").submit();
}
直接代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>博客管理</title>
<!-- 引入css文件 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/dracula.min.css" rel="stylesheet">
<!-- 采用snow主题 -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
</head>
<style>
body{
padding: 0px;
}
.title{
width: 100%;
height: 80px;
background: antiquewhite;
text-align: center;
}
#editor{
width: 100%;
min-height: 500px;
max-height: 100%;
}
.pub{
height: 80px;
width: 80px;
position: fixed;
right: 80px;
bottom: 20px;
border-radius: 50%;
background: orange;
text-align: center;
}
.pub:active{
background: brown;
}
.ht1{
padding-top: 25px;
}
.p1{
padding-top: 8px;
}
</style>
<body>
<div class="pub" onclick="publish()"><p class="p1">发布</p></div>
<div class="title">
<h2 class="ht1">博客管理</h2>
</div>
<!-- 创建编辑容器 -->
<div id="editor">
<p>Hello World!</p>
</div>
<!-- 引入高亮js文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<!-- quill的主要js文件 -->
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
<script>
// 自定义编辑器工具栏
var toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // 切换按钮
['blockquote', 'code-block'],
[{'header': 1}, {'header': 2}], // 用户自定义按钮值
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'script': 'sub'}, {'script': 'super'}], // 上标/下标
[{'indent': '-1'}, {'indent': '+1'}], // 减少缩进/缩进
[{'direction': 'rtl'}], // 文本下划线
[{'size': ['small', false, 'large', 'huge']}], // 用户自定义下拉
[{'header': [1, 2, 3, 4, 5, 6, false]}],
[{'color': []}, {'background': []}], // 主题默认下拉，使用主题提供的值
[{'font': []}],
[{'align': []}],
['clean'], // 清除格式
['link', 'image', 'video', 'formula'],//超链接、图片、视频、公式
];
// 初始化编辑器，snow主题
var quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
// 提交表单
function sub_post() {
var html = document.querySelector('#editor').children[0].innerHTML;
console.log(html)
}
//发布博客
function publish(){
alert("点击发布")
}
</script>
</body>
</html>
以上是关于富文本编辑器quill的集成的主要内容，如果未能解决你的问题，请参考以下文章
轻量级富文本编辑器quill editor结合iview的使用