Получить значение списка TinyMCE и заменить его выбором - PullRequest
Новая
       16

Получить значение списка TinyMCE и заменить его выбором

1 голос
/ 07 марта 2019

Я пытаюсь добавить собственный выпадающий список на панели инструментов tinymce.Желаемая функциональность заключается в выделении текста в редакторе.Нажмите на раскрывающийся список, выберите предпочтительный цвет и перенесите выделение в тег span с этим цветом в качестве стиля.У меня проблема с извлечением выбранного элемента.Вот код. 

// theme colors
var posttileBox = null;

ed.addButton( 'theme_colors', {
    text: 'Theme colors',
    type   : 'listbox',
    name   : 't_color',
    label  : 'Theme colors',
    fixedWidth:!0,
    icon: false,
    values : [
        { text: 'transparent', value: 'transparent' },
        { value: '#fff', text: 'white' },
        { value: '#000', text: 'black' },
        { value: '#D1D2D4', text: 'grey' },
        { value: '#F0F2F1', text: 'lightgrey' },
        { value: '#D21F34', text: 'red' }, 
        { value: '#24376F', text: 'blue' },
        { value: '#DEE1E9', text: 'lightblue' },      
    ],
    value : "",
    onPostRender: function() {
        posttileBox = this;
    },
    onclick: function(e) {
        var selected_text = ed.selection.getContent();
        var return_text = '';
        return_text = '<span style="color:'+posttileBox.value()+';">' + selected_text + '</span>';                    
        ed.execCommand('mceInsertContent', 0, return_text);
    }
});

Я уже пробовал это.Но это не работает. 

e.data.t_color

Пожалуйста, дайте мне подсказку.Спасибо!

1 Ответ

0 голосов
/ 09 марта 2019

Мне удалось найти пример использования списка в Tiny MCE API (часто все, что нужно где-то в API), и в сочетании с моим кодом я получаю это 

ed.addButton( 'theme_colors', {
    text: 'Theme colors',
    type   : 'listbox',
    name   : 't_color',
    label  : 'Theme colors',
    fixedWidth: !0,
    icon: false,
    onselect: function (e) {
    tinyMCE.activeEditor.dom.setStyle(tinyMCE.activeEditor.selection.getNode(), 'color', this.value() );
},
values : [
    { text: 'transparent', value: 'transparent' },
    { value: '#fff', text: 'white' },
    { value: '#000', text: 'black' },
    { value: '#D1D2D4', text: 'grey' },
    { value: '#F0F2F1', text: 'lightgrey' },
    { value: '#D21F34', text: 'red' }, 
    { value: '#24376F', text: 'blue' },
    { value: '#DEE1E9', text: 'lightblue' },      
],
value : "",
onPostRender: function () {
    this.value();
}

});

Если кто-то не знает, где разместить этот код или как создавать пользовательские кнопки, вот хорошая статья на tutsplus

...