Free Open source Baidu Editor (Ueditor) using the method _ page Editor

Ueditor Effect Chart

First, Introduction

Ueditor is an open source free editor, developed by Baidu Web front-end Research and Development Department WYSIWYG web editor, with lightweight, customizable, user experience and other characteristics, open source based on the BSD protocol, allowing the free use and modification of code.

Official website:
http://ueditor.baidu.com/

Second, download the address

Official Downloads:
Http://ueditor.baidu.com/website/download.html

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
Dialogs: Pop-up dialog box corresponding to the resources and JS files
Themes: Style pictures and style files
Php/jsp/.net: Background files related to server-side operations, depending on the different background version you choose, here will be different, this should be jsp,php,.net
Third-party: Third-party plug-ins (including code highlighting, source editing and other components)
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

or online search for someone else's configured example, so that they do not have to toss. I made it, the result of a long time, almost want to give up!

I am downloading the development version [1.2.5.1. Net Version] April 27, 2013, the latest version.

Iii. Methods of Deployment

Code structure diagram

Step one: Create a directory in any folder in your project for storing ueditor related resources and files, set up under the project root and named Ueditor (for your own liking).
Step two: Copy the dialogs, themes, Third-party, editor_all.js, and editor_config.js into the Ueditor folder in the source pack. Among them, the rest of the files except the Ueditor directory are specific project files, which are listed here for example only.
Third step: For the sake of simplicity, here will be the root directory of the index.php page as an editor of the instantiation page, to show the full version of the Ueditor effect. In the index.php file, first import the three portal files required by the editor, as shown in the sample code:

Copy Code code as follows:

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title> Editor full version instance </title>
<script type= "Text/javascript" src= "Ueditor/editor_config.js" ></script>
<script type= "Text/javascript" src= "Ueditor/editor_all.js" ></script>

Step Fourth: Then create an editor instance and its Dom container in the index.php file. The specific code example is as follows:

Copy Code code as follows:

<textarea name= "Background value key" id= "Myeditor" > here to write your initialization content </textarea>
<script type= "Text/javascript" >
var editor = new UE.ui.Editor ();
Editor.render ("Myeditor");
1.2.4 You can use the Code instantiation editor later
Ue.geteditor (' Myeditor ')
</script>

Last step: Find the URL Variable configuration Editor in/uetest/ueditor/editor_config.js the road in your project

Copy Code code as follows:

Absolute path configuration is strongly recommended in this way (note: The following uetest is the virtual directory name)
Url= window. ueditor_home_url| | " /uetest/ueditor/";

At this point, a complete editor instance has been deployed to our project! Enter the http://localhost/UETest in the browser to try the UE powerful function bar!

Iv. Matters of note

1. When referencing Editor_config.js, it is best to load before editor_all.js, otherwise there may be an error in specific cases.
2. If you want the editor to assign an initial value, refer to some example code for the _examples file, or read the official documentation.
3. Note the root path to the editor resource file. It means that the editor instantiates the page as the current path and points to the path to the editor resource file (that is, the dialog folder). Given the various path problems that many students have in using the editor, it is highly recommended that you configure them using the relative path relative to the site's root directory. The relative path relative to the Web site root is a path such as "/uetest/ueditor/" that begins with a slash.

Furthermore, if you are using a relative path, such as "ueditor/" (relative to the chart 1 path structure), if there are multiple pages that are not at the same level in the site need to instantiate the editor and reference the same ueditor, the editor for each page may not be available. Therefore, Ueditor provides the root path that can be configured separately for editors of different pages, specifically, the following code is written at the top of the page where the editor needs to be instantiated.
Of course, you need to make the URL here equal to the corresponding configuration. Window. Ueditor_home_url = "/xxxx/xxxx/";
For example: According to the directory structure of chart 1

If you use the editor in Index.aspx, then the top-most var URL in editor_config.js is changed to var url = "/uetest/ueditor/"

V. FAQ

1. Garbled
If the operation is successful, and there are garbled words, please check your coding mode. The scripts referenced by Ueditor are encoded and meta tags. I downloaded is utf-8 version, running up on the garbled, I refer to the script in the charset= "Utf-8" removed there is no problem.

2. Error uploading image
If the upload picture appears Red fork, or upload to half no response. The Net Folder (PHP language corresponds to PHP, and JSP language corresponding to the JSP) the following web.config delete, because it uses the. NET 4.0 configuration, and 3.5 and the following version of the problem, delete will not have an impact.

Six, finally, attach my Code

Copy Code code as follows:

<%@ Page language= "C #" autoeventwireup= "true" codefile= "Test2.aspx.cs" inherits= "Test2"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>ueditor Test </title>
<script src= "Ueditor/editor_config.js" type= "Text/javascript" ></script>
<script src= "Ueditor/editor_all.js" type= "Text/javascript" ></script>
<body>
<form id= "Form1" runat= "Server" >
<div>
<asp:textbox id= "TextBox1" runat= "Server" width= "500px" height= "300px" textmode= "MultiLine" ></asp:textbox >
<script type= "Text/javascript" >
Ue.geteditor (' TextBox1 ', {
Here you can choose the name of the tool button you want, only five of them are selected here
toolbars:[
[' fullscreen ', ' source ', ' | ', ' undo ', ' Redo ', ' | ',
' Bold ', ' italic ', ' underline ', ' strikethrough ', ' superscript ', ' subscript ', ' removeformat ', ' formatmatch ', ' Autotypeset ', ' blockquote ', ' pasteplain ', ' | ', ' ForeColor ', ' BackColor ', ' insertorderedlist ', ' insertunorderedlist ', ' SelectAll ', ' cleardoc ', ' | ',
' Rowspacingtop ', ' rowspacingbottom ', ' lineheight ', ' | ',
' Customstyle ', ' paragraph ', ' fontfamily ', ' fontsize ', ' | ',
' Directionalityltr ', ' Directionalityrtl ', ' indent ', ' | ',
' Justifyleft ', ' justifycenter ', ' justifyright ', ' justifyjustify ', ' | ', ' touppercase ', ' tolowercase ', ' | ',
' Link ', ' unlink ', ' anchor ', ' | ', ' imagenone ', ' imageleft ', ' imageright ', ' imagecenter ', ' | ',
' Insertimage ', ' emotion ', ' scrawl ', ' insertvideo ', ' music ', ' attachment ', ' map ', ' gmap ', ' insertframe ', ' Highlightcode ' , ' WebApp ', ' pagebreak ', ' template ', ' background ', ' | ',
' Horizontal ', ' date ', ' time ', ' spechars ', ' snapscreen ', ' wordimage ', ' | ',
' Inserttable ', ' deletetable ', ' insertparagraphbeforetable ', ' insertrow ', ' deleterow ', ' insertcol ', ' deletecol ', ' MergeCells ', ' mergeright ', ' mergedown ', ' splittocells ', ' splittorows ', ' splittocols ', ' | ',
' Print ', ' preview ', ' searchreplace ', ' help '
],
Automatically empty initialization content when focus
Autoclearinitialcontent:true,
Turn off word Count
Wordcount:false,
Close ElementPath
Elementpathenabled:false
For more additional parameters, refer to the configuration items in Editor_config.js
})
</script>
</div>
</form>
</body>