TinyEditor安装与配置指南

TinyEditor安装与配置指南

1. 项目基础介绍

TinyEditor 是一个基于 Quill 2.0 的富文本编辑器，它在 Quill 的基础上扩展了丰富的模块和格式，例如表格、图片、链接、计数器、表情、文件、剪贴板、提及、快速菜单等。TinyEditor 是框架无关的，可以兼容 Quill API 和 Quill 模块生态，适合在多种框架如 Vue、React、Angular 中使用。

主要的编程语言：TypeScript、Vue、SCSS

2. 项目使用的关键技术和框架

• Quill: 一个模块化的富文本编辑器，提供了易于使用的API和良好的跨平台支持。
• Quill-better-table: 增强了 Quill 内置的表格模块，添加了丰富的功能。
• Quill-emoji: Quill 的表情模块，用于插入表情。
• Quill-blot-formatter: Quill 的模块，用于调整图片和视频的大小。

3. 项目安装和配置

准备工作

在开始安装之前，请确保您的系统中已安装以下工具：

• Node.js (推荐版本 LTS)
• npm (Node.js 包管理器)

安装步骤

1. 克隆项目

   在您的命令行界面中，运行以下命令来克隆 TinyEditor 项目：

   git clone git@github.com:opentiny/tiny-editor.git
   

   如果您没有设置 SSH 密钥，可能需要使用 HTTPS 的形式：

   git clone https://github.com/opentiny/tiny-editor.git
   

2. 进入项目目录

   克隆完成后，进入项目目录：

   cd tiny-editor
   

3. 安装依赖

   在项目目录中，使用以下命令安装项目依赖：

   npm install
   

   或者如果您使用的是 yarn：

   yarn install
   

4. 运行开发服务器

   安装依赖后，使用以下命令启动开发服务器：

   npm run dev
   

   或者如果您使用的是 yarn：

   yarn dev
   

   运行成功后，打开浏览器并访问 http://localhost:5173/tiny-editor/ 查看编辑器。

5. 引入样式

   在您的项目中，需要引入 TinyEditor 的样式文件。在 CSS 文件中添加以下代码：

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

6. 初始化编辑器

   在您的 JavaScript 或 TypeScript 文件中，引入并初始化 TinyEditor：

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

   确保 #editor 对应于 HTML 中放置编辑器的元素 ID。

按照上述步骤操作，您就可以成功安装并配置 TinyEditor，开始使用这个强大的富文本编辑器了。