Question

使用此codepen工作 http://codepen.io/tinymce/pen/NGegZK

代码：

tinymce.init({
  selector: 'textarea',
  height: 500,
  theme: 'modern',
  plugins: [
    'advlist autolink lists link image hr anchor media table',
    'emoticons template paste textcolor colorpicker imagetools'
  ],
  toolbar1: 'bold italic formatting | fontsizeselect forecolor backcolor removeformat | format bullist numlist outdent indent | table link  emoticons',
  image_advtab: true,
  menubar: false,
  templates: [
    { title: 'Test template 1', content: 'Test 1' },
    { title: 'Test template 2', content: 'Test 2' }
  ],

    setup: function(editor) {
    editor.addButton('formatting', {
      type: 'menubutton',
      text: '',
      icon: true,
      image: 'http://www.veryicon.com/icon/16/System/iOS7%20Minimal/Text%20Formatting%20Border%20color.png',
      menu: [{
        text: 'Make me font size select!',
        }
      }, {
        text: 'Forecolor etc',
      }]
    });
  }, 
  content_css: [
    '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
    '//www.tinymce.com/css/codepen.min.css'
  ]
 });

请注意，第3项是自定义格式菜单（看起来像蜡笔）

我想要做的是将fontsizeselect forecolor backcolor removeformat插件嵌入到该菜单中。

我是否需要从头开始重建所有插件？看起来它们应该可以在菜单中使用，不应该吗？感谢。

Answer 1

格伦 -

正如您似乎推测将这些默认行为添加到工具栏的代码是在各种插件中完成的（在某些情况下是主TinyMCE JS文件）。

例如......

forecolor和backcolor通过textcolor插件添加。
fontsizeselect和removeformatting已添加到主tinymce.js文件中。

这个（作为示例）是textcolor插件的一部分：

editor.addButton('forecolor', {
    type: 'colorbutton',
    tooltip: 'Text color',
    format: 'forecolor',
    panel: {
        role: 'application',
        ariaRemember: true,
        html: renderColorPicker,
        onclick: onPanelClick
    },
    onclick: onButtonClick
});

由于TinyMCE是开源的，您当然可以调整添加控件的位置。如果您查看print插件，您会看到一个插件示例，它将项目添加到菜单而不是工具栏。

您可以修改插件和tinymce.js文件以执行您所需的操作，但请记住，在将来更新TinyMCE时，您需要管理这些更改。

TinyMCE：你能在自定义菜单按钮中嵌入一个插件吗？

1 个答案: