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

下面是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. jdk1.8hashmap源码解析

    /* * Copyright (c) 1997, 2013, Oracle and/or its affiliates. All rights reserved. * ORACLE PROPRIETA ...

  2. 如何在PHP7中安装mysql的扩展

    相对与PHP5,PHP7的最大变化之一是移除了mysql扩展,推荐使用mysqli或者pdo_mysql,实际上在PHP5.5开始,PHP就着手开始准备弃用mysql扩展,如果你使用mysql扩展,可 ...

  3. Chrome浏览器读写系统剪切板

    IE浏览器支持直接读写剪切板内容: window.clipboardData.clearData(); window.clipboardData.setData('Text', 'abcd'); 但是 ...

  4. constructor 属性,判断是否为数组

    <!--你可以使用 constructor 属性来查看是对象是否为数组 (包含字符串 "Array"):--><p>constructor属性返回变量或对象 ...

  5. 异常处理第三讲,SEH(结构化异常处理),异常展开问题

    异常处理第三讲,SEH(结构化异常处理),异常展开问题 作者:IBinary出处:http://www.cnblogs.com/iBinary/版权所有,欢迎保留原文链接进行转载:) 不知道昨天有木有 ...

  6. Akka(43): Http:SSE-Server Sent Event - 服务端主推消息

    因为我了解Akka-http的主要目的不是为了有关Web-Server的编程,而是想实现一套系统集成的api,所以也需要考虑由服务端主动向客户端发送指令的应用场景.比如一个零售店管理平台的服务端在完成 ...

  7. gulp杂记

    一.什么是gulp gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉 ...

  8. javascript设计模式——中介者模式

    前面的话 程序由大大小小的单一对象组成,所有这些对象都按照某种关系和规则来通信.当程序的规模增大,对象会越来越多,它们之间的关系也越来越复杂,难免会形成网状的交叉引用.当改变或删除其中一个对象的时候, ...

  9. slurm-16.05.3任务调度系统部署与测试(1)

      1.概述2.同步节点时间3.下载并解压文件4.编译安装munge-0.5.125.配置munge6.编译安装slurm-16.05.37.配置slurm8.配置MySQL数据库环境9.启动slur ...

  10. eclipse导入新项目后,运行时找不到主类解决办法

    最近在学习多线程,今天下了一套源码,导入到eclipse里后,随便找了个带main()的类试了一下,找不到主类. 首先想到的解决办法是把工程clean一下,并没有用.去网上找了一个遍终于找到了管用的方 ...