Feature request; clean up Word/Font stuff

[Derek]

We often have users pasting content from Word or other editors, and often the text contains extraneous codes, extra font tages, span tags wrapped around every block of text, etc. The users often don't even know the extra tags are there (they don't typically use HTML view, and wouldn't understand most of what they would see there anyway). It only becomes noticeable when they ask why the results look 'funny' when viewed. I don't believe this is an uncommon request; I know that we run into it regularly, and had incorporated a solution with a prior HTML editing control that worked well.

What would be nice is to have a couple of button options on the Editor, as follows;

Clean up Font Tags
This would remove any font tags in the content, and remove any nested or redundant markup.

Clean up Word Content
This would remove all extra content added by MS Word, and restore the pasted content to generic HTML.

I know we could sit down and code these, but it would be nice to have them built right in the control.

[Rumen]

Hello Derek,

The requested features are already supported by RadEditor. Please, see the following help article Cleaning Word Formatting and test the same named demo: Cleaning Word Formatting.

All the best,
Rumen
the Telerik team

[Chris Trina]

Rumen,

What settings do we need to truely strip all of the word formatting, like your demo does if you choose the manual strip option in the second window?  I want this to happen on a paste but none of the setting go this far.  Here is the word i am testing with.

Hello world this is a test

• One
• Two
• Three
• Four
• Five
• Six

 

prior to the paste options 3 - 4 were in the table

Chris

[Rumen]

Hi Chris,

Did you try to set StripFormattingOptions to MSWordRemoveAll? This setting should work as expected and you can set and test it in this demo: Cleaning Word Formatting.

Since the StripFormattingOptions is enum, you can set multiple values at the same time, e.g.

StripFormattingOptions="MSWordRemoveAll,Font,Span,CSS"

This could be helpful to strip different type of formatting from the pasted content.


Best regards,
Rumen
the Telerik team

[Chris Trina]

Rumen,

Thanks for the response.  Two items exist, the stripping is different between using the Ctrl+V keys and using the paste icon, also bullets are not being stripped.  Ideally I would like to strip everything except line returns and definitely want the stripping to be consistent regardless of how you paste.  I've attached an image which shows the differences and the control definition.

Thanks

Chris

[Chris Trina]

Rumen,

I got around the pasting inconsistency by adding the shortcut parameter to my tools file, the icon and ctrl+v now work the same.
 

<

 

 

tool name="PastePlainText" shortcut="CTRL+V" />

 

Is there anyway to strip the bullets?

Thanks

Chris

[Rumen]

Hi Chris,

I was unable to reproduce the reported inconsistency problem. You can see my test at http://screencast.com/t/OTdlZmU4MW. Am I missing something? For your convenience I have attached my test project.

As to the second request: you can use the OnClientPasteHtml event to modify the pasted content. Here is a basic demo:

    <Telerik:RadEditor ID="RadEditor1" OnClientPasteHtml="OnClientPasteHtml" StripFormattingOptions="AllExceptNewLines" runat="server"></Telerik:RadEditor>
     <script type="text/javascript">
         function OnClientPasteHtml(sender, args) {
             var commandName = args.get_commandName();
             var value = args.get_value();
 
             if (commandName == "PastePlainText") {
                 value = value.replace(/\*/gi, "");
                 args.set_value(value);  //set the modified pasted content in the editor
             }
         }
</script>

Best wishes,
Rumen
the Telerik team

[Christian Bruckhoff]

Telerik,

We are using version 2011.1.519 of the editor and notice that the toolbar has a stripper with multiple options to strip things like the css font elements.

This is working fine.  It even gets the font information in the spans and divs.  Is this handled by regex?  We are trying to strip the same kind of elements for Ntext fields that were generated by the editor for a PDF report where we want to have font consistency.

Could you give me a clue how this was accomplished (again, regex) on the client-side?

Thank you

[Dobromir]

Hi Toby,

Yes, stripping the formatting is achieved by parsing the content of the editor client-side (JavaScript) and remove unwanted elements using regular expressions. For example the following code is used to strip the style's attribute from the elements:

textHtml = textHtml.replace(/(<[^>]+) style="[^"]*"([^>]*>)/ig, "$1 $2");

On a side note, I am not quite sure I understand exactly what you are trying to achieve. Could you please describe in more details the exact scenario, so we can try to provide a guidance on how you can possibly achieve the required result?

All the best,
Dobromir
the Telerik team

[Christian Bruckhoff]

Dobromir, sorry for the delay.  Your email ended up in my spam folder.

We are trying to find a way to strip just the font information (size, font family, etc.) from html generated by the Telerik editor.  Users may have input data using the editor with varying font information.  For reporting purposes we need to take this data and have it use a uniform font, size, etc.  (without affecting the original html that is stored)

Right now in our reports we strip font tags and all span/div tags to achieve this purpose.  The only problem with this is that it is like taking a hammer to pound a pin.  It can strip style information from the span/div tags that we may want.  We only want the ability to strip the font information from the span/div tags and leave the other style information there.

Does this makes sense?

Thank you for your help

[Rumen]

Hello Toby,

You can implement your own custom content filter (as the below one that we prepared for your convenience) that will strip the desired font related inline styles:

<telerik:radeditor runat="server" ID="RadEditor1" SkinID="DefaultSetOfTools" OnClientLoad="OnClientLoad">
    <Content>
        <strong><br /> Switch to Html mode to run the content filter.<br /> You will see that the casing is changed to upper case.</strong>
    </Content>
</telerik:radeditor>
<script type="text/javascript">
    function OnClientLoad(editor, args) {
        editor.get_filtersManager().add(new MyFilter());
    }
    MyFilter = function () {
        MyFilter.initializeBase(this);
        this.set_isDom(false);
        this.set_enabled(true);
        this.set_name("RadEditor filter");
        this.set_description("RadEditor filter description");
    }
    MyFilter.prototype =
{
    getHtmlContent: function (content) {
        content = content.replace(/(<[^>]*style=")([^"]*)("[^>]*>)/ig,
        function (match, g1, g2, g3) {
            g2 = g2.replace(/(?:(?:^color)|(?:[\s;]color)):[^;]*;/gi, "");
            g2 = g2.replace(/font-size[^;]*;/gi, "");
            g2 = g2.replace(/font-family[^;]*;/gi, "");
            return g1 + g2 + g3;
        });
        return content;
    }
}
    MyFilter.registerClass('MyFilter', Telerik.Web.UI.Editor.Filter);
</script>

Kind regards,
Rumen
the Telerik team