PHP ueditor Baidu Editor installation and use method sharing

This article mainly introduces the Ueditor Baidu Editor installation and use of methods to share, the need for friends can refer to the next

First, the official online download complete source package, extract to any directory, the extracted source directory structure is as follows:

_examples: Example page for editor full version
_demos: Various use cases of the editor
Dialogs: Popup dialog for the corresponding resources and JS file
Themes: Style picture and Style file
Server: PHP, JSP and other files related to server-side operation
Third-party: Third-party plugins
Package files for all files in the EDITOR_ALL.JS:_SRC directory
Compressed version of the Editor_all_min.js:editor_all.js file is recommended for formal deployment
Editor_config.js: Editor configuration file, suggestion and editor instantiation page in same directory

Ii. steps in deploying Ueditor to the actual project (Uetest):

The first step: in any folder of the project to establish a directory for Ueditor related resources and files, which is established under the project root directory, named Ueditor.
The second step: Copy the source package dialogs, themes, Third-party, editor_all.js and Editor_config.js to Ueditor folder. The rest of the files, except for the Ueditor directory, are specific project files, which are listed here for example only.
Step three: For simplicity, the index.php page in the root directory is used as the editor's instantiation page to show the full version of the Ueditor. In the index.php file, first import the three portal files required by the editor, the sample code is as follows:

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "><title> Editor full 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" rel= "External nofollow" >

Fourth step: Then create the editor instance and its Dom container in the index.php file. The specific code examples are as follows:

<p id= "Myeditor" ></p><script type= "Text/javascript" > var editor = new Baidu.editor.ui.Editor (); Editor.render ("Myeditor");</script>

The final step: Add the following code at the top of the editor instance:

<script type= "text/javascript" > Window. Ueditor_home_url= ' ueditor/';//This is the path of ueditor relative to the instance page </script>

The above is the relative path used, or you can use an absolute path relative to the root of the Web site, such as:

<script type= "text/javascript" > Window. Ueditor_home_url= '/uc/ueditor/';//This is the path of ueditor relative to the site root directory </script>

It is recommended to use an absolute path relative to the root of the Web site.
At this point, a complete editor instance has been deployed to our project!
The final step can also be implemented by modifying the following places (not recommended for people who do not understand JS):
Look for "url= window" in/uetest/ueditor/editor_config.js. ueditor_home_url| | " and modify it to the corresponding path, of course, if you modify the word here, window. Ueditor_home_url is not set up on the instance page.

The absolute Path Configuration url= window is strongly recommended in this way. ueditor_home_url| | " /uetest/ueditor/";

Third, the specific use

1. Submit Editor content to backend
Scenario One: A Submit button exists in the form where the editor is located, and the commit action is done by clicking this button.
This scenario is suitable for the most common occasions, there is not much problem to note, only three point description:
1) The form name that is submitted to the background by default is "Editorvalue" and can be configured in editor_config.js with the parameter name textarea.
2) You can set the Name property on the container label (that is, the script tag) to overwrite the default configuration in Editor_config.js. The instance code is as follows, where the mycontent becomes the new submission form name

<form action= "" method= "post" > <script type= "Text/plain" id= "editor" name= "mycontent" > </script> <input type= "submitted" name= "submit" value= "Submission" ></form>

3) The backend receiver program can obtain rich text content in the editor in several ways.

PHP Get: $_post["mycontent"]   //jsp Get: Request.getparameter ("mycontent");   ASP acquisition: Request ("mycontent");   NET get: Context. request.form["Mycontent"];

Scenario Two: The commit button does not exist in the form where the editor is located, and the commit action is triggered by an external event.
This scenario is suitable for situations where there is more interaction at the front end of the site, the main thing to note is to perform the editor content synchronization before triggering the form commit action. The general code pattern is as follows:

Synchronize the content and commit when the submission condition is met, where editor is an instance of the compiler (Editor.hascontent ()) {//Here is a non-empty example editor.sync ();  Sync content someform.submit (); Submit Form}

Here editor is an instance object of the compiler.

Scenario Three: The editor is not in any form, and the commit action is triggered by an external event.

This scenario is not used much, but may be required at special times. Ueditor also provides the corresponding processing scheme, the basic logic is the same as the scene two, but in the synchronous operation of the need to pass the ID of the submission form, such as Editor.sync (Myformid). Other same scene two.
2. Reading content from a database

<script type= "Text/plain" id= "editor" >//Extract the contents of the article from the database print here </script>

This uses the script tag as the Editor container object, and sets its type to be plain text, which avoids the execution of the inside of the tag and solves the extra transcoding problem that some students bring with the traditional textarea label as a container.

3. Editor content initialization (that is, setting rich text in the editor)

Write new articles, presets, greetings, and more in the editor.
Locate the Initialcontent parameter in the Editor_config.js file and set its value to the desired hint or greeting, such as initialcontent: ' Welcome to ueditor! '.

4. Image upload

If it is a new station, that is, the image path takes the path of the editor itself, no need to change, if the old station already has its own picture folder, you need to change the following files in the ueditor/php folder: