专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

Ruby on Rails 作者的 WYSIWYG 编辑器 Trix 火了!

ins518 2024-09-27 09:27:31 技术文章 20 ℃ 0 评论

大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

1.什么是 Trix

Trix is a WYSIWYG editor for writing messages, comments, articles, and lists—the simple documents most web apps are made of. It features a sophisticated document model, support for embedded attachments, and outputs terse and consistent HTML.

Trix 是用于日常写作的富文本编辑器，在 Web 应用程序中撰写格式精美的文本。 同时，Trix 是一个所见即所得（即，WYSIWYG）的编辑器，用于编写消息、评论、文章和列表等，而大多数 Web 应用程序都是由这些简单文档组成的。 Trix 具有复杂的文档模型、对嵌入附件的支持以及输出简洁且一致的 HTML。

Trix 是 Ruby on Rails 的创建者 37signals 的开源项目。Ruby on Rails 是一个全栈框架，附带了在前端和后端构建令人惊叹的 Web 应用程序所需的所有工具。

当 Trix 于 2014 年设计时，大多数 WYSIWYG 编辑器都是 HTML 的 contenteditable 和 execCommand API 的包装器，这些 API 由 Microsoft 设计，用于支持 Internet Explorer 5.5 中的网页实时编辑，并最终被其他浏览器进行逆向工程和复制。

<blockquote contenteditable="true">
  <p>Edit this content to add your own quote</p>
</blockquote>
<cite contenteditable="true">-- Write your own name here</cite>

由于这些 API 没有完全确定和标准化，因此每个浏览器的实现都有自己的一组错误和怪癖，JavaScript 开发人员需要解决这些不一致之处。

Trix 通过将 contenteditable 视为 I/O 设备来避免这些不一致，即当用户输入到达编辑器时，Trix 将该输入转换为其内部文档模型上的编辑操作，然后将该文档重新渲染回编辑器。 这使 Trix 可以完全控制每次击键后发生的情况，并且根本不需要使用 execCommand。

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
// 注意：该方法也已经废弃

最终，这种方法也成为所有现代所见即所得编辑器的常用方法。

目前 Trix 在 Github 通过 MIT 协议开源，有超过 18.3k 的 star、1.1k 的 fork、11.9k 的项目依赖量、代码贡献者 100+，妥妥的前端优质开源项目。

2.如何使用 Trix

2.1 安装与使用

Trix 以 ESM 和 UMD 格式打包在一起，可与任何资源打包工具配合使用。 开始使用 Trix 的最简单方法是将其从 npm CDN 包含在页面的 <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>

当然，开发者也可以通过 NPM、yarn 等包管理工具进行下载和使用:

import Trix from "trix"

document.addEventListener("trix-before-initialize", () => {
  // 这里可以修改 Trix.config 的配置
})

开发者需要在页面上放置一个空的 <trix-editor></trix-editor> 标记，Trix 会在编辑器之前自动插入一个单独的 <trix-toolbar>。

与 HTML <textarea> 一样，<trix-editor> 接受 autofocus 和 placeholder 属性，但是与 <textarea> 不同 <trix-editor> 自动垂直扩展以适应其内容。

2.2 其他特性

Trix 编辑器支持无限制的撤消和重做，连续的输入和格式更改会以五秒的间隔合并在一起，所有其他输入更改都单独记录在撤消历史记录中。

element.editor.undo()
element.editor.redo()

Trix 还支持使用 JSON.stringify 序列化编辑器的状态，并使用 editor.loadJSON 方法恢复保存的状态。序列化状态包括文档和当前选择，但不包括撤消历史记录。

// 将编辑器状态存储在localStorage中
localStorage["editorState"] = JSON.stringify(element.editor)

// 从localStorage重新获取编辑器状态
element.editor.loadJSON(JSON.parse(localStorage["editorState"]))

Trix 支持将格式设置应用于当前选择，可以使用 editor.activateAttribute 方法:

element.editor.insertString("Hello")
element.editor.setSelectedRange([0, 5])
element.editor.activateAttribute("bold")

更多关于 Trix 的用法可以参考文末资料，本文不再过多展开。

参考资料

https://github.com/basecamp/trix

https://trix-editor.org/

https://www.bypeople.com/trix-rich-text-editor-for-everyday-writing/

https://www.youtube.com/watch?v=ZMcejBBDz4E

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表