RichTextBox - Custom toolbar

Url
Link Text
Tooltip
Target
  •  
  •  

DJME2 RichTextBox

DJME2 RichTextBox allows your users to edit HTML in a familiar, user-friendly way. The RichTextBox provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists, and image handling. The extension outputs identical HTML across all major browsers, follows accessibility standards and provides an extended programming API for content manipulation.

HTML

About this example

The RichTextBox provides different ways to custom buttons to its toolbar:

1.Use default toolbars: The RichTextBoxPane provides 4 default toolbars:

  • AddClipboardTools
  • AddFormatTools
  • AddParagraphTools
  • AddFontTools

<%
  Ajax.Dna().RichTextBox()
        .Panes(panes=>{
           panes.Clear();
           panes.Add.AddFormatTools()
                     .AddClipboardTools();
        })
        .Render();
%>

2.Use CustomTools method to custom your toolbar


<% 
    Ajax.Dna().RichTextBox("rte1")
        .Width(660)
        .ToolPanes(panes =>
        {
            panes.Clear();
            panes.Add().CustomTools(tool =>
            {
               tool.Add().Buttons(buttons =>
               {
                   buttons.AddIconButton("d-rte-icon d-rte-link", "Place the button click handl scripts");
               });
              tool.Add().AddTemplateTool(() => {
               /*Place any html code or server code here 
                * to custom your button
              */
              });
             });
        })      
        .Render();
%>
p>