Baidu Ueditor Editor Use tutorial and how to use

When we do the site, the site backend system will generally use the Web editor, today I would like to recommend a Baidu Ueditor editor. About this Baidu Ueditor editor organ Online also has a simple tutorial, but look at more laborious, today I share with you the Baidu Ueditor editor use the tutorial and use method, hope to help you.

First: Baidu Ueditor Editor's official

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

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

: http://ueditor.baidu.com/website/download.html (optional development, or mini version)

Second: Baidu Ueditor Editor's feature version selection

When we entered the Baidu Ueditor editor organ Click Download option, we found a total of two versions for our choice, one is the Ubuilder, one is the development version, through the following note of the Red small print we can learn the difference between Ubuilder and development version. In general, we choose the Ubuilder version.

Unlike the way we used to download software, Ueditor uses selective downloads. First of all, the selection of visible features, common Basic, INSERT, format, table four groups, each group below have a number of function buttons, we can choose according to their own needs, if double-click the four groups is the selection of the group button. If you are not satisfied with the selected button, you can click to clear the selection, one thing to note is that if you click the empty selection will clear out all the choices you have made.

Then is the hidden function, language, server version of the selection, the hidden feature is the default is select all, 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, you can add the English bag. Server version currently provides three kinds, respectively, php,.net,jsp, after the selection we can click to download the resource pack.

Third: Baidu Ueditor Editor Configuration Method tips

1, download the full source package from the official website, extract to any directory, the source directory structure after decompression is as follows:

_examples: Example page for editor full version

Dialogs: Popup dialog for the corresponding resources and JS file

Themes: Style picture and style file php/jsp/.net: Background files related to server-side operations, depending on the different background version you choose, here will be different, here we choose PHP

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

Package files for all files in the EDITOR_ALL.JS:_SRC directory (for release version)

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

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

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

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

<!--Use--

<!--<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. Then create the editor instance and its Dom container in the instantiation page of the editor, the sample code is as follows:

<textarea name= "Background value of key" Id= "Myeditor" > here 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, look for the path to the URL variable configuration Editor in your project.

Official Website Example:

Absolute path configuration is highly recommended in this way

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

My configuration:

(function () {

/**

* Editor resource file root path. It means: Instantiate the page as the current path with the editor, and point to the path to the editor resource file (that is, the dialog folder).

* In view of the various path problems that many students have when they use the editor, it is strongly recommended to use the relative path relative to the root of the Web site to configure.

* "Relative path relative to site root" is a path that starts with a slash, such as "/myproject/umeditor/".

* If there are multiple pages in the site that are not at the same level that require an instantiation editor, and the same ueditor is referenced, the URLs here may not be available for each page's editor.

* As a result, Ueditor provides a root path that can be individually configured for different pages of the editor, specifically, at the top of the page that needs to instantiate the editor to write the following code. 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 () {

function Pathstack () {

5, if using editor_api.js (that is, do not editor.all.js) development, open 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/toolbar.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/adapter.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 an item: BaseURL, is the 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:

Image upload Configuration Area

, imageurl:url+ "php/imageup.php"//image upload submission Address

, Imagepath:url + "php/"//image correction address, reference to Fixedimagepath, if there are special needs, can be self-configuring

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

, Imagefieldname: "Upfile"//image Data key, if modified here, you need to modify the corresponding parameters in the background file

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

Then open the imageup.php file under ueditor/php/, which is configured as follows:

$config = Array (

"Savepath" = "/var/www/store/upload/",//Storage folder

"MaxSize" = 1000,//maximum allowable file size, in kilobytes

"Allowfiles" = = Array (". gif", ". png", ". jpg", ". jpeg", ". bmp")//allowed file formats

);

Upload file directory

$Path = "upload/";

$Path = "/var/www/store/upload/";

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

Because of the relative path and the absolute path of the problem, the generated address may be wrong, then you need to hack the image URL to generate the 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 are set according to the specific situation!

At this point, Ueditor was successfully configured in my environment.

Baidu Ueditor Editor Use tutorial and how to use