Edit html div attributes in design mode

7 posts, 0 answers
  1. Stephen
    Stephen avatar
    11 posts
    Member since:
    Jul 2011

    Posted 15 Jul 2011 Link to this post

    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.
  2.
  3. Stephen
    Stephen avatar
    11 posts
    Member since:
    Jul 2011

    Posted 18 Jul 2011 Link to this post

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

    Posted 19 Jul 2011 Link to this post

    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

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  7. Rumen
    Admin
    Rumen avatar
    14285 posts

    Posted 20 Jul 2011 Link to this post

    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

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  8.
  9. deepa
    deepa avatar
    2 posts
    Member since:
    Mar 2015

    Posted 02 Mar 2015 in reply to Rumen Link to this post

    I was able to add custom module to Radeditor. But somehow I need to add button control to my custom module. Is that possible?
  11. deepa
    deepa avatar
    2 posts
    Member since:
    Mar 2015

    Posted 02 Mar 2015 in reply to Rumen Link to this post

    I was able to add custom module to Radeditor. But somehow I need to add button control to my custom module. Is that possible?
  13. Ianko
    Admin
    Ianko avatar
    1928 posts

    Posted 04 Mar 2015 Link to this post

    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:

    Regards,

    Ianko
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  14.
Back to Top