轻量级quill富文本编辑器
Posted AiTing on the way
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了轻量级quill富文本编辑器相关的知识,希望对你有一定的参考价值。
因为公司产品需要在移动端编辑文本,所以发现了这个轻量级的好东西,网上也没找到比较好的案例,就自己总结了下,有兴趣的直接复制代码运行看看就知道啦!
下面是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>
以上是关于轻量级quill富文本编辑器的主要内容,如果未能解决你的问题,请参考以下文章
vue项目富文本编辑器vue-quill-editor之自定义图片上传