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

Question

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

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

Hello {{first_name}}

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

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

是否有使用开箱即用的DraftJS或CKEdior做到这一点的简单方法？

Answer 1

您可以如下创建按钮

  <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}
/>

Answer 2

感谢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保持干净，而不是一堆按钮。

欢迎提出任何建议。