百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术教程 > 正文

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

toqiye 2024-08-09 17:42 24 浏览 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

相关推荐

暗网是什么?到底有多可怕?(暗网有多可怕)

https://mp.weixin.qq.com/s/O7l4rveLnXLt-XE2A0WZ3g

“暗网”是什么,到底有多可怕,互联网的“另外一个世界”

来源成戈科技说悄悄告诉你何为“暗网”,暗网的用途是什么?到底多可怕?暗网的英文是“deepnet或deepweb”,也就是深网的意思,我们都知道,南北极的冰川看起来非常雄伟,但是你物理稍微懂一点你就...

什么是暗网?暗网有什么用?进来我告诉你

网的英文是“deepnet或deepweb”,也就是深网的意思,我们都知道,南北极的冰川看起来非常雄伟,但是你物理稍微懂一点你就会知道,我们看到的只是冰山的10%,还有90%在水面以下,很容易看出来,...

网工跳槽必备,2022年最新大厂高频技术面试真题整理

2022年金三银四正在进行,很多粉丝问我要网络工程师面试方面的资料,有在学校准备实习的,有已经工作准备跳槽的。我翻看最近的笔记,正好有整理一份今年大厂的面试题分享给大家。可以先说的是,国内的互联网面试...

三天吃透操作系统面试八股文(三天吃透计算机网络八股文)

操作系统的四个特性?并发:同一段时间内多个程序执行(与并行区分,并行指的是同一时刻有多个事件,多处理器系统可以使程序并行执行)...

掌握前端面试八股文,提升个人能力,实战面试必备!

前言:前端面试是每个前端开发者职业发展中的重要环节。掌握一些常见的前端面试题目,不仅能够在面试中表现出色,还能够提升自身的技术能力和知识广度。本文将为你介绍一些实用的前端面试题目,帮助你在面试中脱颖而...

进大厂必备的Java八股文大全(2022最强精简易懂版)

2022年秋招即将来临,很多同学会问Java面试八股文有必要背吗?答案是,必须背,博主是个三本,今年凭借这篇八股文斩获了多个大厂暑期实习offer,相信秋招一定也可以发挥重要作用。你可以讨厌这种模式,...

2022最新软件测试八股文,能不能拿心仪Offer就看你背得怎样了

前言鉴于目前测试就业越来越严峻,内卷也成了测试领域的代名词了。我的一个HR朋友告诉我,由于门槛较低,现在普通测试岗(偏功能)的投递比已经将近100,也就是一个岗位差不多有百分简历投进来。所以现在还想从...

《面试八股文》之Dubbo17卷(面试 八股文)

作者:moon原文:https://mp.weixin.qq.com/s/-kVf5qWqcw-4AJF7LL3uWw前言...

前端面试八股文?不存在的!(2021前端面试问题)

最近刷到一位前端小姐姐海外工作分享的视频,分享了她的求职,面试以及工作生活的感受,了解到海外求职面试的一个过程,其中我们经常聊的...

凭借这份《2022测试八股文》候选者逆袭面试官,offer拿到手软

《2023测试面试八股文》800道软件测试面试真题,高清打印版打包带走,横扫软件测试面试高频问题,涵盖测试理论、Linux、MySQL、Web测试、接口测试、App测试、Python、Selen...

面试常考八股文及算法(一)(八股文的要求)

define和const的区别1.define是预处理指令,用于创建符号常量。`const`是C和C++的关键字,用于创建具有常量值的变量,本质是只读变量。2.`define`在预处理阶...

面试必备(背)--计算机网络八股文系列

1.OSI七层、TCP/IP四层的关系和区别?七层模型,亦称OSI(OpenSystemInterconnection),它是一个七层的、抽象的模型体,不仅包括一系列抽象的术语或概念,也包括...

Java面试一定要坚持背的八股文!错过会很可惜!

很多人对java面试题都嗤之以鼻,认为无法衡量出一个程序员的真实水平。还有一部分原因,也是因为太难背了。那我们到底还要不要背?背!当然要背!但也不是死记硬背。在我们背诵的过程中,就把java的核心知识...

面试问八股文的公司都是垃圾?(八股文负面影响)

做医生的需要有医师资格证,做财务的有CPA证书,做教师的有教师资格证等等,做程序员的从来没听说过面试的时候需要你提供什么证书,既然没有可以证明从业能力的证书,那面试的时候如何来判断候选人的基本能力呢?...

取消回复欢迎 发表评论: