[Solved] Element Bar

[Michael Pullella]

Hi

There is a bar at the bottom of the editor (edit: just discovered it is the dominspector) which will display the name of the element and allow you to select or remove the element from the content.

Is it possible to change the behavior of the dom inspector?  For example, right now if you click on the name of the element it will select it for you.  I would like to add some javascript which will not only select the text but also pop up a tooltip that will display the attributes which I have assigned to that element.  I am able to parse out the attribute, but am not sure how to trigger the javascript via the Tag Inspector. 

There is another bar called the property inspector... Is it possible to use that bar to display the text instead of using a tooltip?

Update 1
-------------------------
I found a sample of creating a custom module, which is the way that I think I would go about implementing my request. 
The dom inspector is so close to doing what I want, I want to remove an element (and add a confirm before I do remove it), and want to select the tag the way that you do via the tag inspector, I just need to add a bit of custom code so that I can display one of the attributes that I'm assigning to the tag
Is there a way to get the javascript that you use to do the work of the dom inspector?  I could then just add my code to it, and create my own custom module to do it all in.

Update 2
-------------------------
I think I would be able to do what I needed to do if there was a way to get the index of the selected element when I click on it in the editor.  The dom inspector is able to determine which element is under the cursor, as it displays the element as a hyperlink that you can click on in order to select the entire element, so there must be a way to get that index. 

Is this possible?

Update 3
------------------------
Figured it out.  Code attached

    MyModule = function(element) {
        MyModule.initializeBase(this, [element]);
    }

    MyModule.prototype = {
        initialize: function() {
            MyModule.callBaseMethod(this, 'initialize');
            var selfPointer = this;
            this.get_editor().add_selectionChange(function() { selfPointer.showComment(); });
        },

        //A method that does the actual work - it is usually attached to the "selection changed" editor event
        showComment: function() {
            var span = document.createElement("SPAN");
            var selectedElement = this.get_editor().getSelectedElement();
            var element = this.get_element();
            element.innerHTML = "<b>" + selectedElement.nodeNname + ":</b>";

            switch (selectedElement.nodeName) {
                case "comment":
                    element.innerHTML += selectedElement.attributes["value"].value;
                    break;
                default:
                    element.innerHTML = "";
                    break;
            }

            element.style.borderTop = "1px solid red";
            element.style.color = "red";
            element.style.height = "100";
            element.style.borderRight = "1px solid lightblue";
            element.style.borderLeft = "1px solid lightblue";
            element.style.borderBottom = "1px solid lightblue";
        }
    };

    MyModule.registerClass('MyModule', Telerik.Web.UI.Editor.Modules.ModuleBase);

[Dobromir]

Hi Michael,

Please accept our sincere apologies for the delayed answer.

You have taken the right approach by creating a custom module. RadEditor does not offers the functionality to modify the built-in system modules out-of-the box, because they are quite complex tools. However, it is possible to modify the behavior / functionality of a built-in module by modifying its code.

For your convenience I have attached the source code of the RadEditorDomInspector module so you can modify it to match the required functionality.

Kind regards,
Dobromir
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.