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:

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

Thanks!

Lenitalenitive

Answer 1

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.

Elastomer

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 <ctrl>+b etc. – Lenitalenitive

It works for me in OSX and Firefox and Chrome with Kendo UI 2013.1.319... Check it here 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? – Elastomer

Just tried in on Windows7 and Chrome. I typed some text, selected it and hit CTRL-B and it bolded. – Lenitalenitive

:-( Tried it in Windows 7 and IE8 (version 8.0.7601.17514) and works but when I tried in chrome failed (!?) – Elastomer

Answer 2

This can be easily achieved now with pasteCleanup option.

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

Sapid

Answer 3

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.

Alastair

Answer 4

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;
                }
            }

Catiline