Простые переменные заполнители в Draft.js - PullRequest
Новая
       40

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

0 голосов
/ 12 февраля 2019

Мы пытаемся реализовать переменные заполнители для функции в нашем приложении.

По сути, пользователь создаст шаблон с помощью редактора WYSIWYG и поместит переменные в текст, например: 

Hello {{first_name}}

Эти переменные будут затем интерполированы нашим бэкэндом (например, замена {{first_name}} на «Питер»).

Наши пользователи не являются техническими, поэтому мы не хотим, чтобы они добавлялизаполнители вручную.Мы хотим, чтобы они перетаскивали переменные в текст из списка, который мы предварительно определили.

Есть ли простой способ сделать это с помощью DraftJS или CKEdior из коробки?

1 Ответ

0 голосов
/ 12 февраля 2019

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

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