Creating a TinyMCE plugin: How to make element selectable and editable

Question

I'm trying to author my very first plugin for tinymce . Now, how do I make an element selectable? With the official image-plugin for example the user can click on a already inserted image, it visually gets focused and the image-plugin-button gets focused as well - see gif. Let's say I want to write a plugin that inserts a „Bootstrap Card“ which basically is just a div element. How do I make an already inserted Card selectable plus of course editable once the users clicks my new plugin button? Bonus question: ;-) Any suggestion for a comprehensive tutorial on tinymce plugin authoring?

Answer 1

To answer the bonus question first, there is an article on the TinyMCE blog that walks through creating your own TinyMCE plugin , with the example being an HTML to Markdown transformation

In the article, under the "Add the plugin to the editor" heading, Shahed Nasser writes the steps for adding the custom plugin button to the toolbar. Check under that heading for more information on getting the custom toolbar icon up and running.

For the Bootstrap Card item question – so it sounds like when your users select the Card , you need the following:

1. Focus on the existing cards in the document
2. Enable the ability to edit, adjust, or modify the cards in to get what they want written or expressed in the card done.

The first step would be to identify the card items. The TinyMCE.html.DOMparser API has a method that will filter for a specific node within the editor, and allow you to run a function on any nodes that match the filter. You can find the API docs here - https://www.tiny.cloud/docs/tinymce/6/apis/tinymce.html.domparser/#addNodeFilter

That's reaching the limits of my knowledge of what to do, hopefully the docs and article help give you the first steps to get your custom plugin going.