Baidu Ueditor use of detailed (author: Old Lu www.laoluit.com)
Related Video Tutorials Download: www.laoluit.com
When we are still using FCKeditor, Baidu has quietly developed a more powerful text editor ueditor, specifically for the Chinese to build, please see--------:
Web text editors are widely used in forums, message system, microblogging and other sites, all users can publish the text of the site, almost to the use of text editor, Lao Lu today to introduce a Chinese open source text editor of their own, the world's largest Chinese search engine-Baidu launched the Ueditor. Ueditor is developed by Baidu Web front-end Research and Development Department of the WYSIWYG web editor, with lightweight, customizable, user experience and other characteristics, open source based on the BSD protocol, allowing the free use and use of code. See also Web site:
Http://ueditor.baidu.com/index.html. The latest version of 1.1.7, can be used in jsp,php,asp and other websites.
All right, now look at Old Loulai. How to use: JSP website for example
1 Download Ueditor
Visit this URL: http://ueditor.baidu.com/index.html, find download
Then download the Ueditor1.1.7.zip or some other version
2 after decompression we will see 6 folders and 3 JS files as well as an update log text
which
Official online Download the full source package, extract to any directory, the source directory after the extraction of the structure as follows:
_examples: Example page for the complete version of the editor
_demos: Various use cases for editors
Dialogs: Pop-up dialog box corresponding to the resources and JS files
Themes: Style pictures and style files
Server: PHP, JSP, and other files related to the operation of servers
Third-party: Third-party Plug-ins
Packaging files for all files in the EDITOR_ALL.JS:_SRC directory
Compressed version of Editor_all_min.js:editor_all.js file, recommended for formal deployment
Editor_config.js: Editor's configuration file, suggestion and editor instantiation page in same directory
3 in your Web project or Web site root directory, create a new name called Ueditor folder. Copy all of these folders and JS to this folder
To complete this preparation
4 in the JSP page contains the required JS and CSS
<script type= "Text/javascript" charset= "Utf-8" src= "Ueditor/editor_config.js" ></script>
<script type= "Text/javascript" charset= "Utf-8" src= "Ueditor/editor_all_min.js" ></script>
<link rel= "stylesheet" type= "Text/css" href= "Ueditor/themes/default/ueditor.css"/>
Note here: the referenced JS or CSS must be correct, otherwise it will not show up
My Ueditor folder and JSP file are in the root directory, so write above.
5 Modify the seventh line in the Editor_config.js file below the Editor folder.
Modify variable URL: var url= "/your website name or Web project name/ueditor/";
For example: My project name is Laoluit
Then I modified the Var url= "/laoluit/ueditor/";
6 Add Editor
<body>
<form action= "dopost.jsp" method= "POST" >
<script type= "Text/plain" id= "Myeditor" class= "Myeditor" >
</script>
<input type= "Submit" value= "POST" >
</form>
<script type= "Text/javascript" >
var editor = new Baidu.editor.ui.Editor ();
Editor.render (' Myeditor ');
</script>
</body>
6 receive submitted data in another JSP or servlet
<%
The form is submitted to dopost.jsp, and the content default name written in the editor is Editorvalue
So through Request.getparameter ("Editorvalue") you can get
When you receive the data and print to the background, you can save it to the database.
System.out.println (Request.getparameter ("Editorvalue"));
%>
7 Supplements
Default values in the Settings editor:
<script language= "javascript" type= "Text/javascript" >
var op = {
Initialcontent: ' Default Value ..... ',//Initialize the contents of the editor
minframeheight:1024//Set default height
};
var editor = new Baidu.editor.ui.Editor (OP);
Editor.render (' Myeditor ');
</script>
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
