Unable to add textbox in toolcollection in bottom RadEditor

2 posts, 0 answers
  1. Hariharan
    Hariharan avatar
    9 posts
    Member since:
    Nov 2011

    Posted 21 Nov 2011 Link to this post

    Hi,

    RadEditor

    I am unable to add textbox in editor tool bar collection.
    Actually i want to show the tag attribute values to text box which i want to create.

    Is any way to add textbox to botton (Editor tool collection).

    Although i tried to create via custom module. It wont initialize.

    KIndly share any idea to add text box in editor tool (similar to property inspector actions)

    Thank you
  2. Rumen
    Admin
    Rumen avatar
    14431 posts

    Posted 22 Nov 2011 Link to this post

    Hi Hariharan,

    Have you tried to implement your own custom module as shown in the following demo, e.g.

    <telerik:radeditor runat="server" ID="RadEditor1" Height="700px" >
       <Modules>
          <telerik:EditorModule Name="MyModule" Enabled="true" Visible="true" />
          <telerik:EditorModule Name="RadEditorStatistics" Enabled="true" Visible="true" />
       </Modules>
    </telerik:radeditor>

    and after that implement the initializeBase function, e.g.

    <script type="text/javascript">
    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.doSomething(); });
            this.doSomething();
        },

        //A method that does the actual work - it is usually attached to the "selection changed" editor event
        doSomething : function()
        {
            var span = document.createElement ("SPAN");
            span.innerHTML = this.get_editor().get_html();

            var imageCount = span.getElementsByTagName("IMG").length;
            var tableCount = span.getElementsByTagName("TABLE").length;

            var element = this.get_element();
            element.innerHTML = "<b>CUSTOM MODULE: Images: " + imageCount + " Tables: " + tableCount + "</b>";
            element.style.border = "1px solid red";
            element.style.backgroundColor = "yellow";
            element.style.color = "red";
        }
    };

    MyModule.registerClass('MyModule', Telerik.Web.UI.Editor.Modules.ModuleBase);
    </script>

    Another option is to override the methods and functions of the built-in Properties inspector module as shown in this forum thread: Edit html div attributes in design mode.

    Kind regards,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top