1

使用此 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'
  ]
 });

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

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

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

4

1 回答 1

0

格伦——

正如您似乎推测的那样，将这些默认行为添加到工具栏的代码是在各种插件中完成的（在某些情况下，主要是 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 时，你需要管理这些更改。

于 2016-03-04T15:51:56.497 回答