Question

我们正在尝试为应用程序中的功能实现可变占位符。

基本上，用户将使用WYSIWYG编辑器创建模板，并将变量放入文本中，例如：

Hello {{first_name}}

这些变量随后将由我们的后端进行插值（例如，将{{first_name}}与“ Peter”交换）。

我们的用户不是技术人员，因此我们不希望他们必须手动添加占位符。我们希望他们将变量从我们预先定义的列表中拖放到其文本中。

是否有一种简便的方法可以使用DraftJS或CKEdior做到这一点？

Answer 1

感谢A2A。

我们有一个相似的功能要求，即添加带有占位符的模板以进行邮寄。

Dear {{recipient.first_name}},

  Mail Body Template

With best regards,
{{sender.first_name}} {{sender.last_name}}
Manager - ABC Company.

这是我们实施它的方式。我希望这会有所帮助。

draft-js针对这种用例提供了一个Modifier类。

Modifier API具有insertText方法，可根据您的情况在内容中插入自定义占位符文本-{{first_name}}。

import { EditorState, Modifier } from 'draft-js';

insertPlaceholder = placeholderText => {
  const { editorState } = this.state;

   const newContentState = Modifier.insertText(
      editorState.getCurrentContent(), // get ContentState from EditorState
      editorState.getSelection(),
      placeholderText
    );

    this.setState({
      editorState: EditorState.createWithContent(newContentState); // get EditorState with ContentState
    });
}

然后添加一个按钮以触发insertPlaceholder方法。

<button
  onClick={() => this.insertPlaceholder('{{first_name}}')}
>
  Add First Name
</button>

当点击Add First Name占位符时，文本将插入到当前cursor的位置。

如果编辑器焦点不清晰，则会在开始处插入文本。

对于可重用性，您可以创建一个自定义插件并将其包含在选项中。 Placeholder plugin example screenshot

注意：

如果您有多个占位符，我建议您使用带有可能的占位符选项的select input-这样可以使UI保持干净，而不用一堆按钮。

欢迎提出任何建议。

Answer 2

您可以如下创建按钮

  <button
     onMouseDown={e => this.onAddText(e, '{{first_name}}' )}
  >
     ADD Name
  </button>

和onAddText函数内部

import { insertText } from 'draft-js-modifiers';

onAddText = (e, text) => {
    e.preventDefault();
    const { editorState } = this.state;
    const EditorStat = insertText(editorState, text);
    this.setState({ editorState: EditorStat });
};

insertText是draft-js-modifiers提供的方法

，然后按如下方式使用this.state.editorState：

import {
  Editor,
} from 'draft-js';

<Editor
     editorState={this.state.editorState}
/>

Draft.js中的简单变量占位符

2 个答案: