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

下面是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. ASP.NET Core 一步步搭建个人网站（2）_一键部署和用户注册登录

    俗话说,磨刀不费砍柴工.为了更方便的进行项目管理,我们先将个人网站项目配置一下,满足以下2个目标: VS2017中支持Git存储库,绑定Github项目,实现本地VS程序与线上Github一键代码提交 ...

  2. VSCode 同步设置及扩展插件 实现设备上设置统一

    准备工作:电脑上需安装VSCode,拥有一个github账户.实现同步的功能主要依赖于VSCode插件 "Settings Sync" Setting Sync 可同步包含的所有扩 ...

  3. 垃圾陷阱洛谷dp

    题目描述 卡门――农夫约翰极其珍视的一条Holsteins奶牛――已经落了到“垃圾井”中.“垃圾井”是农夫们扔垃圾的地方,它的深度为D(2<=D<=100)英尺. 卡门想把垃圾堆起来,等到 ...

  4. 自己动手编写IOC框架（二）

    万事开头难,上篇已经起了一个头,之后的事情相对就简单了.上次定义了框架所需的dtd也就是规定了xml中该怎么写,有哪些元素.并且我们也让dtd和xml绑定在了一起,使dtd对xml的格式进行校验,并且 ...

  5. memcache 启动 储存原理 集群

    一. windows下安装启动 首先将memcache的bin目录加入到Path环境变量中,方便后面使用命令: 然后执行 memcached –dinstall 命令安装memcache的服务: 然后 ...

  6. Android数据绑定技二，企业级开发

    PS:上一篇文章写了Databinding的简单使用,写了一个绑定textview的示例,和绑定的一些用法,估计有的人会说,之前的写的好好的,为什么要数据绑定这样的写法呢,没办法,社会在进步,当然是怎 ...

  7. cpci热插拔信号

    cpci热插拔信号1 BD_SEL#信号.对外围板是输入,是个1对1信号,来自背板的热插拔控制电路输出.每一个槽一个独立信号.用于控制热插拔外围板的上电控制.不实现热插拔的在背板直接接地:2 HEAL ...

  8. nyoj 123 士兵杀敌（四）【树状数组】+【插线问点】

    树状数组有两种情况:插点问线和插线问点.这道题是插线问点. 由于树状数组最简单的作用是计算1~x的和,所以给出(a, b. c).表示(a,b)区间添加c, 那我们仅仅须要在a点原来的基础上添加c,然 ...

  9. 【Sqlserver系列】初级思维导图

    1   概述 本篇文章主要概述Sqlserver思维导图. 2   具体内容 3   参考文献 [01]https://mp.weixin.qq.com/s/USNMslpvu7pWosMZnVTPd ...

  10. adb连接手机报错解决方案汇总(win7)

    >>adb devices常见错误:   >>解决方案汇总 检查端口是否占用:netstat -ano | findstr 5037 | findstr LISTENING 检 ...