HtmlTextBox, Underline and RadEditor

[Christian Devita]

I am using RadEditor to create content for use in the HtmlTextBox item. I have the following problem. The HtmlTextBox does not support <span style="text-decoration: underline;"> markup for underline and instead supports <u></u> but the RadEditor outputs <span style="text-decoration: underline;">. I assume this is because the RadEditor is XHTML compliant and the <u> tag is deprecated. Is there any workaround for this issue?  I am investigating creating a content filter for RadEditor to handle this but wanted to check to see if there is a simpler solution.

Thanks,

Chris

[Steve]

Hello Christian Devita,

You can review the HtmlTextBox help article for info on all support html tags and css attributes. As you can see text-decoration is currently not supported, but we accept your arguments and would log its implementation in our TODO list. Unfortunately there is no "workaround" that we can offer and filtering the produced html by RadEditor is your best bet.

Your Telerik points have been updated - do let us know if other suggestions/ideas come to mind.

Regards,
Steve
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Christian Devita]

I created a custom filter to convert <span style="text-decoration: underline;"> to <u> so it will work with telerik reporting.

here is the code for anyone who is having similar issues:

<telerik:radeditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad" ContentFilters="MakeUrlsAbsolute,FixEnclosingP">  
</telerik:radeditor>

                                <script type="text/javascript">

                                    function OnClientLoad(editor, args) {

                                        editor.get_filtersManager().add(new FixUnderline());

                                    }

                                    FixUnderline = function() {

                                    FixUnderline.initializeBase(this);

                                        this.IsDom = true;

                                        this.Enabled = true;

                                        this.Name = "FixUnderline";

                                        this.Description = "This filter changes CSS underline to u tag";

                                    };

                                    FixUnderline.prototype = { _getElements: function(a, c) {

                                        var b = a.getElementsByTagName(c);

                                        if (!b) {

                                            b = a.ownerDocument.getElementsByTagName(c);

                                        } return b;

                                    }, _replaceElementWithSpan: function(l, h, k) {

                                        var m = this._getElements(l, h);

                                        var d = [];

                                        for (var b = m.length - 1; b >= 0; b--) {

                                            Array.add(d, m[b]);

                                        } for (var a = 0, c = d.length; a < c; a++) {

                                            var e = l.ownerDocument.createElement("span");

                                            e.style.cssText = k;

                                            var f = d[a];

                                            var g = f.innerHTML;

                                            if ($telerik.isIE && g == " ") {

                                                e.innerText = g;

                                            } else {

                                                Telerik.Web.UI.Editor.Utils.setElementInnerHtml(e, g);

                                            } f.parentNode.replaceChild(e, f);

                                        }

                                    }, _replaceSpanWithElement: function(o, n, f) {

                                        var q = this._getElements(o, "span");

                                        var e = [];

                                        for (var b = q.length - 1; b >= 0; b--) {

                                            Array.add(e, q[b]);

                                        } for (var a = 0, c = e.length; a < c; a++) {

                                            var m = [];

                                            var g = e[a];

                                            for (var p = 0; p < g.childNodes.length; p++) {

                                                Array.add(m, g.childNodes[p].cloneNode(true));

                                            } if (g.style.cssText.toLowerCase() == f || g.style.cssText.toLowerCase() == (f + ";")) {

                                                var h = o.ownerDocument.createElement(n);

                                                for (var d = 0; d < m.length; d++) {

                                                    h.appendChild(m[d]);

                                                } g.parentNode.replaceChild(h, g);

                                            }

                                        }

                                    }, getHtmlContent: function(a) {

                                        this._replaceSpanWithElement(a, "u", "text-decoration: underline");

                                        return a;

                                    }, getDesignContent: function(a) {

                                        this._replaceElementWithSpan(a, "u", "text-decoration: underline");

                                        return a;

                                    }

                                    };

                                    FixUnderline.registerClass("FixUnderline", Telerik.Web.UI.Editor.Filter);

                                </script>

[Casey]

Thanks a lot, Christian!! This helped me out as well!