Detailed introduction to how to install and use php UEditor Baidu editor

This article mainly introduces UEditor BaiduEditorInstallationShare with the usage method. Friends who need it can refer to the following

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

_examples: Example page of the full version of the editor
_demos: Various use cases of the editor
dialogs: Resources and JS corresponding to the pop-up dialog box File
themes: stylepictureand style file
server: PHP, JSP and other files involved in server-side operations
third-party: third-party plug-in
editor_all.js: The packaged file of all files in the _src directory
editor_all_min.js: The compressed version of the editor_all.js file, it is recommended to be used only in formal deployment
editor_config.js: The configuration of the editor File , it is recommended to place it in the same directory as the editor instantiation page

2. Steps to deploy UEditor to the actual project (UETest):

Step one: Create a directory for storing UEditor-related resources and files in any folder of the project. Create it here in the root directory of the project and name it
. Step 2: Copy the dialogs, themes, third-party, editor_all.js and editor_config.js in the source code package to the ueditor folder. The rest of the files except the ueditor directory are specific project files, and only the ones listed here are. For example.
Step 3: For simplicity, the index.php page in the root directory will be used as the instantiation page of the editor to show the full version of UEditor. In the index.php 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>编辑器完整版实例</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" >

Step 4: Then create the editor instance and its DOM container in the index.php file. An example is as follows:

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

The last step: add the following code at the top of the editor instance:

<script type="text/javascript">
 window.UEDITOR_HOME_URL=&#39;ueditor/&#39;;//此为ueditor相对于实例页面的路径
</script>

The above is a relative path, you can also use an absolute path relative to the website root directory , such as:

<script type="text/javascript">
 window.UEDITOR_HOME_URL=&#39;/uc/ueditor/&#39;;//此为ueditor相对于网站根目录的路径
</script>

It is recommended to use the absolute path relative to the root directory of the website.
At this point, a complete editor instance has been deployed to our project!

The last step can also be achieved by modifying the following places (not recommended for people who do not understand js):
Look for "URL= window.UEDITOR_HOME_URL||" in /UETest/ueditor/ editor_config.js And modify it to the corresponding path. Of course, if you modify it here, window.UEDITOR_HOME_URL does not need to be set on the instance page.

//强烈推荐以这种方式进行绝对路径配置
URL= window.UEDITOR_HOME_URL||"/UETest/ueditor/";

3. Specific use

1. Submit the editor content to the backend
Scenario 1: Submission exists in the Form where the editor is located Button, the submission action is completed by clicking this button.
This scenario is suitable for the most common occasions. There are no big problems to pay attention to. There are only three points to note:
1) By default, the name of the form submitted to the background is "editorValue", in editor_config.js It can be configured in, and the parameter name is textarea.
2) You can set the name attribute on the container tag (i.e. script tag) to override the default configuration in editor_config.js. The example code is as follows. MyContent here will become the new submission form name:

<form action="" method="post">
 <script type="text/plain" id="editor" name="myContent">
 </script>
 <input type="submit" name="submit" value="提交">
</form>

3) The back-end receiver program can obtain the rich text content in the editor in the following ways.

//PHP获取：
$_POST["myContent"]
   
//JSP获取：
request.getParameter("myContent");
   
//ASP获取：
request("myContent");
   
//NET获取:
context.Request.Form["myContent"];

Scenario 2: There is no submit button in the Form where the editor is located, and the submission action is triggered by an external event.
This scenario is suitable for situations where there is a lot of front-end interaction on the site. The main thing to pay attention to is to perform the editor content synchronization operation before triggering the form submission action. The general code pattern is as follows:

//满足提交条件时同步内容并提交，此处editor为编辑器实例
if(editor.hasContent()){ //此处以非空为例
 editor.sync();  //同步内容
 someForm.submit(); //提交Form
}

Here editor is the editor instanceobject.

Scenario 3: The editor is not in any Form, and the submission action is triggered by external events.

This scenario is not used much, but it may be needed in special circumstances. UEditor also provides corresponding processing solutions. The basic logic is the same as scenario 2, except that when performing synchronization operations, you need to pass in the id of the submitted form, such as editor.sync(myFormID). Others are the same as scene 2.
2. Read content from the database

<script type="text/plain" id="editor">
 //从数据库中取出文章内容打印到此处
</script>

Here the script tag is used as the editor container object, and its type is set to plain text, thus avoiding the execution of JS code inside the tag and solving the problem at the same time This solves an additional transcoding problem caused by some students using traditional textarea tags as containers.

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

Write a new article, and preset prompts, greetings and other content in the editor.
Find the initialContent parameter in the editor_config.js file and set its value to the required prompt or greeting, such as initialContent:'Welcome to UEditor!'.

4. Image upload

If it is a new site, that is to say, if the image path uses the editor's own path, there is no need to change it. If the old site already has its own image folder The following files in the ueditor/php folder need to be changed:

The above is the detailed content of Detailed introduction to how to install and use php UEditor Baidu editor. For more information, please follow other related articles on the PHP Chinese website!