轻量级quill富文本编辑器

时间：2022-09-08 13:39:29

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

下面是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. quill富文本编辑器 API

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

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

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

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

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

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

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

  7. angular4 富文本编辑器

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

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

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

  9. vue-quill-editor 富文本编辑器插件介绍

    Iblog项目中博文的文本编辑器采用了vue-quill-editor插件,本文将简单介绍其使用方法. 引入配置 安装模块 npm install vue-quill-editor --save in ...

随机推荐

  1. 【转载】实用的Javascript获取网页屏幕可见区域高度

    本文转载原地址:这里 document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 docu ...

  2. android开发-小技巧篇（集合）

    1.对于过多的控件,功能类似,数量又多的,可以用include方法.在实现应用中,可以把控件放入List集合中. private void initView() { // TODO Auto-gene ...

  3. apache配置文件参数优化

    1.CentOS5.8 x86_64位 采用最小化安装,系统经过了基本优化篇2.apache版本:httpd-2.2.293.源码包存放位置:/home/oldboy/tools4.源码包编译安装位置 ...

  4. Nginx负载均衡和LVS负载均衡的比较分析

    LVS和Nginx都可以用作多机负载的方案,它们各有优缺,在生产环境中需要好好分析实际情况并加以利用. 首先提醒,做技术切不可人云亦云,我云即你云:同时也不可太趋向保守,过于相信旧有方式而等别人来帮你 ...

  5. 最火的&period;NET开源项目（转）

    综合类 微软企业库 微软官方出品,是为了协助开发商解决企业级应用开发过程中所面临的一系列共性的问题, 如安全(Security).日志(Logging).数据访问(Data Access).配置管理( ...

  6. Codeforces 556A Case of the Zeros and Ones（消除01）

    Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u   Description Andr ...

  7. c语言内存对齐（1）

    在<C陷阱与缺陷>有这样一个例子: #include <stdio.h> int main(void) { int i; char c; ;i<;i++){ scanf( ...

  8. Ubuntu 安装 chrome浏览器

    按下 Ctrl + Alt + t 键盘组合键,启动终端. 输入以下命令: sudo wget http://www.linuxidc.com/files/repo/google-chrome.lis ...

  9. SQL、HQL、JPQL、CQL的对比

    SQL:全称结构化查询语言(Structured Query Language),是一种特殊目的的编程语言,是一种数据库查询和程序设计语言,用于存取数据以及查询.更新和管理关系数据库系统:同时也是数据 ...

  10. linux 内核开发环境搭建

    http://blog.csdn.net/jemmy858585/article/details/46710299

相关文章