在反应羽毛笔中使用跨度

Question

我正在尝试使用react-quill创建一个Quill Editor组件，其默认值包括一些需要单独识别的单词周围的<span>标签。

在初始渲染时，编辑器会不断删除我的span标签。我试图创建一个印迹来规避此问题，但是它似乎没有用。这是我的印迹代码：

import * as React from 'react';
import ReactQuill, { Quill } from 'react-quill';

let Inline = Quill.import('blots/inline')
class SpanBlot extends Inline { }
SpanBlot.blotName = 'span';
SpanBlot.tagName = 'span';
Quill.register('formats/span', SpanBlot);

这是我的渲染功能：

render() {
    return (
      <ReactQuill
        modules={{toolbar: null}}
        value={this.state.text}
        onChange={this.handleTextChange}
        ref={'editor'}
        onChangeSelection={this.onChangeSelection}
        formats={['formats/span', 'span', 'id', 'key', 'bold', 'underline', 'link']}
      />
    )
  }

我也希望能够在id上设置key或spans的值，但是现在我只希望能够将它们放入组件中全部。