TinyMCE series (IV) introduction to common built-in UI components of TinyMCE

Common built-in UI Components

This article will introduce the commonly used built-in UI Components , For the following example code , Many use one editor The variable of . Be careful editor Is the current instance , Instead of global variables , If you need to use global variables, use tinymce.activeEditor
editor Usually from PluginManager.add After registering the plug-in , Callback parameters will carry editor example

Register the buttons on the toolbar

editor.ui.registry.addButton(' The name of the button ', Button parameters )

The button name is the same as tinymce.init Medium toolbar Registered name

editor.ui.registry.addButton('mybutton', {
    
  icon: 'formaticon', // tinymce  Built in icon name （ We will introduce ）
  tooltip: ' New button example ', //  Tips for levitation 
  onAction: function(e) {
    
    alert(' Click this button ')
  }
})

Register drop-down menu button

Except for ordinary buttons , The buttons in the drop-down menu are often used addmenubutton

The following example code comes from ：menubuttonexampleandexplanation

• fetch Provide a callback function , be used for The drop-down menu item displayed after clicking the generate button
• Each menu item has its own configuration
  • text Displayed copy
  • icon
  • onAction Event triggered after clicking
  • onSetup Current menu mounted Post trigger
  • getSubmenuItems The current item is adding a sub 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)
  }
})

Except for the above callback Return to menu configuration , Menu items can also be added separately by name , then callback Just pass in the menu name

such as ：

//  Individually registered as  menuname  The menu item of 
editor.ui.registry.addToggleMenuItem('menuname', {
    
  text: 'menuname',
  onSetup: function(api) {
    
    // ...
  }
})

//  Individually registered as  menuname2  The menu item of 
editor.ui.registry.addToggleMenuItem('menuname2', {
    
  text: 'menuname2',
  onSetup: function(api) {
    
    // ...
  }
})

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

If the style of the drop-down menu does not meet the business requirements , have access to onSetup Methods , Change the current menu dom Transformation of nodes , To achieve the desired effect .

Register button icon icon

stay tinymce4.x In the version ,icon Support direct picture link address /svg, stay tinymce5.x Image address is not allowed after version , You have to use svg . adopt api You can register a new icon

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

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

let formaticon = icons.formaticon //  If there is , What I got was  svg  Code 

2. Register new icon

• Registered icon Can pass getAll().icon name Get
• In some components, such as the buttons above icon Configuration in progress , Can be used directly icon:‘icon name ’ To import 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 components

Document reference ：windowmanager

call open Method will return a dialog object , It is used to do some operations on the pop-up window , For example, close the pop-up window dialog.close()

The button at the bottom of the pop-up window now shows 3 Types

type	type	Triggering event
custom	General button	onAction
cancel	Cancel button	onCancel
submit	confirm button	onSubmit

If there are many button business types , It is recommended to use custom Button , adopt name Parameter as a distinction ,name The parameter will be onAction Of params Parameters are carried with

primary Mainly the type of button , If true, Button with background color , The default is the white bottom button

var WindowManager = tinymce.activeEditor.windowManager

let dialog = WindowManager.open({
    
  title: ' A pop-up window ',
  body: {
    
    type: 'panel',
    items: [
      {
    
        type: 'htmlpanel',
        html: getFormHtml() // getFormHtml  Is to return a paragraph html character string 
      }
    ]
  },
  buttons: [
    {
    
      type: 'custom',
      text: ' Cancel ',
      name: 'cancel'
    },
    {
    
      type: 'custom',
      text: ' General button 1',
      primary: true,
      name: 'splash_1'
    },
    {
    
      type: 'custom',
      text: ' General 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 There are not so many built-in components to show , This article makes a discussion , Introduced the most basic registration button 、 The drop-down menu 、 register icon And the use of built-in pop-up windows . There will be a few actual small demo, Will re-use this piece of content ~ Coming soon