Custom TextEditor with the Help Jquery in Asp.net

Custom TextEditor with the Help Jquery in Asp.net

Follow two steps for implementation

Step 1: Add below section to Head Tag

<style type=”text/css”>
.LeftContent {
padding-left:35px;
}
.cleditorMain {border:1px solid #999; padding:0 1px 1px; background-color:white}
.cleditorMain iframe {border:none; margin:0; padding:0}
.cleditorMain textarea {border:none; margin:0; padding:0; overflow-y:scroll; font:10pt Arial,Verdana; resize:none; outline:none /* webkit grip focus */}
.cleditorToolbar {background: url(‘images/toolbar.gif’) repeat}
.cleditorGroup {float:left; height:26px}
.cleditorButton {float:left; width:24px; height:24px; margin:1px 0 1px 0; background: url(‘images/buttons.gif’)}
.cleditorDisabled {opacity:0.3; filter:alpha(opacity=30)}
.cleditorDivider {float:left; width:1px; height:23px; margin:1px 0 1px 0; background:#CCC}
.cleditorPopup {border:solid 1px #999; background-color:white; position:absolute; font:10pt Arial,Verdana; cursor:default; z-index:10000}
.cleditorList div {padding:2px 4px 2px 4px}
.cleditorList p,
.cleditorList h1,
.cleditorList h2,
.cleditorList h3,
.cleditorList h4,
.cleditorList h5,
.cleditorList h6,
.cleditorList font {padding:0; margin:0; background-color:Transparent}
.cleditorColor {width:150px; padding:1px 0 0 1px}
.cleditorColor div {float:left; width:14px; height:14px; margin:0 1px 1px 0}
.cleditorPrompt {background-color:#F6F7F9; padding:4px; font-size:8.5pt}
.cleditorPrompt input,
.cleditorPrompt textarea {font:8.5pt Arial,Verdana;}
.cleditorMsg {background-color:#FDFCEE; width:150px; padding:4px; font-size:8.5pt}

</style>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js” type=”text/javascript”></script>
<script type=”text/javascript” src=”js/jquery.cleditor.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
$(“textarea[id*=txtEditor1]”).cleditor();
});
</script>

Step 2: Add below section to Design Page or Aspx Page

<asp:TextBox ID=”txtEditor1″ TextMode=”MultiLine” runat=”server”></asp:TextBox>
Download:

Text Editor

ToolBar Images:  Toolbar images
Jquery Editor:  Jquery Editor Js

 

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply