Tinymce 将标题样式应用于整个段落，而不仅仅是选定的文本答案

【问题标题】：Tinymce applies heading style to whole paragraph, not only selected textTinymce 将标题样式应用于整个段落，而不仅仅是选定的文本
【发布时间】：2012-09-24 10:28:23
【问题描述】：

我刚刚注意到 TinyMCE 编辑器的一个令人讨厌的行为。当我写了几段文字时，我想选择其中的一些并使其成为标题（标题 2 样式），整个文本都会获得该标题样式，而不仅仅是我选择的文本。

当我想应用粗体时，这不会发生 - 在这种情况下，它会按预期工作；只有选定的文本变为粗体。

我怎样才能改变这种行为？我知道有 HTML 模式可以改变样式，但我担心我的客户对 HTML 不太熟悉，他们想使用可视化仅限模式。

【问题讨论】：

在点击标题样式之前，您必须将标题的文本移动到它自己的段落中。

标签： tinymce

【解决方案1】：

我猜这是因为 h2-tags 通常不能作为段落的子节点。您可以根据需要尝试调整tinymce配置参数valid_children。

【讨论】：

【解决方案2】：

这是 TinyMCE 的原生行为，无法更改。

【讨论】：

【解决方案3】：

这是我找到的解决方法。很适合我

tinyMCE.PluginManager.add('FormatingToolbarButtons', function (editor, url) {
['pre', 'p', 'code', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].forEach(function (name) {
    editor.addButton("style-" + name, {
        tooltip: "Toggle " + name,
        text: name.toUpperCase(),
        onClick: function () {
            if (this.active()) {
                editor.execCommand('mceToggleFormat', false, name);
                this.active(false)
            }
            else {
                editor.selection.setContent('<' + name + '>' + editor.selection.getContent() + '</' + name + '>');
                this.active(true)
            }
        },
        onPostRender: function () {
            var self = this, setup = function () {
                editor.formatter.formatChanged(name, function (state) {
                    self.active(state);
                });
            };
            editor.formatter ? setup() : editor.on('init', setup);
        }
    })
});

});

【讨论】：

【解决方案4】：

你可以试试下面：

https://www.tiny.cloud/docs-3x/reference/Configuration3x/Configuration3x@force_br_newlines/

试试force_p_newlines : true, 看看它是否有效。

【讨论】：