Как стилизовать пользовательские компоненты с помощью TinyMCE? - PullRequest
Новая
       0

Как стилизовать пользовательские компоненты с помощью TinyMCE?

0 голосов
/ 05 августа 2020

Я использую React с webPack с tinyMCE, и у меня проблема со стилем.

Я создал свой собственный btn и, щелкнув его, создаю свою структуру html с классами. вот так : 

<div class="test" ><p>' + date + '</p></div><p></p>'

Я пробовал импортировать таблицу стилей в файл, в котором используется редактор, но это не помогло. Как правильно подключать стили с помощью webPack и реагировать? 

var page1Config = {
  title: 'Redial Demo - Page 2',
  body: {
    type: 'panel',
    items: [
      {
        type: 'input',
        name: 'date',
        label: 'Введите Фразу',
        items: [
          { value: 'meow', text: 'Cat' },
          { value: 'woof', text: 'Dog' },
          { value: 'thunk', text: 'Rock' }
        ]
      },
    ]
  },
  buttons: [
    {
      type: 'custom',
      name: 'lastpage',
      text: 'Done',
      disabled: false
    }
  ],
  initialData: {
    choosydata: ''
  },
  onAction: (dialogApi, details) => {
    var {date} = dialogApi.getData();
// problem is here class="test"
    tinymce.activeEditor.execCommand('mceInsertContent', false, '<div class="test" ><p>' + date + '</p></div><p></p>');

    dialogApi.close();
  }
};

tinymce.init({
  force_br_newlines : true,
force_p_newlines : true,
  selector: 'textarea.wizard',
  toolbar: 'wizardExample',
  height: '900px',
  setup: (editor) => {
    editor.ui.registry.addButton('wizardExample', {
      icon: 'code-samplelklk',
      onAction: () => {
        editor.windowManager.open(page1Config)
      }
    })
  }
})

;

Пример

1 Ответ

1 голос
/ 05 августа 2020

Хотите стилизовать контент в редакторе с помощью CSS? Если это так, вы можете использовать настройки content_ css или content_style в своей конфигурации TinyMCE, чтобы передать CSS редактору:

https://www.tiny.cloud/docs/configure/content-appearance/#content_css https://www.tiny.cloud/docs/configure/content-appearance/#content_style

...