Baidu Ueditor Editor Use tutorial and use Method (text) _ Page Editor

Source: Internet
Author: User
Tags file upload save file

We are doing the site, the website background system will generally use the Web editor, today I recommend a Baidu Ueditor editor. About this Baidu Ueditor editor of the Internet also has a simple tutorial, but looked more laborious, today I share with you Baidu Ueditor editor use tutorials and use methods, hope to help.

First: Baidu Ueditor Editor's official download address

Ueditor Official Address: http://ueditor.baidu.com/website/index.html

Development Document Address: http://ueditor.baidu.com/website/document.html

Download Address: http://ueditor.baidu.com/website/download.html (here Optional development version, or mini version)

Second: Baidu Ueditor editor Function version selection

When we enter the Baidu Ueditor edit organ dot click to download the option, we found a total of two versions for our choice, one is Ubuilder, one is the development version, through the comments below the red small print we can understand the Ubuilder and development version of the difference. In general, we choose the Ubuilder version.

Unlike the way we downloaded software in the past, Ueditor uses selective downloads. The first is the choice of visible features, a total of basic, insert, format, form four groups, each group below have a number of function buttons, we can according to their own needs to choose, if you double-click the four groups that all select the group button. If you are not satisfied with the selected button, you can also click on the empty option, and one thing to suggest is that if you click on the empty selection, you will be clear of all the choices you have made.

Next is the hidden function, language, server-side version of the selection, hidden features by default are all selected, if not necessary or not to change to good. Language options are divided into Chinese and English, the default is to download only the Chinese Language pack, if you need to use English words can be added to the English bag. The service side version currently offers three kinds of php,.net,jsp, respectively, we can click to download the resource bundle after the selection is complete.

Third: Baidu Ueditor editor of the configuration method tips

1, from the official network to 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 backend versions you choose, this will be different here, where we choose PHP

Third-party: Third-party plug-ins (including code highlighting, source editing and other components)

Packaged files for all files in the EDITOR_ALL.JS:_SRC directory (for release versions)

Editor_api.js:API Interface configuration file (development version)

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

2, the editor of the instantiation page, import editor required three portal files, sample code is as follows:

<script type= "Text/javascript" charset= utf-8 "src=". /umeditor.config.js "></script>

<!--use version-->

<!--<script type= "Text/javascript" charset= utf-8 "src=". /umeditor.all.js "></script>-->

<!--Development edition-->

<script type= "Text/javascript" charset= "Utf-8" src= "Editor_api.js" ></script>

<script type= "Text/javascript" src= ". /lang/zh-cn/zh-cn.js "></script>

3, and then create an editor instance and its Dom container in the editor's instantiation page, sample 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>

4, in editor_config.js find URL variable configuration Editor in your project path.

Official Website Example:

Absolute path configuration in this manner is strongly recommended

Url= window. ueditor_home_url| | " /uetest/ueditor/";

My configuration:

