Baidu Rich Text editor Ueditor use summary

Recent projects have been used to ueditor this stuff, but some of his configuration documents are hard to understand for the first time user, pretending to be a summary

1.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)

2. Download the complete source package from the official web, extract to any directory, the source directory structure after decompression is 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

3. The editor's instantiation page, the import editor needs three portal files, the 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 version-->
    <script type=" Text/javascript "charset=" Utf-8 "src=" editor_api.js "></script> <script type=" Text/javascript "src="
    . /lang/zh-cn/zh-cn.js "></script>

4. Then create an editor instance and its Dom container in the editor's instantiation page, with the sample code as follows:

<textarea name= "Background value key" id= "Myeditor" > Write your initialization content </textarea>
<script type= "Text/javascript" here >
    var editor = new UE.ui.Editor ();
    Editor.render ("Myeditor");
    1.2.4 can later use the Code instantiation Editor
    //ue.geteditor (' myeditor ')
</script>

5. Find the path to the URL variable configuration Editor in your project in Editor_config.js.

Official Website Example:

Absolute path Configuration url= window is strongly recommended in this manner
. 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 () {

        function pathstack () {

6. If you use Editor_api.js (that is, not editor.all.js), 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/li
            Nk.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/b
          Asestyle.js ',  ' Plugins/video.js ', ' plugins/selectall.js ', ' plugins/removeformat.js ', ' Plugins/keys Trokes.js ', ' plugins/dropfile.js ', ' ui/widget.js ', ' ui/button.js ', ' Ui/too Lbar.js ', ' ui/menu.js ', ' ui/dropmenu.js ', ' ui/splitbutton.js ', ' UI/COLORSP Litbutton.js ', ' ui/popup.js ', ' ui/scale.js ', ' ui/colorpicker.js ', ' Ui/comb Obox.js ', ' ui/buttoncombobox.js ', ' ui/modal.js ', ' ui/tooltip.js ', ' Ui/tab. JS ', ' ui/separator.js ', ' ui/scale.js ', ' adapter/adapter.js ', ' Adapter/butt
            On.js ', ' adapter/fullscreen.js ', ' adapter/dialog.js ', ' adapter/popup.js ', ' Adapter/imagescale.js ', ' adapter/autofloat.js ', ' adapter/source.js ', ' Adapter/combobo
       X.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> ');
 }
})();

You can see, here is a: BaseURL, is a JS file routing, here to the Ueditor_api.js file according to the actual path to configure.

7. File Upload question:

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 fixup address, Reference to Fixedimagepath, if special needs, can be configured
        , ImagePath: "http://test.mathandcs.com/"
        , Imagefieldname: "Upfile"                   // The key of picture data, if revise here, need to revise 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", ". jpg", ". jpeg", ". bmp")  //allowed file format
    );
    Upload file directory
    //$Path = "upload/";
    $Path = "/var/www/store/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 specific circumstances.

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

For more detailed documentation please refer to Ueditor website doc:http://ueditor.baidu.com/website/document.html