Home > Developer > Web Develop
NicEditor-ultra-lightweight text editor, niceditor
NicEdit is a lightweight, cross-platform Inline Content Editor. NicEdit enables any element/div to be editable or converts standard TextArea to a rich text editor.
Compared with the previously used FreeTextBox, NicEdit is more lightweight, with a total of JS files and images, which is also very simple to use. Reference the downloaded JS file, and then call the corresponding JS function to convert the TextBox control into a rich text editor.
English text:<Span style = "font-size: 14px;"> <script src = "nicEdit. js "> </script> referenced js file <span style =" white-space: pre; "> </span> call the encapsulated js function to convert the TextBox control into a Rich text Editor <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 = "ser Ver "> <div class =" easyui-tabs "style =" width: 1050px; height: auto; "> <div title =" new release task "style =" padding: 10px; width: 1050px; height: 480px "> <div>
The server txtContent is converted to a rich text control by calling bkLib. onDomLoaded encapsulated by JS.
Effect:
Self-localization: After viewing its js file, I found that it could be simply written in Chinese, so I modified some of the js source code and made it a little more Chinese. The effect is as follows:
Summary:
Its advantages are compared with the FreeTextBox Control
1. Use JS to compile the SDK. In this way, you do not need to reference the DLL.
2 is very small.
3. You can directly convert an existing TextBox or TextArea into a rich text editor.
How to change the image path uploaded by Rich Text Editor niceditor
In rich text, there will be a configuration file (you can find niceditor ). I use ewebeditor, config. php has a line $ 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 garbled characters | 1 | zh-cn | 0 | 500 | 300 | 0 | small... | 000000 | 12 | simkai. ttf | .. /sysimage/ewe Beditor.gif | 0 | jpg | 300 | FFFFFF | 1 | 1 "; change to $ 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 garbled characters | 1 | zh-cn | 0 | 500 | 300 | 0 | small... | 000000 | 12 | simka I. ttf | .. /sysimage/ewebeditor.gif | 0 | jpg | jpeg | 300 | FFFFFF | 1 | 1 "; create an uploadfile folder in the same directory of rich text. You can modify the path of the image uploaded by the editor. When saving the content, use htmlspecialchars () to transcode the content to be saved, so that the image will be displayed directly when displayed. Hope to help you.
How to compile a Hyper Text Editor on the page?
Fckeditor, editor, and xheditor can all be implemented!
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
