查看原文
其他

​Quill:37k+ stars 一款API驱动的富文本编辑器!非常强大!开源免费!

小胡 爱编程爱技术 2023-12-13

Quill 是一个开源的、跨平台、跨浏览器的富文本编辑器,专为兼容性和可扩展性而构建。凭借其可扩展架构和富有表现力的 API,可以完全自定义它以满足个性化的需求。用户可以非常方便地实现自定义功能。它由 Jason Chen 和 Byron Milligan 两位大神创建,并由 Slab 积极维护。

项目完全免费开源,目前在Github上以获得 37.1k stars 非常受欢迎!

该富文本编辑器的特点:
  • API 驱动的设计
  • 支持 Chrome, Firefox, Safari, and IE 9+

  • 标准化 HTML

  • 通过其模块和富有表现力的 API 完全可定制
  • 快速且轻量级

  • 可以将内容表示为 JSON,更易于处理和转换为其他格式;
  • 提供两个主题以快速轻松地更改编辑器的外观

架构设计

Quill.js 架构清晰,核心功能简介:
  • Delta:富文本数据层,负责描述数据

  • Parchment:富文本控制器层,负责操控 dom,将数据变化映射到 UI 表示

  • Formats :Quill支持多种格式,包括UI控件和API调用

  • Module:模块化形式,负责解耦功能项,管控模块加载

下载安装
方式1:npm安装
npm - npm install quill
方式2:CDN引入
<!-- Main Quill library --><script src="//cdn.quilljs.com/1.0.0/quill.js"></script><script src="//cdn.quilljs.com/1.0.0/quill.min.js"></script>
<!-- Theme included stylesheets --><link href="//cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet" /><link href="//cdn.quilljs.com/1.0.0/quill.bubble.css" rel="stylesheet" />
<!-- Core build with no theme, formatting, non-essential modules --><link href="//cdn.quilljs.com/1.0.0/quill.core.css" rel="stylesheet" /><script src="//cdn.quilljs.com/1.0.0/quill.core.js"></script>
快速体验
<!-- Include stylesheet --><link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<!-- Create the editor container --><div id="editor"> <p>Hello World!</p> <p>Some initial <strong>bold</strong> text</p> <p><br></p></div>
<!-- Include the Quill library --><script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<!-- Initialize Quill editor --><script> var quill = new Quill('#editor', { theme: 'snow' });</script>
效果展示

附官网地址:

官网:https://quilljs.com/

开源地址:https://github.com/quilljs/quill/

开发手册:https://quilljs.com/docs/quickstart/

END

点点关注不迷路

本文发表于公众号【爱编程爱技术

关注我们,阅读更多精彩内容

点击上方关注我们,谢谢支持

往期推荐:

TLog:轻量级的分布式日志标记追踪神器
He3:一款垂直于开发者的免费工具箱
继续滑动看下一个

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存