Question

我正在寻找一些代码，它会在WordPress后端的WYSIWYG字段中添加一个下拉列表，通过它我可以为所选文本选择内联行高。我发现tinyMCE文档非常混乱。此外，它主要针对TM 3，但WP 3.9使用第四版......

我的tinyMCE插件看起来像这样：

tinymce.PluginManager.add('ad_lineheight', function(editor, url) {

        …

    editor.addButton('ad_lineheight', {
        type: 'splitbutton',
        text: 'line-height',
        icon: false,
        menu: menuval
    });
});

如何集成函数，为所选输入添加内联样式，如<span style="line-height: 120%; display: inline-block;">selected text</span>？

编辑：我已经设法将下拉列表添加到编辑器中，它显示了我以编程方式定义的行高，如80％，90％，100％等。

EDIT2：使用此代码，我可以更改行高：

editor.addCommand('lineHeight', function(com, value) {
    var selected    =   tinyMCE.activeEditor.selection.getContent();
    var content     =   '<span style="line-height: '+value+';">' + (selected != '' ? selected : '') + '</span>';
    editor.execCommand('mceInsertContent', false, content);
});

editor.addButton('lineheightselect', function() {
    …
    …
    return {
        type: 'listbox',
        text: 'line-height',
        tooltip: 'line-height',
        values: items,
        fixedWidth: true,
        onclick: function(e) {
            if (e.control.settings.value) {
                editor.execCommand('lineHeight', false, e.control.settings.value);
            }
        }
    };
});

但它不是很实用，因为它忽略了已经存在的内联样式，导致这样的代码：

<span class="h3" style="font-size: 90%;"><span style="line-height: 160%;">AND</span></span>

Answer 1

这是一个老问题，但我在这里添加答案，万一有人还需要它。您可以使用getNode()代替getContent()

你的命令代码将是

editor.addCommand('lineHeight', function(com, value) {
    var node = tinyMCE.activeEditor.selection.getNode();
    $(node).css('line-height', value);
});

Answer 2

您需要向TinyMCE编辑器添加自定义按钮，您还需要在某些CSS样式表中创建您的样式。也许可能需要一些WP功能。我不认为你需要在JS中添加任何东西 - 已经有可能在TinyMCE中添加自定义样式按钮，你可以使用PHP实现这一点。

http://codex.wordpress.org/TinyMCE_Custom_Buttons http://codex.wordpress.org/TinyMCE_Custom_Styles

如何在WP 3.9的tinyMCE中为行高选择添加下拉列表

2 个答案: