This is a migrated thread and some comments may be shown as answers.

Strip HTML tags from content programatically

1 Answer 639 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Christy
Top achievements
Rank 1
Christy asked on 23 Jan 2017, 09:38 PM

I am using the Kendo UI angular editor and need to save both the markup and the plain text from inside the control. I would like to keep the markup text encoded. This editor is being used within a custom template for a Kendo UI Grid popup edit.  From what I have researched, I see two possible options to handle this. 

  1. Write code to programmatically call the cleanFormatting toolbar method, save the original copy of the text, create a range of the body of the editor, select this range, call the cleanFormatting method, and save the new copy of the text. 
  2. Programmatically replace all markup in the original copy of the text using some jQuery approach.

I would think that the first option would be the cleanest since it would be using Kendo throughout. However, the original copy of the text is encoded and calling the cleanFormatting method does not seem to call the exec method listed in the tools array for the editor. Furthermore, all HTML tags are still present.  This is what I have so far for my tools and for the create method for my grid:

vm.editorOptions = {
    tools: [
        {
            name: 'cleanFormatting',
            tooltip: 'Clean formatting',
            exec: function (e) {
                console.log('ready to clean');
                var editor = $(this).data('kendoEditor');
                editor.exec('cleanformatting');
            }
        },
        'insertUnorderedList',
        'insertOrderedList',
        'foreColor',
        'backColor'
    ],
    execute: function(e){console.log("executing command", e.name, e.command);}
};
function createLogEntry(options) {
    var markup = options.data.markupText;
    console.log(markup);
    var editor = $('table.k-editor.k-editor-widget').kendoEditor().data('kendoEditor');
    var range = editor.createRange();
    range.selectNodeContents(editor.body);
    editor.selectRange(range);
    editor.exec('cleanFormatting');
    options.data.plainText = options.data.markupText;
    console.log(options.data);   //...
}

When I use the button on the editor itself, I get exactly what I want. Is there a way to handle this programmatically, or is that not possible?

Because of the encoding, getting a jQuery method to strip the tags does not seem to work either.  I have tried a few approaches, including 

var markup = options.data.markupText;
var plain = $('<div>' + markup + '</div>').text();

That seems to keep all the HTML tags that are inside the string, though.

Is there some way to do this with Kendo editor?  Thanks for all your help!

1 Answer, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 25 Jan 2017, 01:01 PM

Hello Christy,

The Clean Formatting tool is not intended to strip all HTML tags, but only to string formatting tags. Like em, strong, ul, , etc. plus any inline stylization. Thus, any p, div, , etc., tags will remain in the content.

That said, I suggest you using a programmatic approach to accomplish that. You can find some guidance and examples for that here: http://stackoverflow.com/questions/822452/strip-html-from-text-javascript

Regards,
Ianko
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Editor
Asked by
Christy
Top achievements
Rank 1
Answers by
Ianko
Telerik team
Share this question
or