Customizing TinyMCE markup for a certain ContentType

vlgs

Vote:

Hi!

We have a custom content type (using the ContentType attribute) for video. We would like to generate a <video> tag for embedding this content when dragged-and-dropped into a TinyMCE editor. Right now a <a href="..file.mp4"> tag is generated.

Our content type inherits VideoData and is delivered using a custom content store and content provider.

Is there some attribute, hint, TinyMCE config, plugin or something else that lets us render an embeddable video tag when dropping this content into TinyMCE?

#307815

Edited, Sep 01, 2023 7:20

Neha

Vote:

You can use the TinyMCE's custom plugins and configuration options that handles the specific Content Type and generates the desired markup. In your TinyMCE configuration, specify your custom plugin by adding it to the list of plugins to load.

You can also configure the plugin to listen for specific events and define the logic to generate the <video> tag when your ContentType is detected.

Here is the jeneral idea how you can do that.

tinymce.init({
  // ...
  plugins: 'yourcustomplugin',
  // ...
  setup: function (editor) {
    editor.on('drop', function (e) {
      // Check if the dropped content is your custom ContentType.
      if (isYourCustomContentType(e)) {
        // Generate the <video> tag and insert it into the editor.
        var videoTag = generateVideoTag(e);
        editor.insertContent(videoTag);
      }
    });
  }
});

For more detail you can see the doc

#307954

Sep 04, 2023 12:19

vlgs

Vote:

Thank you, it seems like a plugin is the way to go. Now to figure out how to implement isYourCustomContentType :)

#307994

Sep 05, 2023 7:15

Try our conversational search powered by Generative AI!

Customizing TinyMCE markup for a certain ContentType