37k+ stars 一款API驱动的富文本编辑器

该富文本编辑器的特点:

  • API 驱动的设计
  • 支持 Chrome, Firefox, Safari, and IE 9+
  • 标准化 HTML
  • 通过其模块和富有表现力的 API 完全可定制
  • 快速且轻量级
  • 可以将内容表示为 JSON,更易于处理和转换为其他格式;
  • 提供两个主题以快速轻松地更改编辑器的外观
图片[1]-37k+ stars 一款API驱动的富文本编辑器-山海云端论坛

架构设计

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>

© 版权声明
THE END
喜欢就支持一下吧
点赞12 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容