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

下面是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. Neutron控制节点集群

    #Neutron控制节点集群 openstack pike 部署 目录汇总 http://www.cnblogs.com/elvi/p/7613861.html #.Neutron控制节点集群 #本实 ...

  2. 前端测试框架Jest系列教程 -- Matchers（匹配器）

    写在前面: 匹配器(Matchers)是Jest中非常重要的一个概念,它可以提供很多种方式来让你去验证你所测试的返回值,本文重点介绍几种常用的Matcher,其他的可以通过官网api文档查看. 常用的 ...

  3. ASP.NET MVC5+EF6+EasyUI 后台管理系统（88）-Excel导入和导出-主从表结构导出

    前言 前面一篇详细讲解了导入导出,本节演示混合结构的导出功能!同时提供代码下载.. 代码下载 vs2015+无数据库 先看效果图:这个一个混合的Excel,列表与自定义信息的混合! 我们的步骤大概分为 ...

  4. HDU1541--Stars（树状数组）

    Stars Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Subm ...

  5. layui使用心得

    表单控件样式没生效, 因为没引入form. layui.use('form', function(){ var form = layui.form; }); radio改变事件没生效, 需要手动fil ...

  6. c++用类写栈和队列的简单基本操作（实验）

    继续更文.这次用类来写栈和队列,都是用数组模拟的: 以下是栈和队列的定义: 然后分别是栈和队列的类: 完整代码贴上: 栈 //使用类来定义栈 class ZHAN { public: STACK s; ...

  7. PHP递归解决兔子问题，面试必备

    接到面试通知辗转反侧,一直在默念明天改如何介绍自己的项目经验等.早早的起床,洗漱,把自己的总结的问题自问自答了一些.匆匆吃了早饭,挤进让人面目狰狞的地铁,此时什么都不顾,只盼着赶紧下地铁.终于提前半小 ...

  8. 【技能大赛笔记01】Zigbee点对点按键控制程序开发

    [技能大赛笔记01]Zigbee点对点按键控制程序开发 --2017年"物联网物联网技术应用与维护"任务五题1(中职组) 1.题目要求 2.工程文件 在比赛中,提供了一个基于Bas ...

  9. 【LeetCode-面试算法经典-Java实现】【053-Maximum Subarray（最大子数组和）】

    [053-Maximum Subarray(最大子数组和)] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 Find the contiguous subarray w ...

  10. MVC Anti-XSS方案

    1:Form提交模式 在使用Form提交时,MVC框架提供了一个默认的机制.如果数据中含有恶意字,则会自动转向出错页面.   2:Ajax+JSON提交模式. MVC框架未提供对于Json数据的Ant ...