quilljs 一款简单轻量的富文本编辑器(适合移动端)

quilljs 一款简单轻量的富文本编辑器(适合移动端),第1张

quilljs 一款简单轻量的富文本编辑器(适合移动端) quilljs入门使用教程:

quill.js是一款强大的现代富文本编辑器插件


该富文本编辑器插件支持所有的现代浏览器、平板电脑和手机。


它提供了文本编辑器的所有功能,并为开发者提供大量的配置参数和方法。


使用方法

在页面中引入编辑器主题颜色文件quill.snow.css,以及quill.js文件。


<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>

下面是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>                  HTML结构

使用下面的代码作为文本编辑器的HTML结构:

<!-- 创建工具栏组件 --> <div id="toolbar">   <button class="ql-bold">Bold</button>   <button class="ql-italic">Italic</button> </div>   <!-- 创建文本编辑器 --> <div id="editor">   <p>Hello World!</p> </div>    初始化插件

在页面DOM元素加载完毕之后,通过下面的方法来实例化一个编辑器对象。


var editor = new Quill('#editor', {   modules: { toolbar: '#toolbar' },   theme: 'snow' });

quill.js富文本编辑器配置参数查看地址:https://quilljs.com/docs/configuration/ 。


quill.js富文本编辑器API方法查看地址:https://quilljs.com/docs/api/。


quill.js富文本编辑器的github地址为:https://github.com/quilljs/quill

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/588628.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-12
下一篇 2022-04-12

发表评论

登录后才能评论

评论列表(0条)

保存