TinyMCE: вставка простых фрагментов текста через выпадающий список?

Question

В TinyMCE 4 я хочу создать раскрывающееся меню (будь то кнопка панели инструментов или меню), содержащее список значений, которые должны быть вставлены в позицию курсора, просто выбрав их в раскрывающемся списке.

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

Есть ли более простой способ сделать это? Мне не нужна замена текста, вставка класса или даты, предварительный просмотр во всплывающем окне или что-либо подобное. Просто вставьте статическое текстовое значение в позицию курсора.

Answer 1

Вот скрипка TinyMCE, которая показывает, как сделать то, что вы хотите:

http://fiddle.tinymce.com/orgaab/1

Код ключа:

setup: function (editor) {
  editor.addButton('custombutton', {
    type: 'listbox',
    text: 'Custom Listbox',
    icon: false,
    onselect: function (e) {
      editor.insertContent(this.value());
    },
    values: [
      { text: 'Bold Text', value: '&nbsp;<strong>Some bold text!</strong>' },
      { text: 'Italic Text', value: '&nbsp;<em>Some italic text!</em>' },
      { text: 'Regular Text', value: '&nbsp;Some plain text ...' }
    ]
  });
}

Если вы хотите добавить материал в меню (основываясь на вашем последующем комментарии), вы можете сделать это:

http://fiddle.tinymce.com/orgaab/4

Код ключа в этом обновлении:

editor.addMenuItem('custommenuoptions', {
    separator: 'before',
    text: 'Custom Menu Options',
    context: 'insert',
    prependToContext: true,
    menu: [
      { text: 'Bold Text', onclick: function() {editor.insertContent('&nbsp;<strong>Some bold text!</strong>')} },
      { text: 'Italic Text', onclick: function() {editor.insertContent('&nbsp;<em>Some italic text!</em>')} },
      { text: 'Regular Text', disabled: true, onclick: function() {editor.insertContent('&nbsp;Some plain text ...')} }
    ]
});