Wednesday, 11 September 2013

Textbox like HtmlEditor using RadControl

http://demos.telerik.com/aspnet-ajax/editor/examples/editorastextbox/defaultcs.aspx
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 <link href="Telerik.css" rel="stylesheet" type="text/css" />   
 <telerik:RadEditor  Height="100px" Width="350px" ToolsWidth="350px" EditModes="Design"
     ID="RadEditor1" runat="server" ToolbarMode="ShowOnFocus" ToolsFile="~/Jupcss/Telerik.xml">
     </telerik:RadEditor>



/* The following CSS needs to be copied to the page to produce textbox-like RadEditor */

Telerik.css


.reLeftVerticalSide, .reRightVerticalSide, .reToolZone, .reToolCell {
     background: white !important;
}

.reToolCell {
     display: none\9 !important; /* for all versions of IE in order to prevent border bottom disappearing */
}

.reContentCell {
     border-width: 0 !important;
}

.formInput {
     border: solid 1px black;
}

.RadEditor {
     filter: chroma(color=c2dcf0);
}

.reWrapper_corner, .reWrapper_center {
     display: none !important; /* for FF */
}

td.reWrapper_corner, td.reWrapper_center {
     display: block\9 !important; /* for all versions of IE */
}

.reContentCell
{
   height: 100px !important; /* this height should be qual to reWrapper element inline height, which in that case is 150px */
}
        
 .reContentCell iframe
 {
   border-bottom: 1px solid #828282;
 }

Telerik.xml

<?xml version="1.0" encoding="utf-8" ?>
<root>
  <tools name="Formatting" enabled="true" dockable="true">
    <tool name="Bold" />
    <tool name="Italic" />   
    <tool name="Underline" />
    <tool separator="true"/>
    <tool name="ForeColor" />
    <tool name="BackColor"/>
    <tool separator="true"/>
    <tool name="FontName"/>
    <tool name="RealFontSize"/>   
  </tools>
</root>

 

No comments:

Post a Comment