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

Posted 2020-09-16 wgwyanfs

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了NicEditor——超轻量级文本编辑器相关的知识，希望对你有一定的参考价值。

　　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转换成了富文本控件．

　效果：技术分享