How can I strip all html formatting from text when pasting into KendoUI Editor?

Question

I want to use KendoUI editor to basically only allow users to format text into paragraphs. Possibly allow bold and underline.

I'm struggling with 2 things:

I want to strip all html formatting from text when pasting
I want to disable keyboard shortcuts for bold, underline etc - they seem to work even when toolbar element is not there.

Thanks!

OnaBai · Accepted Answer · 2013-03-24T23:54:11.163

9

For pasting the only the text you might define a paste handler that remove all but text. This is as simple as:

$("#editor").kendoEditor({
    paste: function (ev) {
        ev.html = $(ev.html).text();
    }
});

The paste handler receives as argument an event that has in html the text being parsed. We can use jQuery for getting only the text using $(ev.html).text()

For removing the shortcuts, and as far as I could test it with latest Kendo UI version, if you define only the tools that you want, only those shortcut are active. So if you say something like:

$("#editor").kendoEditor({
    tools: [
        "italic"
    ],
    paste: function (ev) {
        ev.html = $(ev.html).text();
    }
});

Only italic shortcut <ctrl>+i is available. If you leave tools array empty then you do not have any.

edited Mar 24 '13 at 23:54

answered Mar 24 '13 at 23:37

OnaBai

40,767
6
96
125

That probably works for the paste handler, thanks. (though, given time constraints and some further features, like tag whitelisting i've decided to go for TinyMCE as an quicker solution) Regarding shortcuts, unfortunately that isn't the case - I left tools array empty and can still +b etc. – richardwhatever Mar 26 '13 at 07:00
It works for me in OSX and Firefox and Chrome with Kendo UI 2013.1.319... Check it here http://jsfiddle.net/OnaBai/5yXej/ I tried also with Kendo UI 2012.3.1319 and it works too. Which environment did you try? Does this link work? – OnaBai Mar 26 '13 at 07:42
Just tried in on Windows7 and Chrome. I typed some text, selected it and hit CTRL-B and it bolded. – richardwhatever Mar 26 '13 at 11:15
:-( Tried it in Windows 7 and IE8 (version 8.0.7601.17514) and works _but_ when I tried in chrome failed (!?) – OnaBai Mar 26 '13 at 13:14

score 2 · Answer 2 · answered Sep 08 '16 at 13:54

2

This can be easily achieved now with pasteCleanup option.

See here: http://docs.telerik.com/kendo-ui/controls/editors/editor/pasting

answered Sep 08 '16 at 13:54

Zubzob

2,653
4
29
44

score 0 · Answer 3 · answered Sep 30 '19 at 13:50

0

Kendo MVC has also extension for this purpose. Example of usage:

.PasteCleanup(x => x.KeepNewLines(false))

false in this case means that you want to clear everything except new lines.

answered Sep 30 '19 at 13:50

Yehor Androsov

4,885
2
23
40

score 0 · Answer 4 · answered Jun 20 '21 at 02:47

for me this is the complete solution

                pasteCleanup: {
                custom: function (html)
                {
                    html = html.replace(/<\s*br\/*>/gi, '');
                    html = html.replace(/<\s*a.*href="(.*?)".*>(.*?)<\/a>/gi, " $2 (Link - $1) ");
                    html = html.replace(/<\s*\/*.+?>/ig, '');
                    html = html.replace(/ {2,}/gi, '');
                    html = html.replace(/\n+\s*/gi, '');
                    html = html.replace("&nbsp;", '');
                    html = html.replace(/&lt;.*?&gt;/g, '');
                    return html;
                }
            }

How can I strip all html formatting from text when pasting into KendoUI Editor?

4 Answers4