因为公司产品需要在移动端编辑文本，所以发现了这个轻量级的好东西，网上也没找到比较好的案例，就自己总结了下，有兴趣的直接复制代码运行看看就知道啦！
下面是quill.js的CDN加速地址： <!-- Main Quill library --> <script src="//cdn.quilljs.com/1.0.3/quill.js" type="text/javascript"></script> <script src="//cdn.quilljs.com/1.0.3/quill.min.js" type="text/javascript"></script> <!-- Theme included stylesheets --> <link href="//cdn.quilljs.com/1.0.3/quill.snow.css" rel="stylesheet"> <link href="//cdn.quilljs.com/1.0.3/quill.bubble.css" rel="stylesheet"> <!-- Core build with no theme, formatting, non-essential modules --> <link href="//cdn.quilljs.com/1.0.3/quill.core.css" rel="stylesheet"> <script src="//cdn.quilljs.com/1.0.3/quill.core.js" type="text/javascript"></script>
多的不讲了，直接上代码。里面有注释，这些都是基础的，大神绕道，嘿嘿
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本编辑器</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<link href="http://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
<script src="http://cdn.quilljs.com/1.0.0/quill.js"></script>
<style>
/*编辑器样式修改*/
.ql-snow .ql-picker.ql-size .ql-picker-label::before {
content: ‘中字体‘;
}
.ql-toolbar.ql-snow .ql-formats {
margin-right: 8px;
}
#editor{min-height:300px;}
</style>
</head>
<body>
<!-- 创建工具栏组件 -->
<div id="toolbar">
<span class="ql-formats">
<button class="ql-bold">Bold</button><!--控制粗细-->
<button class="ql-italic">Italic</button> <!--控制切斜-->
<button class="ql-underline">下划线</button> <!--下划线-->
<button class="ql-link">link</button> <!--链接-->
</span>
<span class="ql-formats">
<button class="ql-list" value="ordered"></button><!--序号-->
<button class="ql-list" value="bullet"></button> <!--点-->
<button class="ql-list" value="ql-blockquote"></button> <!--引用-->
<button class="ql-code-block"></button> <!--代码-->
<button class="ql-image" value="bullet"></button> <!--图片-->
</span>
<span class="ql-formats">
<select class="ql-color">
<option selected></option>
<option value="red"></option>
<option value="orange"></option>
<option value="yellow"></option>
<option value="green"></option>
<option value="blue"></option>
<option value="purple"></option>
</select>
<select class="ql-background">
<option selected></option>
<option value="red"></option>
<option value="orange"></option>
<option value="yellow"></option>
<option value="green"></option>
<option value="blue"></option>
<option value="purple"></option>
</select>
</span>
<span class="ql-formats"><!--控制大小-->
<select class="ql-size">
<option value="10px">小字体</option>
<option selected>中字体</option>
<option value="18px">大字体</option>
<option value="32px">超大字</option>
</select>
</span>
</div>
<!-- 创建文本编辑器 -->
<div id="editor">
<p>Hello World!</p>
</div>
<script>
window.onload=function(){
var BackgroundClass = Quill.import(‘attributors/class/background‘);
var ColorClass = Quill.import(‘attributors/class/color‘);
var SizeStyle = Quill.import(‘attributors/style/size‘);
Quill.register(BackgroundClass, true);
Quill.register(ColorClass, true);
Quill.register(SizeStyle, true);
var editor = new Quill(‘#editor‘, {
modules: { toolbar: ‘#toolbar‘ },
placeholder: ‘Compose an epic...‘,
theme: ‘snow‘
});
}
</script>
</body>
</html>
时间： 2024-10-05 08:09:03