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

Question

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

;

Example

Answer 1

您要通过 CSS 在编辑器中设置内容样式吗？如果是这样，您可以在 TinyMCE 配置中使用 content_css 或 content_style 设置将 CSS 传递给编辑器：

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

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

How to styling custom components with TinyMCE?

javascript

tinymce

reactjs