How to wrap TinyMCE element with custom HTML code without external JavaScript

Question

I am trying to wrap some elements of TinyMCE with my custom HTML code.

For example, let us consider the user wants to add Media or Image element, the user will just click on Media or Image element icon, and he will be asked to enter the link, and TinyMCE will generate the required HTML code for that.

What I want to achieve is wrapping that generated HTML code with my custom code. I.e., so I will simply get this:

<div>
    ... What TinyMCE has generated for the image or media ...
</div>

For Media element, I tried using media_url_resolver, but that does not work for me, because this function does not give the ability to wrap the default behaviour, but only to rewrite the whole logic (which is a bad idea).

Could some one tell me if there is any TinyMCE native solution to get that (without any custom external JavaScript)?

Michael Fromin · Accepted Answer · 2018-04-30 16:29:16Z

4

There is no configuration option to do what you want but you can get notified when content is set into the editor and modify it before its inserted:

http://fiddle.tinymce.com/prgaab

The key code is here:

editor.on('BeforeSetContent', function (e) {
    //Look at this object - it tells you a bunch of stuff about the insert activity
    //such as was it via paste?  Was there selected content in TinyMCE that will be overwritten?  
    //Using the browser tooling you can inspect the e object and learn a lot about the content that will be set.
    console.log(e); 

    //Then you can modify that content if you want...for example:
    if (e.content.startsWith("<a href=")) {
        console.log('ADDING CONTENT');
        e.content = '<p>BEFORE</p>' + e.content + '<p>AFTER</p>';
    }
  });

answered Apr 30, 2018 at 16:29

Michael Fromin

13.9k2 gold badges25 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mohammed Noureldin Over a year ago

I was playing with similar events, but this example is just exactly what I want! Thank you a lot.

Collectives™ on Stack Overflow

How to wrap TinyMCE element with custom HTML code without external JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related