这一款开源免费的富文本编辑器，是值得推荐的-Quil

这一款开源免费的富文本编辑器，是值得推荐的-Quill

绍

Quill是一个所见即所得的富文本编辑器，是一个集兼容性和可扩展性于一体的优秀编辑器，

Github

https://github.com/quilljs/quill

Quill特点

开发友好

通过简单的API可以细粒度地访问编辑器的内容，更改和事件。使用JSON作为输入和输出一致且确定性的工作

兼容性好

支持台式机，平板电脑和手机上的所有现代浏览器。体验相同的一致行为，并跨平台生成HTML。

自定义内容和格式

在过去，评估富文本编辑器就像比较所需格式的清单一样简单。一个好的RTF编辑器的标志就是它支持多少种格式。虽然这很重要，但是如果能够自定义内容和格式，那其扩展性将是无限的。

使用方便

所有这些好处都包含在易于使用的代码中。 Quill带有默认值，只需几行Javascript就可以立即使用它：

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

如果不需要自定义，那么你只需享受现成的丰富而一致的体验即可。

截图

功能上支持图片上传、视频、代码高亮（内置了highlight）等功能

快速开始

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="quill.snow.css" rel="stylesheet">
</head>
<body>
    <!-- 编辑器容器 -->
    <div id="editor">
        <p>Hello World!</p>
        <p>Some initial <strong>bold</strong> text</p>
        <p><br></p>
    </div>

    <!-- 引入quill -->
    <script src="quill.js"></script>

    <!--初始化 -->
    <script>
        var quill=new Quill('#editor', {
            theme: 'snow'
        });
    </script>
</body>

</html>

总结

本文对于Quill的介绍有限，但是并不能掩饰它的优秀，具体的用法和API可以参考官方文档，不过萝卜青菜，各有所爱，合适的才是最好的！

介

Quill是一个强大的富文本编辑器，可以帮助用户创建和编辑富文本内容。富文本编辑器可以让用户在网页上自由地输入和编辑文本，并添加各种样式和格式。Quill具有快速、灵活、可定制等特点，可以适用于各种场景，包括博客、在线文档、即时通讯等。

Quill的富文本编辑功能包括基本的文本格式化（如加粗、斜体、下划线等）、段落对齐和缩进、链接和引用、代码块和代码高亮等。此外，Quill还支持插入图片、视频、表情等多媒体内容，以及绘制简单的图形和图表。

Quill的另一个优点是它的可定制性。可以通过配置选项和模块来定制Quill编辑器的外观和功能。例如，可以添加自定义的工具栏按钮、修改主题样式、添加额外的格式化选项等。

在使用Quill时，可以通过引入Quill库和样式表来初始化编辑器，并使用JavaScript API来控制编辑器的行为和功能。Quill还提供了丰富的API和文档，方便开发者进行定制和扩展。

Quickstart

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