Last active
December 21, 2022 17:15
-
-
Save komkanit/8d1be5417ad5bf1367a1f476a5a8256e to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| 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, | |
| }, | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment