如何使用 TinyMCE 设置自定义组件的样式？

Question

I am using React with webPack with tinyMCE and I have a styling issue.

I created my own btn and on click I create my html structure with classes. like this :

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

I tried importing the stylesheet into the file where the editor is used, but it didn't help. How to correctly connect styles using webPack and react?

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

;

Example

Answer 1

Are you wanting to style the content in the editor via CSS? If so you can use the content_css or content_style settings in your TinyMCE configuration to pass CSS to the editor:

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