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

登录后查看全文