NicEditor——超轻量级文本编辑器

来源：互联网发布：win10下看不到mac分区编辑：程序博客网时间：2024/05/16 05:15

　　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变成富文本编辑器。

0 0