NicEdit是一个轻量级,跨平台的Inline Content Editor。NicEdit可以让不论什么 element/div变成可编辑或者可以把标准的TextArea转换成富文本编辑器。
相较于曾经用过的FreeTextBox,NicEdit更加的轻便,其轻量级的程度——总共就一个JS文件和一张图片,并且使用也十分简单。引用下载好的JS文件,然后调用对应的JS函数。将TextBox控件转变成富文本编辑器。
英文本:
<span style="font-size:14px;"><script src="nicEdit.js"></script>引用的js文件 <span style="white-space: pre;"> </span>调用封装好的js函数将TextBox控件转化为富文本编辑器 <script type="text/javascript"> <span style="white-space: pre;"> </span>bkLib.onDomLoaded(function() { <span style="white-space: pre;"> </span>new nicEditor({ fullPanel: true }).panelInstance('txtContent'); }); </script> <body> <form id="Form1" method="post" runat="server"> <div class="easyui-tabs" style=" 1050px; height: auto;"> <div title="新公布任务" style="padding: 10px; 1050px; height: 480px"> <div> <h1>任 务 名 称:<input id="txtWorkName" name="txtWorkName" class="easyui-validatebox" required="true" name="txtWorkName" class="" type="text" /><br /> </h1> <h1>发 布 单 位:<input id="txtPublishDepart" name="txtPublishDepart" class="easyui-validatebox" required="true" name="txtPublishDepart" type="text" /><br /> </h1> <h1>接 收 部 门:<input id="unitCategory" name="unitCategory" class="easyui-combobox" data-options=" url: 'SearchKeys.ashx?method=GetUnitCategory' , panelHeight:'auto', method: 'get', valueField: 'name', textField: 'unittype', panelWidth: 112, onSelect:function(rec){ var url = 'SearchKeys.ashx?method=QueryUnitName'+ '&Type='+rec.unittype; $('#unitName').combobox('clear'), $('#unitName').combobox('reload', url); } " /> <input id="unitName" class="easyui-combobox" name="txtReceiveDepart" data-options=" valueField:'departmentname', multiple:true, textField:'departmentname'" /> </h1> </div> <asp:FileUpload ID="FileUpload1" runat="server" /><span style="font-size:smaller;color:red;" >*注意附件格式仅仅能是:rar 或是zip 或是doc </span> <div style=" inherit; height: inherit;"> <asp:TextBox runat="server" ID="txtContent" TextMode="MultiLine" Height="356px" Width="595px" ></asp:TextBox> </div> <div> <asp:Button ID="cmdSubmit" runat="server" Text="公布任务" OnClick="cmdSubmit_Click" /> <br /> </div> </div> </div> </form> </body</span><span style="font-size:18px;">> </span>
当中通过调用JS封装好的bkLib.onDomLoaded 将服务端txtContent转换成了富文本控件.
效果:
自己汉化:
查看其js文件后。发现能够对其简单的汉化,于是改动了了当中部分js源代码,略微进行了汉化。效果例如以下:
小结:
其长处,对照FreeTextBox控件
1 使用JS编写。这样使用起来比較简单不用去引用DLL。
2 体积非常小。
3 能够直接将现有的TextBox或是TextArea变成富文本编辑器。