时间戳

首页 > 解决方案 > TinyMCE 中独特的自定义格式

tinymce - TinyMCE 中独特的自定义格式

问题描述

我正在尝试在 TinyMCE 中创建适用于段落的段落样式列表。一个段落应该只应用一种样式。所以一个段落可以是正常的、领先的或小的。一次不应超过一个。

这是我尝试过的：

formats: {
    "p-normal": { block: "p", classes: "govuk-body" },
    "p-lead": { block: "p", classes: "govuk-body-l" },
    "p-small": { block: "p", classes: "govuk-body-s" }
},

style_formats: [
    { title: "Paragraph styles", items: [
        { title: "Normal paragraph", format: "p-normal" },
        { title: "Lead paragraph", format: "p-lead" },
        { title: "Small paragraph", format: "p-small" }
    ] }
]

如果我让一个段落正常，然后将其更改为引导段落，它最终看起来像这样：

<p class="govuk-body p-lead">Test</p>

在格式下拉列表中，两种样式都被勾选。我可以让它只有一种格式处于活动状态并删除以前应用的格式吗？

标签： tinymce

解决方案

我找到了一种方法来做到这一点，方法是使用事件处理程序在切换格式之前采取行动，并删除光标所在位置应用的所有格式。

这是事件处理程序：

init_instance_callback: function(editor) {
    editor.on('BeforeExecCommand', function (e) {
        if (e.command === "mceToggleFormat") {
            var formats = this.formatter.matchAll(["p-normal", "p-lead", "p-small"]);
            for (var i = 0; i < formats.length; i++) {
                this.formatter.remove(formats[i]);
            }
        }
    });
}

您需要检查所有排他的格式，然后删除所有已应用的格式。如果您拥有一组以上的专有格式，则需要根据所应用的格式检查该组。

推荐阅读