轻量级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之自定义图片上传

关于实现quill(富文本编辑器)初始化数据时自定义属性被清除的问题

富文本编辑器的使用

vue的富文本编辑器使用

富文本编辑器Quill简单介绍

在nuxt中使用富文本编辑器quill