当前位置：网站首页 > 技术文章 > 正文

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

myzbx 2024-12-01 18:30 17 浏览

介绍

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可以参考官方文档，不过萝卜青菜，各有所爱，合适的才是最好的！

HTML 编辑器

上一篇：DevExpress Demo示例展示:所见即所得的HTML编辑器
下一篇：树莓派推出网页端代码编辑器，帮入门者快速上手Python等项目

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

介绍

Github

Quill特点

截图

快速开始

总结

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

用上Vue3，你真的变了吗?（vue3 key）

说下你的vue项目的目录结构，该怎么划分?

8.7k star，一款超炫酷的动态可视化大屏项目

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」