1. 程式人生 > >輕量級quill富文本編輯器

輕量級quill富文本編輯器

link world initial 文本編輯器 library window size text maximum

因為公司產品需要在移動端編輯文本,所以發現了這個輕量級的好東西,網上也沒找到比較好的案例,就自己總結了下,有興趣的直接復制代碼運行看看就知道啦!

下面是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富文本編輯器