NicEditor——超輕量級文字編輯器，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轉換成了富文本控制項．
效果：
自己漢化： 查看其js檔案後，發現可以對其簡單的漢化，於是修改了了其中部分js源碼，稍微進行了漢化。效果如下：
小結：
其優點，對比FreeTextBox控制項
1 使用JS編寫，這樣使用起來比較簡單不用去引用DLL。
2 體積很小。
3 可以直接將現有的TextBox或是TextArea變成富文字編輯器。
富文本中會有一個設定檔（你找找niceditor的）。我用的是ewebeditor，config.php中有一行$aStyle[9] = "coolblue|||blue|||coolblue|||../../uploadfile/|||550|||350|||rar|zip|exe|doc|xls|chm|hlp|||swf|||gif|jpg|jpeg|bmp|||rm|mp3|wav|mid|midi|ra|avi|mpg|mpeg|asf|asx|wma|mov|||gif|jpg|jpeg|bmp|||500|||20000|||20000|||20000|||20000|||1|||1|||EDIT|||1|||0|||2|||||||||1|||0|||COOL亂碼|||1|||zh-cn|||0|||500|||300|||0|||Ȩ...|||000000|||12|||simkai.ttf|||../sysimage/ewebeditor.gif|||0|||jpg|jpeg|||300|||FFFFFF|||1|||1"; 改成$aStyle[9] = "coolblue|||blue|||coolblue|||../uploadfile/|||550|||350|||rar|zip|exe|doc|xls|chm|hlp|||swf|||gif|jpg|jpeg|bmp|||rm|mp3|wav|mid|midi|ra|avi|mpg|mpeg|asf|asx|wma|mov|||gif|jpg|jpeg|bmp|||500|||20000|||20000|||20000|||20000|||1|||1|||EDIT|||1|||0|||2|||||||||1|||0|||COOL亂碼|||1|||zh-cn|||0|||500|||300|||0|||Ȩ...|||000000|||12|||simkai.ttf|||../sysimage/ewebeditor.gif|||0|||jpg|jpeg|||300|||FFFFFF|||1|||1"; 在富文本的同級目錄建立一個uploadfile檔案夾。就可以修改編輯器上傳的圖片路徑。在儲存內容的時候用htmlspecialchars()轉碼一下需要儲存的內容，這樣在顯示的時候直接輸出圖片就會顯示。希望對你有所協助。
怎在頁面編寫顯示超文字編輯器？
fckeditor,editor,xheditor,都能實現！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
