Trix 富文本编辑器使用教程

2026-01-17 09:26:37作者：蔡丛锟

1. 项目的目录结构及介绍

Trix 项目的目录结构如下：

trix/
├── assets/
│   ├── images/
│   └── stylesheets/
├── dist/
│   ├── trix.css
│   └── trix.umd.min.js
├── lib/
│   ├── trix/
│   └── trix.js
├── src/
│   ├── coffee/
│   └── stylesheets/
├── test/
│   ├── acceptance/
│   ├── integration/
│   └── unit/
├── .editorconfig
├── .eslintrc.json
├── .gitignore
├── .npmignore
├── .prettierrc
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── package.json
├── rollup.config.js
└── yarn.lock

目录介绍

assets/: 包含项目所需的静态资源，如图片和样式表。
dist/: 包含编译后的文件，如 trix.css 和 trix.umd.min.js。
lib/: 包含 Trix 的核心库文件。
src/: 包含源代码文件，包括 CoffeeScript 和样式表。
test/: 包含各种测试文件，如单元测试、集成测试和验收测试。
.editorconfig, .eslintrc.json, .gitignore, .npmignore, .prettierrc: 配置文件，用于代码格式化和版本控制。
CODE_OF_CONDUCT.md, CONTRIBUTING.md: 贡献指南和行为准则。
LICENSE: 项目许可证。
README.md: 项目说明文档。
package.json: 项目依赖和脚本配置。
rollup.config.js: Rollup 打包配置文件。
yarn.lock: Yarn 依赖锁定文件。

2. 项目的启动文件介绍

Trix 的启动文件主要是 dist/ 目录下的 trix.umd.min.js 和 trix.css。这些文件是编译后的版本，可以直接在网页中使用。

使用方法

在 HTML 文件的 <head> 标签中引入这两个文件：

<head>
  <link rel="stylesheet" type="text/css" href="https://unpkg.com/trix@2.0.8/dist/trix.css">
  <script type="text/javascript" src="https://unpkg.com/trix@2.0.8/dist/trix.umd.min.js"></script>
</head>

然后在页面中添加一个空的 <trix-editor></trix-editor> 标签，Trix 会自动插入一个 <trix-toolbar> 工具栏。

3. 项目的配置文件介绍

Trix 的配置文件主要是 package.json 和 rollup.config.js。

`package.json`

package.json 文件包含了项目的依赖、脚本和其他元数据。以下是一些关键部分：

{
  "name": "trix",
  "version": "2.0.8",
  "description": "A rich text editor for everyday writing",
  "main": "dist/trix.umd.min.js",
  "module": "dist/trix.esm.js",
  "scripts": {
    "build": "rollup -c",
    "watch": "rollup -c -w",
    "dev": "yarn watch & yarn serve",
    "serve": "serve dist"
  },
  "dependencies": {
    "custom-elements": "^1.4.3"
  },
  "devDependencies": {
    "rollup": "^2.3.4",
    "serve": "^11.3.2"
  }
}

`rollup.config.js`

rollup.config.js 文件是 Rollup 的配置文件，用于打包和编译源代码。以下是一些关键部分：

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import { terser } from

trix

A rich text editor for everyday writing

项目地址：https://gitcode.com/gh_mirrors/tr/trix

登录后查看全文

项目优选

收起

kernel

deepin linux kernel

docs

OpenHarmony documentation | OpenHarmony开发者文档

🔥LeetCode solutions in any programming language | 多种编程语言实现 LeetCode、《剑指 Offer（第 2 版）》、《程序员面试金典（第 6 版）》题解

Java

nop-entropy

Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用

🎉 (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统

喝着茶写代码！最易用的自托管一站式代码托管平台，包含Git托管，代码审查，团队协作，软件包和CI/CD。

kernel

openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。

350

203

pytorch

Ascend Extension for PyTorch

无需学习 Kubernetes 的容器平台，在 Kubernetes 上构建、部署、组装和管理应用，无需 K8s 专业知识，全流程图形化管理