TinyMCE:通过下拉列表插入简单的文本片段?

时间:2018-04-30 11:56:07

标签: tinymce tinymce-4

在TinyMCE 4中,我希望创建一个下拉菜单(无论是工具栏按钮还是菜单),其中包含应该在光标位置插入的值列表,只需在下拉列表中选择它们即可。

我尝试过使用模板插件,哪种工作方式,但它太重而且太复杂而无法用于我需要的东西(它不会创建一个下拉菜单,而是打开一个弹出窗口,让你预览你的模板,我真的不需要这一切。

有更简单的方法吗?我不需要文本替换,类或日期插入,弹出窗口预览或任何高级内容。只需在光标位置插入静态文本值。

1 个答案:

答案 0 :(得分: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 ...')} }
    ]
});