NicEditor——超輕量級文本編輯器
阿新 • • 發佈：2017-05-04
nic span 簡單 tip blog 自己 == img 編寫
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="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><span style="font-size:18px;">>
</span>
當中通過調用JS封裝好的bkLib.onDomLoaded 將服務端txtContent轉換成了富文本控件．
效果：
自己漢化：
查看其js文件後。發現能夠對其簡單的漢化，於是改動了了當中部分js源代碼，略微進行了漢化。效果例如以下：
小結：
其長處，對照FreeTextBox控件
1 使用JS編寫。這樣使用起來比較簡單不用去引用DLL。
2 體積非常小。
3 能夠直接將現有的TextBox或是TextArea變成富文本編輯器。
NicEditor——超輕量級文本編輯器