editor_plugin_example.js

/*
TinyMCE
1. Create a JavaScript file that defines your plugin's functionality. This file should contain a single function that takes a TinyMCE editor instance as an argument and registers your plugin's behavior with the editor.
2. In your TinyMCE configuration, include the path to your plugin's JavaScript file in the plugins array.
*/
tinymce.PluginManager.add('myplugin', function(editor, url) {
  editor.addButton('mybutton', {
    text: 'My Button',
    icon: false,
    onclick: function() {
      // Perform some action when the button is clicked
    }
  });
});

tinymce.init({
  selector: 'textarea',
  plugins: ['myplugin'],
  toolbar: 'mybutton',
});



/*
CKEditor 5
1. Create a JavaScript class that defines your plugin's behavior. This class should extend the Plugin class from the CKEditor 5 API, and should define any necessary methods for handling the plugin's functionality.
2. In your CKEditor 5 configuration, include the path to your plugin's JavaScript file in the extraPlugins array.
*/
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';

class MyPlugin extends Plugin {
  init() {
    const editor = this.editor;

    editor.ui.componentFactory.add('mybutton', (locale) => {
      const view = new ButtonView(locale);

      view.set({
        label: 'My Button',
        withText: true,
        tooltip: true
      });

      // Callback executed once the button is clicked.
      view.on('execute', () => {
        // Perform some action when the button is clicked
      });

      return view;
    });
  }
}

ClassicEditor
  .create(document.querySelector('#editor'), {
    extraPlugins: [MyPlugin],
    toolbar: ['mybutton']
  })
  .then(editor => {
    console.log(editor);
  })
  .catch(error => {
    console.error(error);
  });



/*
SlateJS
Create a JavaScript function that defines your plugin's behavior. This function should take a Slate editor instance as an argument and return an object with any necessary methods for handling the plugin's functionality.
In your Slate configuration, include the plugin function in the plugins array.
*/
const insertParagraph = (editor) => {
  editor.insertBlock({
    type: 'paragraph',
    children: [{ text: '' }],
  });
};

const myPlugin = (editor) => {
  return {
    renderButton: () => {
      return (
        <button onClick={() => insertParagraph(editor)}>
          Insert Paragraph
        </button>
      );
    },
  };
};

const plugins = [myPlugin];

const editor = new Editor({
  plugins,
});



*/
Editor.js
1. Create a JavaScript class that defines your plugin's behavior. This class should extend the Block class from the Editor.js API, and should define any necessary methods for handling the plugin's functionality.
2. In your Editor.js configuration, include the path to your plugin's JavaScript file in the tools array.
*/
class MyBlock extends Block {
  static get toolbox() {
    return {
      title: 'My Block',
      icon: '<svg>...</svg>',
    };
  }

  constructor({data, api}) {
    super({data, api});
  }

  render() {
    return '<div>My block</div>';
  }
}

const editor = EditorJS({
  holder: 'editorjs',
  tools: {
    myBlock: MyBlock,
  },
});