Medium-editor: Option to retain allowed tags?

Created on 4 Nov 2015  路  8Comments  路  Source: yabwe/medium-editor

Is there any option to allow retention of certain tags that have been allowed in the toolbar buttons options
like h2, bold, anchor etc. when copied HTML from some website is pasted into the MediumEditor ?

enhancement

Most helpful comment

I also need something similar - I'd like to _only_ keep specific tags (like the ones from the toolbar), and remove _all_ other tags, when HTML is pasted. That way, I can white-list innocuous stuff like p, i, b, em, div, a, and strip all other tags.

Similarly, I'd like to remove _all_ attributes _except_ white-listed ones (like a href).

As a simpler option, you could provide a hook to do the HTML cleaning. So any pasted HTML gets passed to the hook, which returns the cleaned/filtered output, becoming the content.

All 8 comments

Hum nope it's not possible at the moment. We can only remove some tag or attributes.
https://github.com/yabwe/medium-editor/blob/master/OPTIONS.md#paste-options

What is your use case? Which tag would you like to keep?

There's no specific tag. I just wanted to know if there was any way to retain only the tags that were enabled in the toolbar.

In my editor, authors paste copied content from word docs or from other websites but they loose the formatting as I have forcePlainText: true for now as I don't want the copied content to mess up the final HTML because of other tags when I set cleanPastedHTML: true.

This seems like an interesting enhancement, basically a set of filters that removes all non contenteditable tags from pasted text. We have a bunch of built in filters for removing certain tags, perhaps there could be an additional paste option to enable another set of filters?

@nmielnik +1 on this.

@nmielnik http-janitor is a good example.

I also need something similar - I'd like to _only_ keep specific tags (like the ones from the toolbar), and remove _all_ other tags, when HTML is pasted. That way, I can white-list innocuous stuff like p, i, b, em, div, a, and strip all other tags.

Similarly, I'd like to remove _all_ attributes _except_ white-listed ones (like a href).

As a simpler option, you could provide a hook to do the HTML cleaning. So any pasted HTML gets passed to the hook, which returns the cleaned/filtered output, becoming the content.

@Dortamur @spiderpug @thomasaull the paste-extension exists as an overridable extension to allow folks to customize the paste handling any way they want.

Based on what @Dortamur was describing, I believe you'd want to override the cleanPaste(text) method of the paste-extension, which is ultimately called during the paste-handling chain. cleanPaste() is where all the regex's are executed for replacing the pasted html, and it ultimately calls pasteHTML() once the text has been cleaned up.

You can see the base implementation of cleanPaste() here.

At the end of the method, it will ultimately call pasteHTML() which is defined here.

You can build a complete paste-handling extension and pass it in via the extensions option while instantiating the editor (example here).

If you want to just override cleanPaste() and/or pasteHTML(), you can pass in your custom overrides individually when instantiating the editor:

var editor = new MediumEditor('.editor', {
    paste: {
        cleanPaste: function (text) { // your custom code },
        pasteHTML: function (html, options) { // your custom code }
    }
});

@nmielnik Thanks a lot for your help! I actually tried your second approach, overwriting the pasteHTML function when initiation the editor, but this didnt't work at all, my function just doesn't gets called:

paste: {
    cleanPaste: function (text) { console.log("clean paste"); },
    pasteHTML: function (html, options) { console.log("paste html"); }
},

Just to make sure: I can use this without creating an additional extension before, right?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

entere picture entere  路  6Comments

keligijus picture keligijus  路  4Comments

vominhtam picture vominhtam  路  6Comments

ctrlmaniac picture ctrlmaniac  路  6Comments

thatdoorsajar picture thatdoorsajar  路  7Comments