zoukankan      html  css  js  c++  java
  • 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=" 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变成富文本编辑器。


  • 相关阅读:
    浅谈ssh(struts,spring,hibernate三大框架)整合的意义及其精髓
    Spring中ClassPathXmlApplicationContext类的简单使用
    测试计划/系统风险 (设计方面、开发方面、测试本身 等风险)
    浏览器兼容
    4.0 爬虫
    2.1 IDEA
    2.3 接口测试
    1.1测试分类
    1.3 ODPS
    2.1 Word 插入 smartart、图表
  • 原文地址:https://www.cnblogs.com/wgwyanfs/p/6806478.html
Copyright © 2011-2022 走看看