插件 \ importcss 引入css将class加入“格式”下拉菜单中

此页更新时间:2019-04-02 21:20

此页英文文档:https://www.tiny.cloud/docs/plugins/importcss/

在菜单“格式”项中加入自定义的样式,该插件支持高级配置参数。

引入的css文件中定义的类只能是:.类名{样式}.类名.类名{样式}标签.类名{样式} 这种形式,不支持其他选择器。详见下方实例。
tinymce.init({
    selector: '#tinydemo',
    plugins: "importcss code",
    toolbar: "styleselect code",
    content_css: "/static/mycss.css"
});

额外参数

这些参数将影响importcss插件的行为。

importcss_append

如果设为true,则新引入的样式会附加到原有的末尾,并替换默认格式。

取值:true / false

默认:false

importcss_append: true

importcss_file_filter 文件过滤器

原文写的比较乱,简单说这东西就是字面的意思,用于过滤引入的css文件,支持仅写URL部分字符串、正则或函数返回值。如果content_css引入了好几个css文件,可用此参数动态过滤。暂时想不到应用场景,大概在动态生成多个编辑器的情况下可能遇到?

tinymce.init({
    selector: '#tinydemo',
    plugins: "importcss code",
    toolbar: "styleselect code",
    content_css: "/static/mycss.css",
    importcss_file_filter: "/static/", //仅使用static目录下的文件
});

importcss_selector_filter 类名过滤器

字面意思,从引入css中的多个类里再次筛选。该过滤器支持字符串、正则或函数返回值。

importcss_selector_filter: ".my-prefix-"

正则的例子:

importcss_selector_filter: /\.prefix|\.otherprefix/

使用函数的例子:

tinymce.init({
    selector: '#tinydemo',
    plugins: "importcss code",
    toolbar: "styleselect code",
    content_css: "/static/mycss.css",
    importcss_selector_filter: function(selector) {
        return selector.indexOf('myprefix') !== -1;
    }
});

importcss_groups

将引入的css进行自定义分组。其值为一个数组,元素中可包含分组名和过滤器(过滤器可省略)。该过滤器同样支持字符串、正则或函数返回值。用法与前面的用法一致。

下面的例子将我们引入的多个样式分成两组:

tinymce.init({
    selector: '#tinydemo',
    plugins: "importcss code",
    toolbar: "styleselect code",
    content_css: "/static/mycss.css",
    importcss_groups: [
        {title: 'div和p', filter: /^(div|p)\./}, // div.class 和 p.class
        {title: '其它'} // 其它未匹配的
    ],
});
从例子中可以发现,分组的排列顺序并非与我们参数定义的顺序一致,而是按匹配先后排列的。

importcss_merge_classes

该选项定义单一元素是否可以定义多个格式(同时拥有多个类)。

例如:<div class="class1 class2"></div>

当取值为false时,元素将只允许设置一种格式,点击其它格式时将进行覆盖而不是附加。

默认值:true

可选值:true / false

importcss_selector_converter 自定义导入逻辑

该选项允许你自定义css选择器的导入逻辑,手动编写解析css选择器,并生成格式对象。

tinymce.init({
    selector: '#tinydemo',
    plugins: "importcss code",
    toolbar: "styleselect code",
    content_css: "/static/mycss.css",
    importcss_selector_converter: function(selector) {
        if(selector.indexOf('class') !== -1){
            return this.convertSelectorToFormat(selector);
        }
    }
});

下一节:insertdatetime 插入当前日期时间