富文本系列《3-1》:NicEditor
NicEditor——超轻量级文本编辑器
NicEdit是一个轻量级,跨平台的Inline Content Editor。NicEdit能够让任何 element/div变成可编辑或者能够把标准的TextArea转换成富文本编辑器。
相较于以前用过的FreeTextBox, NicEdit更加的轻便,其轻量级的程度——总共就一个JS文件和一张图片,而且使用也十分简单。引用下载好的JS文件,然后调用相应的JS函数,将TextBox控件转变成富文本编辑器。
主页:http://nicedit.com/
下载:http://nicedit.com/download.php
示例:http://nicedit.com/demos.php
英文本:
< span style="font-size:14px;">< script src="nicEdit.js">script>引用的js文件< span style="white-space: pre;"> span>调用封装好的js函数将TextBox控件转化为富文本编辑器< script type="text/javascript">
span>bkLib.onDomLoaded( function() {
span> new nicEditor({ fullPanel: true }).panelInstance('txtContent');
});script>< body>
< form id="Form1" method="post" runat="server">
< div class="easyui-tabs" style="width: 1050px; height: auto;">
< div title="新发布任务" style="padding: 10px; width: 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="width: 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 style="font-size:18px;">>span>
其中通过调用JS封装好的bkLib.onDomLoaded 将服务端txtContent转换成了富文本控件.
效果:
![aaa208670dcc9c4f6ecf7a5d67aff731.png](https://i-blog.csdnimg.cn/blog_migrate/8c8d3e14ec04d5fc1bc57491474aeb4e.jpeg)
自己汉化:
查看其js文件后,发现可以对其简单的汉化,于是修改了了其中部分js源码,稍微进行了汉化。效果如下:
![4d9f58d9d441c91aba6aa6d7770f9d35.png](https://i-blog.csdnimg.cn/blog_migrate/2adaa246b9c161b0402dcd62327bd5d4.jpeg)
小结:
其优点,对比FreeTextBox控件
1 使用JS编写,这样使用起来比较简单不用去引用DLL。
2 体积很小。
3 可以直接将现有的TextBox或是TextArea变成富文本编辑器。