Import CSS plugin

The importcss plugin adds the ability to automatically import CSS classes from the CSS file specified in the content_css configuration setting.

By default selectors like ".my-class", ".my-class1.my-class2" and "p.my-class" get imported as format rules.

Basic setup

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'importcss',
  content_css: '/my-styles.css'
});

Options

These settings affect the execution of the importcss plugin, specifically the way that these operations are handled.

importcss_append

If set to true this option will append the imported styles to the end of the Format menu and will replace the default formats.

Type: Boolean

Default value: false

Example: using importcss_append

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'importcss',
  content_css: '/my-styles.css',
  importcss_append: true
});

importcss_exclusive

If set to false then selectors will not be globally exclusive meaning they can exist in two separate groups. This can be useful for scenarios where you want to have a ".class" imported as a paragraph selector and as a span format selector.

Type: Boolean

Default value: true

Example: using importcss_exclusive

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'importcss',
  content_css: '/my-styles.css',
  importcss_exclusive: false
});

importcss_file_filter

This option enables you to add the CSS files that should be used for populating the styles drop down. This will go through any @import rules and only target the specified file. This option can be either a String, RegExp or a Function. This also allows you to import styles form existing files on the currently editable page in inline mode.

Type: String, RegExp or Function

Example: using importcss_file_filter

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'importcss',
  content_css: '/my-styles.css',
  importcss_file_filter: '/my-styles.css'
});

Example using a RegExp filter with importcss_file_filter

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'importcss',
  content_css: '/my-styles.css',
  importcss_file_filter: /\/my-styles/
});

Example using a function filter with importcss_file_filter

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'importcss',
  content_css: '/my-styles.css',
  importcss_file_filter: (file) =>
    file.indexOf('my-styles') !== -1
});

importcss_groups

This option enables group matching selectors into submenus in the Formats menu dropdown. You can use a String, RegExp or a Function to filter selectors. You can also omit the filter to get all non-matching ones into a specific group. You can also specify a group specific selector_converter so that formats for a specific group are produced by that converter.

Type: Array

Example using a string filter with importcss_groups

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'importcss',
  content_css: '/my-styles.css',
  importcss_groups: [
    { title: 'Table styles', filter: /^(td|tr)\./ }, // td.class and tr.class
    { title: 'Block styles', filter: /^(div|p)\./ }, // div.class and p.class
    { title: 'Other styles' } // The rest
  ]
});

importcss_merge_classes

This option is used in cases where the class attribute should be replaced or merged. For example, if you have multiple classes you can apply all of them to the same element. If this option is set to false it will always replace the contents of the class attribute.

Type: Boolean

Default value: true

Example: using importcss_merge_classes

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'importcss',
  content_css: '/my-styles.css',
  importcss_merge_classes: false
});

importcss_selector_converter

This option allows you to override the default selector to format converter function. This allows you to parse the CSS selectors manually and produce format objects out of them. If the converter returns a false value the selector is ignored from import.

Type: Function

Example: using importcss_selector_converter

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'importcss',
  content_css: '/my-styles.css',
  importcss_selector_converter: (selector) => {
    // Custom logic
  }
});

importcss_selector_filter

This option enables you to only import classes from selectors matching the filter. The filter can be a String, RegExp or a Function. See the examples below.

Type: String, RegExp or Function

Example using a string filter with importcss_selector_filter

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'importcss',
  content_css: '/my-styles.css',
  importcss_selector_filter: '.my-prefix-'
});

Example using a RegExp filter with importcss_selector_filter

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'importcss',
  content_css: '/my-styles.css',
  importcss_selector_filter: /\.prefix|\.otherprefix/
});

Example using a function filter with importcss_selector_filter

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'importcss',
  content_css: '/my-styles.css',
  importcss_selector_filter: (selector) =>
    selector.indexOf('myprefix') !== -1
});