如何更改TinyMCE弹窗的风格/皮肤？

Question

我目前正在使用 TinyMCE 编辑器插入文本，该文本的配置与使用 CSS 的 TinyMCE 默认样式不同：

单击链接按钮时，会弹出一个关于如何插入或编辑链接的弹出窗口，这是正确的，但我想更改其样式，与 TinyMCE 默认样式相反，因为它不与其余部分保持一致正在使用的网络应用程序。

我见过的唯一相关代码如下：

    const makeDialog = (settings, onSubmit, editor) => {
  const urlInput = [{
      name: 'url',
      type: 'urlinput',
      filetype: 'file',
      label: 'URL',
      picker_text: 'Browse links'
    }];
  const displayText = settings.anchor.text.map(() => ({
    name: 'text',
    type: 'input',
    label: 'Text to display'
  })).toArray();
  const titleText = settings.flags.titleEnabled ? [{
      name: 'title',
      type: 'input',
      label: 'Title'
    }] : [];
  const defaultTarget = Optional.from(getDefaultLinkTarget(editor));
  const initialData = getInitialData(settings, defaultTarget);
  const catalogs = settings.catalogs;
  const dialogDelta = DialogChanges.init(initialData, catalogs);
  const body = {
    type: 'panel',
    items: flatten([
      urlInput,
      displayText,
      titleText,
      cat([
        catalogs.anchor.map(ListOptions.createUi('anchor', 'Anchors')),
        catalogs.rels.map(ListOptions.createUi('rel', 'Rel')),
        catalogs.targets.map(ListOptions.createUi('target', 'Open link in...')),
        catalogs.link.map(ListOptions.createUi('link', 'Link list')),
        catalogs.classes.map(ListOptions.createUi('linkClass', 'Class'))
      ])
    ])
  };
  return {
    title: 'Insert/Edit Link',
    size: 'normal',
    body,
    buttons: [
      {
        type: 'cancel',
        name: 'cancel',
        text: 'Cancel'
      },
      {
        type: 'submit',
        name: 'save',
        text: 'Save',
        primary: true
      }
    ],
    initialData,
    onChange: (api, {name}) => {
      dialogDelta.onChange(api.getData, { name }).each(newData => {
        api.setData(newData);
      });
    },
    onSubmit
  };
};

Answer 1

我已经设法找到解决方案。有一种方法可以覆盖 CSS 样式，方法是找出类是什么，并将 CSS 应用于与之相关的关联类，例如 HTML 如下所示

<div class="dialog-box"></div>

然后将应用下面适当的 CSS：

.dialog-box {
border: 2px solid #b1b4b6 !important;
border-radius: 0px !important; }

最终输出如下图所示：

必须包含

!important

，以便它可以覆盖默认的 TinyMCE 设置。发生的变化是灰色边框，没有边框半径。