CODEWITHSUNDEEP
tinymcetinymce-4
s427
s427

Reputation: 1566

TinyMCE: inserting simple snippets of text via dropdown?

In TinyMCE 4, I'm looking to create a dropdown menu (whether as a toolbar button or in a menu) containing a list of values that should be inserted at cursor position simply by selecting them in the dropdown.

I've tried playing with the template plug-in, which kind of works, but it's too heavy and complex to use for what I need (it doesn't create a dropdown, instead it opens a popup which lets you preview your template, and I really don't need all that).

Is there a simpler way to do that? I don't need text replacement, class or date insertion, preview in a popup, or any of that advanced stuff. Just insert a static text value at cursor position.

Upvotes: 2

Views: 1494

Answers (1)

Michael Fromin
Michael Fromin

Reputation: 13746

Here is a TinyMCE Fiddle that shows hw to do what you want:

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

The key code is this:

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 ...' }
    ]
  });
}

If you want to add stuff to a Menu instead (based on your follow up comment) you can do this:

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

The key code in this update is:

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 ...')} }
    ]
});

Upvotes: 3

Related Questions