who question mark who question mark - 1 year ago 95
HTML Question

TinyMCE - automatically insert additional attributes when copying/pasting content?

Is there a way to configure TinyMCE to automatically insert additional attribues when copying and pasting content into a textarea?

In my case, I have a textarea that I copy/paste content with text and images. When images are inserted, I would like to automatically mark the img tags as having a specific CSS class (for ensuring they are fluid).

I'm using Django TinyMCE is that makes any difference. Has anyone succeeded in achieving this sort of behavior?

Answer Source

The TinyMCE Paste plugin has the ability for you to pre or post process the content during the paste process.

I would recommend using the postprocess API as this allows the Paste plugin to do its cleanup first.


For example you could do something like this in your TinyMCE init (not that this is what you want to do I just had this example handy from a project):

paste_postprocess: function(editor, fragment) {
    var allElements = fragment.node.getElementsByTagName("td");
    for (i = 0; i < allElements.length; ++i) {
      console.log('initial font family: ', allElements[i].style.fontFamily);

      var st = allElements[i].style;
      stCleaned = st.fontFamily.replace("sans-serif", "").replace("Calibri", "Arial");
      st.fontFamily = stCleaned; // Indirectly

...then each time the Paste plugin gets run your code will get run after it and you can manipulate the pasted content as you see fit.