该 importcss 插件增加了从 content_css 配置设置中指定的CSS文件自动导入CSS类的功能。

默认情况下，像 ".my-class"、".my-class1.my-class2" 和 "p.my-class" 这样的选择器会被作为格式规则导入。

基本设置

tinymce.init({
  selector: 'textarea',  // 根据需要修改此值以适应您的 HTML
  plugins: 'importcss',
  content_css: '/my-styles.css'
});

有关如何使用模块打包器将此插件打包的信息，请参阅 打包 TinyMCE - 概述。

选项

这些设置影响 importcss 插件的执行，特别是这些操作的处理方式。

importcss_append

如果将此选项设置为 true，则会将导入的样式追加到 Format 菜单的末尾，并替换默认格式。

类型： Boolean

默认值： false

可能的值： true、false

示例：使用 importcss_append

tinymce.init({
  selector: 'textarea',  // 根据需要修改此值以适应您的 HTML
  plugins: 'importcss',
  content_css: '/my-styles.css',
  importcss_append: true
});

importcss_exclusive

如果将其设置为 false，则选择器将不会全局独占，意味着它们可以存在于两个独立的组中。这对于希望将".class"导入为段落选择器和 span 格式选择器的情况非常有用。

类型： Boolean

默认值： true

可能的值： true、false

示例：使用 importcss_exclusive

tinymce.init({
  selector: 'textarea',  // 根据需要修改此值以适应您的 HTML
  plugins: 'importcss',
  content_css: '/my-styles.css',
  importcss_exclusive: false
});

importcss_file_filter

此选项允许您添加用于填充样式下拉列表的CSS文件。它将遍历所有 @import 规则，并仅针对指定的文件。此选项可以是 String、RegExp 或 Function。这还允许您以内联模式从当前可编辑页面上的现有文件导入样式。

类型： String、RegExp 或 Function

示例：使用 importcss_file_filter

tinymce.init({
  selector: 'textarea',  // 根据需要修改此值以适应您的 HTML
  plugins: 'importcss',
  content_css: '/my-styles.css',
  importcss_file_filter: '/my-styles.css'
});

使用 importcss_file_filter 的 RegExp 过滤器示例

tinymce.init({
  selector: 'textarea',  // 根据需要修改此值以适应您的 HTML
  plugins: 'importcss',
  content_css: '/my-styles.css',
  importcss_file_filter: /\/my-styles/
});

使用函数过滤器与 importcss_file_filter 的示例

tinymce.init({
  selector: 'textarea',  // 根据需要修改此值以适应您的 HTML
  plugins: 'importcss',
  content_css: '/my-styles.css',
  importcss_file_filter: (file) =>
    file.indexOf('my-styles') !== -1
});

importcss_groups

此选项允许将匹配的选择器分组到 Formats 菜单下拉列表的子菜单中。您可以使用 String、RegExp 或 Function 来过滤选择器。您也可以省略过滤器，以将所有不匹配的选择器放入特定组。您还可以指定一个组特定的 selector_converter，以便由该转换器生成特定组的格式。

类型： Array

使用字符串过滤器与 importcss_groups 的示例

tinymce.init({
  selector: 'textarea',  // 根据需要修改此值以适应您的 HTML
  plugins: 'importcss',
  content_css: '/my-styles.css',
  importcss_groups: [
    { title: 'Table styles', filter: /^(td|tr)\./ }, // td.class 和 tr.class
    { title: 'Block styles', filter: /^(div|p)\./ }, // div.class 和 p.class
    { title: 'Other styles' } // 其他
  ]
});

importcss_merge_classes

此选项用于需要替换或合并 class 属性的情况。例如，如果您有多个类，可以将它们全部应用到同一个元素上。如果将此选项设置为 false，它将始终替换 class 属性的内容。

类型： Boolean

默认值： true

可能的值： true、false

示例：使用 importcss_merge_classes

tinymce.init({
  selector: 'textarea',  // 根据需要修改此值以适应您的 html
  plugins: 'importcss',
  content_css: '/my-styles.css',
  importcss_merge_classes: false
});

importcss_selector_converter

此选项允许您覆盖默认的选择器格式转换器函数。这使您可以手动解析CSS选择器并从中生成格式对象。如果转换器返回false值，则该选择器将被忽略，不进行导入。

类型： Function

示例：使用importcss_selector_converter

tinymce.init({
  selector: 'textarea',  // 根据HTML修改此值
  plugins: 'importcss',
  content_css: '/my-styles.css',
  importcss_selector_converter: (selector) => {
    // 自定义逻辑
  }
});

importcss_selector_filter

此选项使您只能导入匹配过滤器的选择器中的类。过滤器可以是String、RegExp或Function。请参阅以下示例。

类型： String、RegExp或Function

使用字符串过滤器与importcss_selector_filter的示例

tinymce.init({
  selector: 'textarea',  // 根据HTML修改此值
  plugins: 'importcss',
  content_css: '/my-styles.css',
  importcss_selector_filter: '.my-prefix-'
});

使用RegExp过滤器与importcss_selector_filter的示例

tinymce.init({
  selector: 'textarea',  // 根据HTML修改此值
  plugins: 'importcss',
  content_css: '/my-styles.css',
  importcss_selector_filter: /\.prefix|\.otherprefix/
});

使用函数过滤器与importcss_selector_filter的示例

tinymce.init({
  selector: 'textarea',  // 根据HTML修改此值
  plugins: 'importcss',
  content_css: '/my-styles.css',
  importcss_selector_filter: (selector) =>
    selector.indexOf('myprefix') !== -1
});