Простые заполнители переменных в Draft.js

Вы можете создать кнопку следующим образом

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

Спасибо за А2А.

У нас было аналогичное требование к функции для добавления шаблонов с заполнителями для рассылки.

Dear {{recipient.first_name}},

  Mail Body Template

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

Вот как мы это реализовали. Надеюсь, это будет полезно.

черновик-js предоставляет класс Модификатор именно для этого варианта использования.

Modifier В API есть метод вставить текст для вставки пользовательского текста-заполнителя в контент — {{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 позиция.

Если редактор не в фокусе, текст будет вставлен в начало.

Для повторного использования вы можете создать собственный плагин и включить его в опции. Скриншот примера плагина-заполнителя

Примечание:

Если у вас есть несколько заполнителей, я бы предложил использовать select input с возможными вариантами заполнителей — это сохранит чистоту пользовательского интерфейса, а не кучу кнопок.

Любые предложения приветствуются.