(function () {

/**

* Editor resource file root path. 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.

* "Relative to the site root" is a path such as "/myproject/umeditor/" that begins with a slash.

* 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 URL here may not apply to each page editor.

* Therefore, Ueditor provides the root path that can be configured separately for different page editors, 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. Umeditor_home_url = "/xxxx/xxxx/";
* * 
/**
* @author wusuopubupt
* @date 2013-10-24 * * 
* Set window. Umeditor_home_url = "/ueditor/";
* 
* * * */ 
window. Umeditor_home_url = "/ueditor/"; Attention is here! 
var URL = window. Umeditor_home_url | | (function () { 

5, if the use of editor_api.js (that is, not editor.all.js) development, open the Editor_api.js, the code is as follows

/** * Development version of the file import/(function () {var paths = [' editor.js ', ' core/browser.js ', ' core/utils.js ', ' core/eventbase.js ' 
, ' core/dtd.js ', ' core/domutils.js ', ' core/range.js ', ' core/selection.js ', ' core/editor.js ', ' core/filterword.js ', ' Core/node.js ', ' core/htmlparser.js ', ' core/filternode.js ', ' plugins/inserthtml.js ', ' plugins/image.js ', ' plugins/ Justify.js ', ' plugins/font.js ', ' plugins/link.js ', ' plugins/print.js ', ' plugins/paragraph.js ', ' plugins/ Horizontal.js ', ' plugins/cleardoc.js ', ' plugins/undo.js ', ' plugins/paste.js ', ' plugins/list.js ', ' plugins/source.js 
', ' plugins/enterkey.js ', ' plugins/preview.js ', ' plugins/basestyle.js ', ' plugins/video.js ', ' plugins/selectall.js ', ' Plugins/removeformat.js ', ' plugins/keystrokes.js ', ' plugins/dropfile.js ', ' ui/widget.js ', ' ui/button.js ', ' Ui/tool Bar.js ', ' ui/menu.js ', ' ui/dropmenu.js ', ' ui/splitbutton.js ', ' ui/colorsplitbutton.js ', ' ui/popup.js ', ' ui/scale.js ' 
, ' ui/colorpicker.js ', ' ui/combobox.js ',' Ui/buttoncombobox.js ', ' ui/modal.js ', ' ui/tooltip.js ', ' ui/tab.js ', ' ui/separator.js ', ' ui/scale.js ', ' Adapter/adap Ter.js ', ' adapter/button.js ', ' adapter/fullscreen.js ', ' adapter/dialog.js ', ' adapter/popup.js ', ' Adapter/imagescale . js ', ' adapter/autofloat.js ', ' adapter/source.js ', ' adapter/combobox.js '],/** * @author wusuopubupt * @date 2013-10 
-24 * * Modified BaseURL = '/ueditor/src/'; 
* * BaseURL = '/ueditor/src/'; for (var i=0,pi;pi = paths[i++];) 
{document.write (' <script type= ' text/javascript "src=" ' + baseurl + pi + ' "></script> '); 
 } 
})();

Can see, here is a: BaseURL, is JS file routing, here to ueditor_api.js file according to the actual path to configure!

6, File Upload problem:

Open Ueditor.config.js, you can see the following configuration:

Picture Upload Configuration Area

, imageurl:url+ "php/imageup.php"//Photo Upload submit Address

, Imagepath:url + "php/"//Picture correction address, referenced fixedimagepath, if special needs, can be configured

, ImagePath: "http://test.mathandcs.com/"

, Imagefieldname: "Upfile"//Picture Data key, if modified here, need to modify the corresponding parameter in the background corresponding file

The ImageUrl here is the address of the PHP file called by the picture upload, while ImagePath is the host part of the picture address generated for the newly uploaded picture;

Then open the ueditor/php/under the imageup.php file, there are configuration as follows:

$config = Array ( 
"Savepath" => "/var/www/store/upload/",//Storage folder 
"MaxSize" => 1000,//maximum allowable file size, per kb 
"Allowfiles" => Array (". gif", ". png", ". png", ". jpeg", ". bmp")//allowed file format 
); 
Upload file directory 
//$Path = "upload/"; 

Here you need to upload files to the server's destination address (upload file Save file) Savepath modified to your specified file address.

Due to the relative path and the absolute path of the problem, the generated address may be wrong, at this point will be hack to generate a picture URL js file:

Modified in Ueditor/dialogs/image/image.js:

/**

* @author Wusuopubupt

* @date 2013-10-24

* @return URL Modified

* */

var reg =/\/var\/www\/test\/upload\//;

url = url.replace (Reg, "");

var $img = $ (" '),

$item = $ ("<div class= ' Edui-image-item edui-image-upload-item ' ><div class= ' edui-image-close ' ></div") ></div> "). Append ($img);

The regular rules here will be based on the specific circumstances!

At this point, Ueditor is configured to succeed in my environment.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.