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

下面是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. leetcode series：Two Sum

    题目: Given an array of integers, find two numbers such that they add up to a specific target number. ...

  2. Ubuntu配置完全教程

    前言 最近将旧电脑换成了Ubuntu系统,在网上找了许多优化和配置教程,今天整理一份完整的教程给大家分享 系统清理 卸载LibreOffice libreoffice事ubuntu自带的开源offic ...

  3. 逆向实用干货分享,Hook技术第二讲,之虚表HOOK

    逆向实用干货分享,Hook技术第二讲,之虚表HOOK 正好昨天讲到认识C++中虚表指针,以及虚表位置在反汇编中的表达方式,这里就说一下我们的新技术,虚表HOOK 昨天的博客链接: http://www ...

  4. ChromeExtension那些事儿

    Chrome Extension是什么呢? 简而言之,就是Chrome扩展,它是基于Chrome浏览器的,我们可以理解它为一个独立运行在Chrome浏览器下的APP,当然核心编程语言就是JavaScr ...

  5. Azure ARM (18) 将传统的ASM VM迁移到ARM VM (1)

    <Windows Azure Platform 系列文章目录> 目前很多客户陆续的把传统ASM VM迁移至ARM VM.我这里简单介绍一下. 整个迁移过程分为: 1.Validate,Az ...

  6. SharePoint Online Add-in 开发简介

    作者:陈希章 发表于 2017年12月22日 在 再谈SharePoint大局观 中我提到了SharePoint开发的一些新的变化,这一篇文章我将讲解SharePoint Add-in开发.其实早在2 ...

  7. 美杂志初次取得答应走进google奥秘研讨所Google X

    Google X作为google最奥秘的研讨部分.开发过google眼镜.无人驾驶轿车等多项创新项目.至今为止.Google X从未答应媒体进入採訪.但近日,据日本GIGAZINE站点报导,美国杂志& ...

  8. CvIntHaarClassifier

    //定义一个宏.宏里面是指针函数 #define CV_INT_HAAR_CLASSIFIER_FIELDS() \ float (*eval)( CvIntHaarClassifier*, sum_ ...

  9. 基于C++11的线程池

    1.封装的线程对象 class task : public std::tr1::enable_shared_from_this<task> { public: task():exit_(f ...

  10. Android使用gradle不同配置多项目打包

    //build.gradle该配置文件里路径均是相对路径 apply plugin: 'com.android.application' android { def suffix = "su ...