powerpaste tinymce 6自定义背景插件

首先，需要在 Tinymce 6 的配置中添加一个自定义的插件：

tinymce.init({
  selector: 'textarea',
  plugins: 'powerpaste customBackground',
  toolbar: 'powerpaste customBackground',
  powerpaste_allow_local_images: true,
  powerpaste_word_import: 'clean',
  powerpaste_html_import: 'clean',
  powerpaste_block_drop: false,
  powerpaste_allow_drop: false,
  powerpaste_allow_attributes: 'src, width, height',
  powerpaste_cleanup: true,
  custom_background_color: '#f2f2f2'
});

其中，我们添加了名为 `customBackground` 的插件，并添加了一个参数 `custom_background_color`，表示自定义的背景颜色。

然后，在 `customBackground` 插件的代码中，我们需要实现以下几个步骤：

1. 在 `init` 函数中，获取配置中的 `custom_background_color` 参数，并将其设置为插件的背景颜色。

2. 在 `getContentCSS` 函数中，返回插件的 CSS 文件路径。

3. 在 `getMetadata` 函数中，返回插件的元数据，包括名称、版本号等信息。

下面是完整的 `customBackground` 插件代码：

tinymce.PluginManager.add('customBackground', function(editor, url) {
  // 获取配置中的背景颜色
  var bgColor = editor.settings.custom_background_color || '#f2f2f2';

  // 设置插件的背景颜色
  editor.getBody().style.backgroundColor = bgColor;

  // 返回插件的 CSS 文件路径
  function getContentCSS() {
    return url + '/css/custom-background.css';
  }

  // 返回插件的元数据
  function getMetadata() {
    return {
      name: "Custom Background",
      url: "https://www.example.com"
    };
  }

  return {
    getContentCSS: getContentCSS,
    getMetadata: getMetadata
  };
});

最后，在 `custom-background.css` 文件中，添加以下样式代码：

body {
  background-color: transparent !important;
}

这段代码将 Tinymce 的默认背景颜色设置为透明，从而显示出我们自定义的背景颜色。

使用以上步骤，即可实现 Tinymce 6 中自定义背景的插件。