轻量级quill富文本编辑器

因为公司产品需要在移动端编辑文本,所以发现了这个轻量级的好东西,网上也没找到比较好的案例,就自己总结了下,有兴趣的直接复制代码运行看看就知道啦!

 

下面是quill.js的CDN加速地址:




 



 


                  

  

多的不讲了,直接上代码。里面有注释,这些都是基础的,大神绕道,嘿嘿

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">Boldbutton>
              <button class="ql-italic">Italicbutton>    
              <button class="ql-underline">下划线button>    
              <button class="ql-link">linkbutton>    
          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>

 

转载于:https://www.cnblogs.com/LChenglong/p/6913898.html

你可能感兴趣的:(轻量级quill富文本编辑器)