Asp.net integrates Baidu ueditor Rich Text

1. Download the complete source code package from the official website and decompress it to any directory. The decompressed source code directory structure is as follows:

Http://ueditor.baidu.com/website/ipanel/panel.html #

_ Examples: Example page of the full editor

_ Demos: Various Use Cases of the Editor

Dialogs: Resources and JS files corresponding to the pop-up dialog box

Themes: style pictures and style files

Server: files related to server operations such as PHP and JSP

Third-party: third-party plug-in

Editor_all.js: Package files of all files under the _ src directory

Editor_all_min.js: compression version of The editor_all.js file. We recommend that you use

Editor_config.js: configuration file of the editor. It is recommended that the editor instantiation page be placed in the same directory.

2. Steps for deploying ueditor to the actual project (uetest:

Step 1: create a directory in any folder of the project to store ueditor-related resources and files, which is created in the project root directory and named ueditor.

Step 2: Copy dialogs, themes, third-party, editor_all.js, and editor_config.js in the source code package to the ueditor file folder. All files except the ueditor directory are specific project files. The files listed here are for example only.

Step 3: For simplicity, the index. ASPX page under the root directory is used as the instantiation page of the editor to display the full version of ueditor. In the index. aspx file, first import the three entry files required by the editor. The sample code is as follows:

<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "> <title> www.qk12333.com Web 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> <LINK rel = "stylesheet" href = "ueditor/themes/default/ueditor.css">

Step 4: Create an editor instance and its dom container in the index. aspx file. The code example is as follows:

<div id="myEditor"></div><script type="text/javascript">    var editor = new baidu.editor.ui.Editor();    editor.render("myEditor");</script> 

Last step: Find the path of the URL variable configuration editor in/uetest/ueditor/editor_config.js in your project.

    // Modify it hereVaR url = Window. ueditor_home_url | "/website2/ueditor/"; var TMP = Window. location. pathname; // remove it here // URL = Window. ueditor_home_url | TMP. substr (0, TMP. lastindexof ("\/") + 1 ). replace ("_ examples /",""). replace ("website/", ""); // You can configure the relative or absolute path of the ueditor directory on your website (the absolute path starting with HTTP)

So far, a complete editor instance has been deployed in our project! Enter http: // localhost/uetest in the browser to run the powerful ue function!

Iii. Notes

1. When you reference editor_config.js, it is best to load it before editor_all.js. Otherwise, an error may occur in certain situations.

2. If you want to assign an initial value to the editor, replace the DIV described above in index. aspx with the initial content.

3. Note the root path of the editor resource file. It indicates that the page is instantiated as the current path by the editor, pointing to the path of the editor resource file (that is, the directory such as dialog. In view of the various path problems that many users encounter when using the editor, we strongly recommend that you use the "relative path to the root directory of the Website" for configuration. "Relative path to the root directory of the Website" is a path starting with a slash, such as "/uetest/ueditor.

In addition, if you are using a relative path, such as "ueditor/" (relative to the path Structure of chart 1)

If multiple pages at different levels on the site need to instantiate the editor and reference the same ueditor, it may not be applicable to the editor of each page. Therefore, ueditor provides the root path that can be separately configured in the editor for different pages. Specifically, you can write the following code at the top of the page where the editor needs to be instantiated.

Of course, make the URL here equal to the corresponding configuration. Window. ueditor_home_url = "/xxxx /";