Within your editor, you may wish to provide a wide variety of inline style behavior that goes well beyond the bold/italic/underline basics. For instance, you may want to support variety with color, font families, font sizes, and more. Further, your desired styles may overlap or be mutually exclusive.

在编辑器中,你可能需要提供各种各样的内联样式行为,这些行为远远超出了基本的 bold/italic/underline。例如,你可能希望支持颜色、字体系列、字体大小等等的多样的样式。然而，你想要的样式可能会重叠或者相互排斥。

The Rich Editor and Colorful Editor examples demonstrate complex inline style behavior in action.

Rich Editor 和 Colorful Editor 示例演示了复杂的行内样式行为。

Model

Within the Draft model, inline styles are represented at the character level, using an immutable OrderedSet to define the list of styles to be applied to each character. These styles are identified by string. (See CharacterMetadata for details.)

在Draft model中,内联样式代表着字符级别的样式，使用不可变的 OrderedSet 来定义要应用于每个字符的样式列表。这些样式用由字符串来标示。(具体可见CharacterMetadata)。

For example, consider the text “Hello world“. The first six characters of the string are represented by the empty set, OrderedSet(). The final five characters are represented by OrderedSet.of('BOLD'). For convenience, we can think of these OrderedSet objects as arrays, though in reality we aggressively reuse identical immutable objects.

例如,考虑这个”Hello world“文本.字符串的前六个字符由空集 OrderedSet() 来表示.最后五个字符由OrderedSet.of('BOLD')来表示。为了方便起见，我们可以将这些OrderedSet对象作为数组,尽管在现实中我们会大量复用相同的immutable对象。

In essence, our styles are:

在本质上，我们的风格是:

  1. [
  2.   [], // H
  3.   [], // e
  4.   // ...
  5.   ['BOLD'], // w
  6.   ['BOLD'], // o
  7.   // etc.
  8. ];

Overlapping Styles

Now let’s say that we wish to make the middle range of characters italic as well: Hello _wo_rld. This operation can be performed via the Modifier API.

现在，我们希望将字符的中间部分也设置为斜体(italic): Hello _wo_rld.这个操作可以通过 Modifier API来实现。

The end result will accommodate the overlap by including 'ITALIC' in the relevant OrderedSet objects as well.

最终的结果将通过在相关的OrderedSet对象中包含 'ITALIC' 来适应样式上的重叠。

  1. [
  2.   [], // H
  3.   [], // e
  4.   ['ITALIC'], // l
  5.   // ...
  6.   ['BOLD', 'ITALIC'], // w
  7.   ['BOLD', 'ITALIC'], // o
  8.   ['BOLD'], // r
  9.   // etc.
  10. ];

When determining how to render inline-styled text, Draft will identify contiguous ranges of identically styled characters and render those characters together in styled span nodes.

当确定如何渲染内联样式的文本,Draft将识别具有相同样式的字符的连续范围,并将这些字符一起渲染在具有样式的span节点中。

Mapping a style string to CSS

By default, Editor provides support for a basic list of inline styles: 'BOLD', 'ITALIC', 'UNDERLINE', and 'CODE'. These are mapped to plain CSS style objects, which are used to apply styles to the relevant ranges.

默认情况下,Editor提供了一个基础的内联样式列表: 'BOLD', 'ITALIC', 'UNDERLINE', 和 'CODE'。它们被映射到普通的CSS样式对象上，后者CSS样式对象用于将样式应用到相关范围。

For your editor, you may define custom style strings to include with these defaults, or you may override the default style objects for the basic styles.

对于您的编辑器，您可以定义自定义样式字符串来包含这些默认值，或者您可以覆盖基本样式的默认样式对象。

Within your Editor use case, you may provide the customStyleMap prop to define your style objects. (See Colorful Editor for a live example.)

在编辑器用例中,你可以提供一个customStyleMap的prop属性去定义你的样式对象。(看 Colorful Editor 一个生动的例子)

For example, you may want to add a 'STRIKETHROUGH' style. To do so, define a custom style map:

例如，您可能想要添加一个'STRIKETHROUGH'样式。为此，定义一个自定义样式映射:

  1. import {Editor} from 'draft-js';
  2. const styleMap = {
  3.   'STRIKETHROUGH': {
  4.     textDecoration: 'line-through',
  5.   },
  6. };
  7. class MyEditor extends React.Component {
  8.   // ...
  9.   render() {
  10.     return (
  11.       <Editor
  12.         customStyleMap={styleMap}
  13.         editorState={this.state.editorState}
  14.         ...
  15.       />
  16.     );
  17.   }
  18. }

When rendered, the textDecoration: line-through style will be applied to all character ranges with the STRIKETHROUGH style.

当渲染的时候,textDecoration: line-through这个css样式将被用用于所有具有STRIKETHROUGH的字符范围中。