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

下面是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富文本编辑器的更多相关文章

  1. Quill 富文本编辑器

    Quill 富文本编辑器 https://quilljs.com/ https://github.com/quilljs/quill https://github.com/quilljs/awesom ...

  2. wangEditor - 轻量级web富文本编辑器（可带图片上传）

    业务需求: 通过后台编辑文章和图片,上传到前端界面,展示新闻消息模块.这个时候,需要一款简洁的编辑器,百度编辑器是最常用的一种,但是功能太过于复杂,而wangEditor - 轻量级web富文本编辑器 ...

  3. Vue整合Quill富文本编辑器

    Quill介绍 Quill是一款开源的富文本编辑器,基于可扩展的架构设计,提供丰富的 API 进行定制.截止2021年1月,在github上面已有28.8k的star. Quill项目地址:https ...

  4. quill富文本编辑器 API

    //1. 从第三个开始删除,删除4个 // console.log(this.quill.deleteText(2, 4)); // 12345678 1278 // 2.(返回对象)返回从第三个开始 ...

  5. Vue2 封装的 Quill 富文本编辑器组件 Vue-Quill-Editor

    1.安装 npm install vue-quill-editor --save 2.使用 import { quillEditor } from 'vue-quill-editor' 3.组件中 & ...

  6. 轻量级富文本编辑器wangEditor源码结构介绍

    1. 引言 wangEditor——一款轻量级html富文本编辑器(开源软件) 网站:http://www.wangeditor.com/ demo演示:http://www.wangeditor.c ...

  7. 基于jeesite的cms系统（五）：wangEditor富文本编辑器

    一.关于wangEditor: wangEditor —— 轻量级 web 富文本编辑器,配置方便,使用简单.支持 IE10+ 浏览器. 官网:www.wangEditor.com 文档:www.ka ...

  8. angular4 富文本编辑器

    使用quill富文本编辑器实现,angular项目中用到了ngx-quill插件. quill的GitHub地址:https://github.com/quilljs/quill ngx-quill的 ...

  9. 10个免费的javascript富文本编辑器（jQuery and non-jQuery）

    祝愿园子里的朋友圣诞节快乐. 本文介绍了10个免费易用富文本编辑器(rich text editors,RTE),其中5个是Jquery插件,另外5个是非Jquery富文本编辑器 简介 Javascr ...

随机推荐

  1. ##6.2 Neutron计算节点-- openstack pike

    ##6.2 Neutron计算节点 openstack pike 安装 目录汇总 http://www.cnblogs.com/elvi/p/7613861.html ##6.2 Neutron计算节 ...

  2. 关于MVC Ajax.BeginForm()异步上传文件的问题

    问题描述: 如果用juqery原生的异步上传方式,只要如下方法即可 $.ajax({ type: "GET", url: "test.json", data: ...

  3. 手动安装lump

    教你编译PHP7 (nginx+mysql+php7)  PHP7正式版已经发布,性能是PHP5.6的两倍! 操作系统: CentOS Linux, 6.5 64位服务器: 阿里云空的操作系统,我们从 ...

  4. ssm开发关于web.xml配置

    <?xml version="1.0" encoding="UTF-8"?> <web-app version="3.0" ...

  5. Python的变量及简单数据类型

    Python的变量及简单类型 1.  变量 在Python编程中,变量是用来存放值或对像的容器.变量的名称可以自定义,但需遵循一定的规范,否则可能会引发一些错误.Python的变量可以分为数字.字符和 ...

  6. Python爬虫(十九)_动态HTML介绍

    JavaScript JavaScript是网络上最常用也是支持者对多的客户端脚本语言.它可以收集用户的跟踪数据,不需要重载页面直接提交表单,在页面嵌入多媒体文件,甚至运行网页游戏. 我们可以在网页源 ...

  7. TCP的十一种状态与三次握手分析（有图）

    我们知道TCP是面向连接的,我们只知道有连接断开,其实内部还有一些比较复杂的状态.去了解各个状态之间的切换有助于我们更加深入的了解TCP.下面我们就来分析各个状态. 1.如下图示(图源百度)图中显示出 ...

  8. 10_Eclipse中演示Git冲突的解决

     1 在user1中的readme.txt文件里先改动,而且commitand push 选中user1,右击team->Commit-à watermark/2/text/aHR0cDov ...

  9. Comparable和Comparator的差别

    原文地址:http://leihuang.org/2014/11/16/Comparable-Vs-Comparator/ Comparable和Comparator都是用来实现集合中元素的比較.排序 ...

  10. 为 NativeScript 项目添加 iOS / Android 平台 API 的智能感知

    使用 NativeScript ,我们可以很容易的调用平台的原生 API,在开发过程中,我们可以添加这些 API 的 d.ts 文件来提供智能感知,帮助我们更方便的构建媲美原生的 APP. 首先通过 ...