Common built-in UI components

This article will introduce common built-in UI components. For the following example code, many use an editor variable. Note that the editor is the current instance, not a global variable. If you need to use a global variable, use TinyMCE activeEditor
The editor is usually from pluginmanager Add after registering the plug-in, the callback parameter will carry the editor instance

Buttons on the registration toolbar

editor.ui.registry.addButton('button name ', button parameter)

Button name is the same as TinyMCE The name of the toolbar registration in init

editor.ui.registry.addButton('mybutton', {
  icon: 'formaticon', // tinymce's built-in icon name (described below)
  tooltip: 'New button example', // Tips when levitating
  onAction: function(e) {
    alert('Click this button')
  }
})

Register drop-down menu button

In addition to ordinary buttons, the buttons in the drop-down menu are used more often addmenubutton

The following example code is from: menubuttonexampleandexplanation

• fetch provides a callback function to generate the drop-down menu items displayed after the button is clicked
• Each menu item has its own configuration
  • Textdisplayed copy
  • icon
  • The event triggered after onAction is clicked
  • onSetup triggered after the current menu is mounted
  • getSubmenuItems the current item is adding a child menu
  • Type menu type more types can be seen typesoftoolbarbuttons

editor.ui.registry.addMenuButton('mybutton', {
  tooltip: 'My button',
  icon: 'my-icon',
  fetch: function(callback) {
    var items = [
      {
        type: 'menuitem',
        text: 'Menu item 1',
        onAction: function() {
          editor.insertContent('&nbsp;<em>You clicked menu item 1!</em>')
        }
      },
      {
        type: 'nestedmenuitem',
        text: 'Menu item 2',
        icon: 'user',
        getSubmenuItems: function() {
          return [
            {
              type: 'menuitem',
              text: 'Sub menu item 1',
              icon: 'unlock',
              onAction: function() {
                editor.insertContent('&nbsp;<em>You clicked Sub menu item 1!</em>')
              }
            },
            {
              type: 'menuitem',
              text: 'Sub menu item 2',
              icon: 'lock',
              onAction: function() {
                editor.insertContent('&nbsp;<em>You clicked Sub menu item 2!</em>')
              }
            }
          ]
        }
      },
      {
        type: 'togglemenuitem',
        text: 'Toggle menu item',
        onAction: function() {
          toggleState = !toggleState
          editor.insertContent('&nbsp;<em>You toggled a menuitem ' + (toggleState ? 'on' : 'off') + '</em>')
        },
        onSetup: function(api) {
          api.setActive(toggleState)
          return function() {}
        }
      }
    ]
    callback(items)
  }
})

In addition to using callback to return the menu configuration above, menu items can also be added separately by name, and then callback only needs to pass in the menu name

For example:

// Register the menu item named menuname separately
editor.ui.registry.addToggleMenuItem('menuname', {
  text: 'menuname',
  onSetup: function(api) {
    // ...
  }
})

// Register the menu item named menuname2 separately
editor.ui.registry.addToggleMenuItem('menuname2', {
  text: 'menuname2',
  onSetup: function(api) {
    // ...
  }
})

// Use the 2 menu items registered above in the drop-down menu button
editor.ui.registry.addMenuButton('mybutton', {
  fetch: function(callback) {
    // Register directly with menu name
    callback('menuname menuname2')
  }
})

If the style of the drop-down menu does not meet the business requirements, you can use the onSetup method to transform the dom node of the current menu to achieve the desired effect.

Register button icon

In tinymce4 In the X version, icon supports direct picture link address / svg, which is in tinymce5 Image address is not allowed after version x, and svg must be used. New icons can be registered through the api

1. Get all icon editors ui. registry. getAll()

let icons = editor.ui.registry.getAll().icons

let formaticon = icons.formaticon // If it exists, you get the svg code

1. Register new icon

• The registered icon can be accessed through getall() Icon name obtained
• In the icon configuration of some components, such as the buttons above, you can directly use icon: 'icon name' to introduce this icon

editor.ui.registry.addIcon('myicon', '<svg>Omit...</svg>')

// When using: for example, register a toolbar button
editor.ui.registry.addButton('mybutton', {
  icon: 'myicon',
  tooltip: 'Newly registered button component'
})

Use the built-in pop-up window assembly

Document reference: windowmanager

Calling the open method will return a dialog object, which is used to perform some operations on the pop-up window, such as closing the pop-up window dialog close()

There are three types of buttons at the bottom of the pop-up window

type	type	Trigger event
custom	Normal button	onAction
cancel	Cancel button	onCancel
submit	confirm button	onSubmit

If there are many button business types, it is recommended to use the custom button, distinguished by the name parameter, which will be carried in the params parameter of onAction

primary is mainly the type of button. If it is true, it is a button with a background color. By default, it is a button with a white background

var WindowManager = tinymce.activeEditor.windowManager

let dialog = WindowManager.open({
  title: 'A pop-up window',
  body: {
    type: 'panel',
    items: [
      {
        type: 'htmlpanel',
        html: getFormHtml() // getFormHtml returns an html string
      }
    ]
  },
  buttons: [
    {
      type: 'custom',
      text: 'cancel',
      name: 'cancel'
    },
    {
      type: 'custom',
      text: 'Normal button 1',
      primary: true,
      name: 'splash_1'
    },
    {
      type: 'custom',
      text: 'Normal button 2',
      primary: true,
      name: 'splash_2'
    },
    {
      type: 'cancel',
      text: 'Cancel button',
      primary: true
    },
    {
      type: 'submit',
      text: 'determine',
      primary: true
    }
  ],
  onAction: function(e, params) {
    console.log(params.name)
    dialog.close()
  },
  onCancel: function() {
    dialog.close()
  },
  onSubmit: function() {
    dialog.close()
  }
})

last

tinymce doesn't have so many built-in components to display. This paper introduces the use of the most basic registration button, drop-down menu, registration icon and built-in pop-up window. There will be several actual small demo s later, which will reuse the content of this section ~ please look forward to it