Complex Inline Styles

复杂行内样式

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.

这些 富文本编辑器 和 彩色编辑器 的示例演示了复杂的内联样式行为。

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 模型中，内联样式体现在字符级别，使用一个不可变的 OrderedSet来定义样式的列表，以应用到各个字符上。这些样式是以字符串来识别的。（参见 字符元数据 查看更多细节。）

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 对象考虑成数组，尽管现实中我们应该尽量重用相同的不可变对象。

In essence, our styles are:

本质上，我们的样式是：

[
  [], // H
  [], // e
  ...
  ['BOLD'], // w
  ['BOLD'], // o
  // etc.
]

Overlapping Styles

重叠的样式

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

现在，我们期望让中间范围的字符也变成斜体： “Hello world” 。这个操作可以通过 Modifier API 完成。

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

最终的结果，通过增加 “ITALIC” 在相关的 OrderedSet 对象，会容纳重叠的样式。

[
  [], // H
  [], // e
  ['ITALIC'], // l
  ...
  ['BOLD', 'ITALIC'], // w
  ['BOLD', 'ITALIC'], // o
  ['BOLD'], // r
  // etc.
]

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

映射一个样式字符串到 CSS

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

默认的，Editor 提供了基础样式列表的支持：“BOLD” , "ITALIC" , "UNDERLINE" 和 "CODE" 。这些被映射到简单 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.)

在 Editor 示例里，你可以提供 customStyleMap 属性去定义你的样式对象。（参见 彩色编辑器 获取在线示例）。

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

例如，你也许想要增加一个 “STRIKETHROUGH” 样式。为此，定义一个自定义样式映射：

import {Editor} from 'draft-js';

const styleMap = {
  'STRIKETHROUGH': {
    textDecoration: 'line-through',
  },
};

class MyEditor extends React.Component {
  // ...
  render() {
    return (
      <Editor
        customStyleMap={styleMap}
        editorState={this.state.editorState}
        ...
      />
    );
  }
}

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

当渲染时，这个 textDecoration: line-through 样式会被应用到所有有着 STRIKETHROUGH 样式的字符范围中。