Как добавить раскрывающийся список для выбора высоты строки в tinyMCE для WP 3.9

Я ищу код, который добавил бы раскрывающийся список к моим полям WYSIWYG в бэкэнде WordPress, с помощью которого я мог бы выбрать встроенную высоту строки для выделенного текста. Я нахожу документацию 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>

javascript wordpress tinymce tinymce-4
person alexej_d    schedule 22.05.2014    source источник
comment
Посмотрите этот ответ, который я отправил на аналогичный вопрос ссылка здесь, в stackoverflow< /а>   -  person rezaSefiddashti    schedule 03.11.2019

Ответы (2)


arrow_upward
2
arrow_downward

это старый вопрос, но я добавляю ответ здесь на всякий случай, если он кому-то еще нужен. вы можете использовать getNode() вместо getContent()

ваш код команды будет

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

arrow_upward
0
arrow_downward

Вам нужно добавить пользовательскую кнопку в редактор TinyMCE, вам также нужно создать свой стиль в какой-либо таблице стилей CSS. Возможно, может понадобиться какая-то функция WP. Я не думаю, что вам нужно будет что-то добавлять в JS - уже есть возможность добавить кнопку пользовательского стиля в TinyMCE, и вы можете добиться этого с помощью PHP.

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

person mrarm    schedule 23.05.2014
comment
Спасибо. Смотрите мою правку. У меня уже есть раскрывающийся список. То, что вы опубликовали, помогло бы только в том случае, если бы мне нужна была простая кнопка. - person alexej_d; 23.05.2014