选择你喜欢的标签
我们会为你匹配适合你的网址导航

    确认 跳过

    跳过将删除所有初始化信息

    TinyEditor 一款富文本编辑器

    源码 2025-06-21 12:20

    声明:该文章来自(一飞开源)版权由原作者所有,K2OS渲染引擎提供网页加速服务。

    TinyEditor 富文本编辑器

    TinyEditor 是一个基于 Quill 2.0 的富文本编辑器,在 Quill 基础上扩展了表格、图片、超链接、复制粘贴、插入表情、文件上传、@提醒、斜杆菜单等丰富的模块和格式,框架无关、兼容 Quill API、兼容 Quill 模块生态。

    二、开源协议

    使用MIT开源协议

    三、界面展示

    .

    四、功能概述

    TinyEditor

    一个基于 Quill 2.0 的富文本编辑器,在 Quill 基础上扩展了丰富的模块和格式,功能强大、开箱即用。

    项目优势

    TinyEditor 主要有以下特点和优势:

    • 包含 30 多种丰富的模块和格式,除了 Quill 内置的 21 种格式之外,还扩展和增强了表格、图片、超链接、字数统计、表情、文件上传、复制粘贴、@提醒、斜杆快捷菜单、截图等 15 种模块和格式
    • 强大的表格功能,支持在工具栏插入指定行列的表格、表格行高/列宽拖拽、插入行/列、删除行/列、合并/拆分单元格等丰富的表格操作
    • 与框架无关,可以在 Vue、React、Angular 等多种框架中使用
    • 兼容 Quill 所有 API,兼容 Quill 生态模块和格式

    开箱即用

    内置 30 多种丰富的模块和格式。

    功能强大

    在 Quill 基础上扩展了表格、图片、文件上传、@提醒等丰富特性。

    框架无关

    可以在 Vue、React、Angular 等多种框架中使用。

    兼容 Quill

    兼容 Quill API 和生态。

    五、技术选型

    快速入门

    安装 TinyEditor:

    npm i @opentiny/fluent-editor

    编写 html:

    <divid="editor"> <p>Hello TinyEditor!</p> </div>

    引入样式:

      @import'@opentiny/fluent-editor/style.css';

      初始化 TinyEditor 编辑器:

        import TinyEditor from '@opentiny/fluent-editor' const editor = new TinyEditor('#editor', {  theme: 'snow',})

        本地开发

          git clone tiny-editorcd tiny-editorpnpm ipnpm dev

          打开浏览器访问:
          http://localhost:5173/tiny-editor/

          致谢

          感谢:

          • quill 项目,它是一款 API 驱动的富文本编辑器,采用模块化架构,可扩展性好,易于使用,支持跨平台,TinyEditor 基于 Quill 扩展和增强了表格、图片、超链接等大量模块和格式。
          • quill-better-table 项目,它增强了 Quill 内置表格模块,增加了丰富的功能,TinyEditor 的表格操作功能基于 quill-better-table。
          • quill-emoji 项目,它是一个用于表情符号的 Quill 模块,TinyEditor 的插入表情功能基于 quill-emoji。
          • quill-blot-formatter 项目,它是一个用于调整图像和视频大小的 Quill 模块,TinyEditor 的图片缩放功能基于 quill-blot-formatter。

          关注我们

          [超站]友情链接:

          四季很好,只要有你,文娱排行榜:https://www.yaopaiming.com/
          关注数据与安全,洞悉企业级服务市场:https://www.ijiandao.com/

          图库