Trix 编辑器自定义工具栏

Trix 是一款基于 JavaScript 的富文本编辑器，提供丰富的API 可以实现自定义配置，利用这些 API 可以打造属于自己的编辑器，应用于各业务场景。

比如业务场景中，需要将工具栏跟编辑器分离，使用 API 调用的方式封装各 toolbar 按钮。

本文以 React 使用 Trix 为示例，实现一个自定义的改变颜色功能。

首先，配置好隐藏 toolbar 的编辑器实例，其中 id 都需要和 trix 实例中的配置一样：


<input id="A" type="hidden" name="content" />
<div id="no-toolbar" hidden />
{createElement('trix-editor', {
  input: 'A',
  toolbar: 'no-toolbar',
})}

然后设置自定义样式值，通过 textAttributes 属性将 color 映射为另外的值 wrapColor：


Trix.config.textAttributes.wrapColor = {
      styleProperty: 'color',
      inheritable: true,
};

主动调用编辑器实例中的 activateAttribute 方法，将 color 应用到选中的文本


document.querySelector('trix-editor').editor?.activateAttribute('wrapColor', color.hex);

完整代码如下，可参考线上代码示例代码 demo


import React, { useEffect, useState, createElement} from 'react';
import { Popover } from 'antd';

import * as Trix from 'trix';
import 'trix/dist/trix.css';
import { SketchPicker, ColorResult } from 'react-color';

export default function App() {
  const [color, setColor] = React.useState('#000');

  useEffect(() => {
    Trix.config.textAttributes.wrapColor = {
      styleProperty: 'color',
      inheritable: true,
    };
  });

  const onChange = (color) => {
    setColor(color.hex);
    document
      .querySelector('trix-editor')
      .editor?.activateAttribute('wrapColor', color.hex);
  };

  return (
    <>
      <div className="toolbar">
        <Popover
          content={<SketchPicker onChangeComplete={onChange} color={color} />}
          title={null}
          trigger="click"
        >
          <div style={{ background: color, width: 30, height: 20 }}></div>
        </Popover>
      </div>

      <input id="A" type="hidden" name="content" />
      <div id="no-toolbar" hidden />
      {createElement('trix-editor', {
        input: 'A',
        toolbar: 'no-toolbar',
      })}
    </>
  );
}