TinyMCE series (II) TinyMCE plug-in development

tinymce Plug-in development

The previous article has introduced tinymce Environment construction of , In fact, it's for tinymce Plug-in development Bedding made
Warehouse code ：https://gitee.com/Jioho/tinymce-plugins
Developed later API Are subject to 5.x The main version is （ Now come out 6.x 了 ） It is mainly used by the company 5.x~

tinymce Plug in code writing style

With hr The plug-in is an example

The code style is summarized as follows , For reference （ Nonstandard , Documentation also does not address code style issues ）：

1. only one function function That is to say Plugin
2. The entry method is also Plugin
3. There's usually Buttons、Commands And so on , Summarize relevant methods
4. The button name is usually the same as the plug-in name

• The reduced code is as follows ：

;(function() {
    
  'use strict'

  //  adopt  tinymce.util.Tools.resolve  load  tinymce  Module 
  var global = tinymce.util.Tools.resolve('tinymce.PluginManager')

  var register = function(editor) {
    
    //  Relevant business logic 
    editor.addCommand('InsertHorizontalRule', function() {
    })
  }
  var Commands = {
     register: register }

  var register$1 = function(editor) {
    
    //  Button related business logic 
    editor.ui.registry.addButton('hr', {
    ...})
    editor.ui.registry.addMenuItem('hr', {
    ...})
  }
  var Buttons = {
     register: register$1 }

  function Plugin() {
    
    // global  It's actually  PluginManager
    //  adopt  add  Put the present  hr  Plug in registration to  tinymce  Plug in 
    global.add('hr', function(editor) {
    
      //  Register public methods 
      Commands.register(editor)
      //  register  toolbar  The button 
      Buttons.register(editor)
    })
  }

  //  The only method to execute after the plug-in is loaded 
  Plugin()
})

Plug in development file specification

Storage directory problem

The plug-in directories are all in src/js/tinymce/plugins Next . among src/js/tinymce For the download back tinymce The source package

Take my reference for example

---

Plug in folder naming conventions

stay plugins Under the table of contents , Create a new one my_plugin Folder , that my_plugin This is the package name of the plug-in package
stay tinymce Initialization configuration plugins The configuration item is filled in with the package name to be imported

tinymce.init({
    
  selector: 'textarea.tinymce',
  plugins: 'my_plugin'
})

---

Plug in naming specification

Under the corresponding package name ,tinymce Load only plugin.js and plugin.min.js
The loading rules are as follows ： On the business logic page If the introduction is tinymce.js Load the corresponding plug-in plugin.js file
If... Is introduced tinymce.min.js Load the corresponding plug-in plugin.min.js file

Last

This section briefly introduces tinymce The file specification of plug-in development is consistent with the code style , The next chapter is tinymce Commonly used API Introduce , Get started tinymce Plug-in development ！