November Happy Hour will be moved to Thursday December 5th.

Customizing TinyMCE markup for a certain ContentType

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
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
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
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.