SaaS CMS has officially launched! Learn more now.

Customizing TinyMCE markup for a certain ContentType



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?

Edited, Sep 01, 2023 7:20

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.  

  // ...
  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);

For more detail you can see the doc

Sep 04, 2023 12:19

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

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.