Progress® Telerik® UI for ASP.NET AJAX Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 19 Apr 2024 14:28 by ADMIN
Release 2024 Q2
reinout
Created on: 18 Apr 2024 06:49
Category: Editor
Type: Bug Report
0
class not cleared in RadEditor

When I want to clear a class in the RadEditor the class is cleared in the hyperlink manager, but not in the area in the footer of the RadEditor.

If 'clear class' is selected nothing happens.

Attached Files:
3 comments
ADMIN
Rumen
Posted on: 18 Apr 2024 09:41

The code may error out if the editor js object is still not created. To ensure that it is add this if check:

 <script>
     if (typeof Telerik !== "undefined") {
         
     Telerik.Web.UI.Editor.AttributeCommand.prototype.execute = function () {
         var attr = this._attribName;
         var classAttr = this._classAttr;
         var attrLower = attr.toLowerCase();
         var element = this._nodeBookmark.select();

         if (!element) { return false; }

         if (!this._isExecuted) {
             if (attr == 'style') { this._oldValue = element.style.cssText; } else { this._oldValue = element.getAttribute(this._classAttr || attr); }
         }

         if (attr && attrLower == 'name' && this.isIE) {
             element.name = this._newValue;
             element.removeAttribute('name');
             element.removeAttribute('NAME');

             if ($telerik.isIE9Mode) {
                 var nodeName = element.nodeName;

                 if (nodeName == 'INPUT' || nodeName == 'TEXTAREA' || nodeName == 'BUTTON') {
                     element.removeAttribute('submitName');
                     element.setAttribute('name', this._newValue);
                 }
             }
         }

         var newVal = this._newValue.trim();

         if ('' == newVal) {
             if (attr == "className") {
                 element.removeAttribute(classAttr, 0);
             }
             else {
                 element.removeAttribute(attr, 0);
             }
         }
         else if (attr == 'style') {
             element.style.cssText = this._newValue;
         } else {
             element[attr] = this._newValue;

             if (attrLower == 'nowrap' || attr == 'borderColor' || attr === 'value')
             {
                 element.setAttribute(attr, this._newValue);
             }
         }

         this._isExecuted = true;

         return true;
         }
     }
 </script>
 <telerik:RadEditor runat="server" ID="RadEditor1" Height="600px">
     <Content>This is a <a href="http://test.com" class="redText">link</a> test.</Content>
     <Modules>
         <telerik:EditorModule Name="RadEditorStatistics" Visible="true" />
         <telerik:EditorModule Name="RadEditorDomInspector" Visible="true" />
         <telerik:EditorModule Name="RadEditorNodeInspector" Visible="true" />
         <telerik:EditorModule Name="RadEditorHtmlInspector" Visible="true" />
     </Modules>
 </telerik:RadEditor>

Alternatively you can also check for 

if (typeof ($telerik) != "undefined") { 
  ...
}

Regards,
Rumen
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources! 
reinout
Posted on: 18 Apr 2024 09:27
I tried your script and get a 'Telerik is not defined' error. I don't want to change mess up the project to much. Is there an easy fix for this error? Otherwise I'm confident the problem will be gone in the next release.
ADMIN
Rumen
Posted on: 18 Apr 2024 08:55

Hi Reinout,

Thank you for your report!

My research shows that this is a glitch in the RadEditor. The solution that I came up with is the following JS override of the execute function. The highlight shows the new check that I added to it:

 

        <style>
            .redText { color: red; }
            .blueText { color: blue; }
        </style>

        <script>
            Telerik.Web.UI.Editor.AttributeCommand.prototype.execute = function () {
                var attr = this._attribName;
                var classAttr = this._classAttr;
                var attrLower = attr.toLowerCase();
                var element = this._nodeBookmark.select();

                if (!element) { return false; }

                if (!this._isExecuted) {
                    if (attr == 'style') { this._oldValue = element.style.cssText; } else { this._oldValue = element.getAttribute(this._classAttr || attr); }
                }

                if (attr && attrLower == 'name' && this.isIE) {
                    element.name = this._newValue;
                    element.removeAttribute('name');
                    element.removeAttribute('NAME');

                    if ($telerik.isIE9Mode) {
                        var nodeName = element.nodeName;

                        if (nodeName == 'INPUT' || nodeName == 'TEXTAREA' || nodeName == 'BUTTON') {
                            element.removeAttribute('submitName');
                            element.setAttribute('name', this._newValue);
                        }
                    }
                }

                var newVal = this._newValue.trim();

                if ('' == newVal) {
                    if (attr == "className") {
                        element.removeAttribute(classAttr, 0); //or just -> element.removeAttribute("class", 0);
                    }
                    else {
                        element.removeAttribute(attr, 0);
                    }
                }
                else if (attr == 'style') {
                    element.style.cssText = this._newValue;
                } else {
                    element[attr] = this._newValue;

                    if (attrLower == 'nowrap' || attr == 'borderColor' || attr === 'value')
                    {
                        element.setAttribute(attr, this._newValue);
                    }
                }

                this._isExecuted = true;

                return true;
            }
        </script>
        <telerik:RadEditor runat="server" ID="RadEditor1" Height="600px">
            <Content>This is a <a href="http://test.com" class="redText">link</a> test.</Content>
            <Modules>
                <telerik:EditorModule Name="RadEditorStatistics" Visible="true" />
                <telerik:EditorModule Name="RadEditorDomInspector" Visible="true" />
                <telerik:EditorModule Name="RadEditorNodeInspector" Visible="true" />
                <telerik:EditorModule Name="RadEditorHtmlInspector" Visible="true" />
            </Modules>
        </telerik:RadEditor>

 

Can you please try it and let me know the result so that I can check it into the source code? Thank you!

As a small note of gratitude, I also updated your Telerik points.

    Regards,
    Rumen
    Progress Telerik

    Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources! 
    Create an account Log In
    View
    Type
    Status
    Category