Edit html div attributes in design mode

[Stephen]

I'm sure someone has come across this before, but I'm having a tough time locating this information.  Basically my users want the ability to edit basic html attributes for div elements.  Attributes like width, height, and background.  It's possible to achieve the desired effect by converting the layout to tables (you can edit a tables attributes) but that isn't a viable option for us.  Could someone point me in the right direction?

Thanks for your time.

[Stephen]

Shameless bump.  This seems like something simple, I just can't seem to find it anywhere.  Any help will be most appreciated.

[Rumen]

Hello Stephen,

The properties inspector module of RadEditor does not offer support for DIV elements. The supported elements are:

TABLE, TH, TD, TR, A,IMG, INPUT, FORM and TEXTAREA.

If you would like you can implement your own custom module or custom dialog that will offer the ability 
to modify the attributes of the div elements.

http://demos.telerik.com/aspnet-ajax/editor/examples/customdialogs/defaultcs.aspx
http://demos.telerik.com/aspnet-ajax/editor/examples/custommodules/defaultcs.aspx

All the best,
Rumen
the Telerik team

[Rumen]

This is a follow-up.

You can achieve your goal by overwriting the _nodeAttributesArray of RadEditorNodeInspector which contains the definitions of each node panel, e.g.

<telerik:RadEditor ID="RadEditor1" runat="server">
    <Content><div style="color:red;background-color: yellow; border: 1px solid red; width:120px; height:20px;">test</div></Content>
</telerik:RadEditor>
<script type="text/javascript">
Telerik.Web.UI.Editor.Modules.RadEditorNodeInspector.prototype._nodeAttributesArray =
    //Contains definitions for each node panel
    {
    DIV: ["width", "borderColor", "bgColor", "className", "height", "border"],
    TABLE: ["width", "borderColor", "cellSpacing", "bgColor", "className", "SetTableProperties", "height", "cellPadding", "align", "border"],
    TH: ["width", "borderColor", "bgColor", "className", "SetCellProperties", "height", "align", "noWrap", "border"],
    TD: ["width", "borderColor", "bgColor", "className", "SetCellProperties", "height", "align", "noWrap", "border"],
    TR: ["width", "className", "height"],
    A: ["href", "className", "LinkManager", "title", "target"],
    IMG: ["width", "borderColor", "className", "SetImageProperties", "height", "align", "border", "alt"],
    INPUT: ["NAME", "width", "height", "id", "title", "className", "value"],
    FORM: ["className", "width", "height", "NAME", "action", "id"],
    TEXTAREA: ["className", "width", "height", "NAME", "id", "rows", "cols"]
   }
</script>

Greetings,
Rumen
the Telerik team

[deepa]

I was able to add custom module to Radeditor. But somehow I need to add button control to my custom module. Is that possible?

[deepa]

I was able to add custom module to Radeditor. But somehow I need to add button control to my custom module. Is that possible?

[Ianko]

Hi Deepa,

The forum thread is about extending the functionality of the built-in Node Inspector module. Your enquiry is rather related to creating an custom module matter.

I suggest examining these materials on the matter:

• Creating Custom Modules
• Demo: Custom Modules

Regards,

Ianko
Telerik