trix.js是一款富文本编辑器插件-BFW插件库

trix.js是一款富文本编辑器插件

Trix是一个开源项目，由Ruby on Rails的创建者37signals公司开发。与其他所见即所得编辑器不同，Trix在2014年被设计出来时，并没有采用基于HTML的contenteditable和execCommand API，这些由微软设计的API在当时主要支持在Internet Explorer 5.5中网页的现场编辑，并被其他浏览器逆向工程并复制。

由于这些API并没有完全规范和文档化，而且HTML编辑器的范围非常广，所以每个浏览器的实现都有自己的一套Bug和特点，JavaScript开发者需要解决这些不一致性。

但Trix采取了不同的方法，将contenteditable当作一个输入/输出装置，将输入转换为内部文档模型上的编辑操作，然后将那个文档重新渲染回编辑器，从而完全控制每一次敲击键盘后发生的事情。

要开始使用Trix，可以通过npm CDN将其包含在页面的<head>部分：

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/trix.min.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/trix.umd.min.js"></script>

Trix支持所有桌面和移动的自我更新的常青浏览器。它建立在现有的Web标准上，特别是自定义元素、变动观察者和Promise。

要创建一个编辑器，页面上需要放置一个空的<trix-editor></trix-editor>标签。Trix会自动在编辑器前插入一个单独的<trix-toolbar>。与HTML <textarea>一样，<trix-editor>可以接受自动聚焦和占位符属性。不同的是，<trix-editor>会自动垂直扩展以适应其内容。

要让<trix-editor>的内容和表单一起提交，首先在表单中定义一个隐藏的输入字段并分配一个ID，然后在编辑器的输入属性中引用该ID。

<form …>
<input id="x" type="hidden" name="content">
<trix-editor input="x"></trix-editor>
</form>

每次编辑器内容变化，Trix都会自动更新隐藏输入字段的值。如果要用存储的内容填充<trix-editor>，请在关联输入元素的值属性中包含该内容。

为了确保编辑时所见与保存后所见相同，使用CSS类名来指定Trix格式化内容的样式。在你的<trix-editor>元素上和在应用程序中呈现存储的Trix内容以供显示时，使用这个类名。

<trix-editor class="trix-content"></trix-editor>
<div class="trix-content">Stored content here</div>

完整示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <title>BFW NEW PAGE</title>

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/trix.min.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/trix.umd.min.js"></script>

</head>
<body>
    
      <input id="x" value="Editor content goes here" type="hidden" name="content">
  <trix-editor input="x"></trix-editor>
   
   <script>
       var element = document.querySelector("trix-editor")

element.editor.setSelectedRange([2, 6])
element.editor.insertHTML("<strong>Hello1</strong>")
   </script>
</body>
</html>

更多文档：https://github.com/basecamp/trix