Configuration and use of ueditor (separate pictures and file uploads)

ueditor Configuration and use I. Preparation

1. Download
Go to ueditor official website Download the latest version, divided into php,asp,jsp and. NET four versions, of course, you can download the full version, here to JSP as an example

http://ueditor.baidu.com/website/

2. Deployment
Directly copy the Ueditor directory to the project root, open the Ueditor/jsp/lib, and copy the jar package inside the Web-inf/lib directory
Note that there may be a version conflict with the original JAR package before you choose

3. Test
Use the following code to introduce the Ueditor.config.js and ueditor.all.js two files, initialize the text, or define a text field, and instantiate the editor. If you see a ueditor editor that indicates a successful deployment.

    <script id= "container" name= "content" type= "Text/plain" >
        here Write your initialization
    </script>
    <!--profile -->
    <script type= "Text/javascript" src= "Ueditor.config.js" ></script>
    <!--editor source code file-->
    <script type= "Text/javascript" src= "Ueditor.all.js" ></script>
    <!--instantiation Editor-->
    < Script type= "Text/javascript" >
        var UE = ue.geteditor (' container ');
    </script>

two. Basic use

The basic use of the document has been very clear, not the tired statement

See documentation for details: http://fex.baidu.com/ueditor/ three. Common usage configuration

1. Picture Upload configuration
Ueditor/jsp/config.json, here are some configuration information, if you want to use the image upload work need to do some configuration.

Here is the configuration of the access path to the picture, generally fill in the project name, such as/news
"Imageurlprefix": "",//Here is the picture of the configuration of the

storage path, recommended to the root directory folder, easy to manage, for example/ resource/image/, the following is the filename, this look at the source of the comments on the good
"Imagepathformat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{ Rand:6} ",

2. Adjust Editor Hierarchy
When using Easyui+ueditor, often click on the button but there is no window, this is because other Windows block the Ueditor window, you can adjust the editor level to solve, open ueditor/ueditor.config.js

Here is the adjustment editor level, the default is 990, change it to 9999
, zindex:9999,

3. Separate use of Ueditor image upload
Many times we only need to use the image upload function, this time can be configured
First Open uditor/dialogs/image/image.js, locate Editor.execcommand, make the following modifications

Editor.fireevent (' beforeinsertimage ', list), or add this sentence, otherwise cannot trigger event
Editor.execcommand (' insertimage ', list);

Then, build a demo.jsp, as follows

<!--omitted to introduce JS--> <input type= "text" id= "image" Name= "image" > <a href= "javascript:void (0)" onclick= " Upimage () "> Upload picture </a><br>  <!--define a new editor, but hide it , because only use the picture upload--> <textarea id= "uploadimage" ></textarea> <script type= "Text/javascript" > var _edit

    or = Ue.geteditor ("Uploadimage", {initialframewidth:800, initialframeheight:300,}); _editor.ready (function () {//The settings editor is not available (in fact, cannot be set ...)

        So comment out, shelf)//_editor.setdisabled ();

        Hide editor, because only use upload function _editor.hide (); Listen for picture upload _editor.addlistener (' beforeinsertimage ', function (t,arg) {///Assign picture address to input $ ("#image"). A
            TTR ("value", ARG[0].SRC);
        Assign the picture address to the IMG SRC, and implement the preview $ ("#showImage"). attr ("src", arg[0].src);
    });
    });
        Upload dialog Function upimage () {var myimage = _editor.getdialog ("Insertimage");
 Myimage.open ();   } </script> 

Here may be able to upload pictures can also be seen in the preview, but can not input can not get the image address, you can try

$ ("#image"). attr ("value", arg[0].src);//comment out the line
$ ("#image"). Val (arg[0].src);  Add this line .... Feel the same, but sometimes it can be solved

4. File upload using ueditor alone
First, in the Ueditor/dialogs/attachment/attachment.js, locate the Editor.execcommand and make the following modifications

Editor.fireevent (' Afterupfile ', fileslist);//Add this sentence
editor.execcommand (' insertfile ', list);

Then, create the demo.jsp, as follows

<!--omitted to introduce JS--> file: <input type= "text" id= "file"/> <a href= "Javascript:void" (0) ; "onclick=" upfiles (); > Upload file </a> <!--define a new editor, but will hide it because only file uploads--> <textarea id= "UploadFile" ></textarea> < Script type= "Text/javascript" > var _editor = ue.geteditor ("UploadFile", {initialframewidth:800, ini
    TIALFRAMEHEIGHT:300,}); _editor.ready (function () {//The settings editor is not available (in fact, cannot be set ...)
        So comment out, shelf)//_editor.setdisabled ();
        Hide the editor because it does not use this instance of the editor, so hide the _editor.hide (); Listen for file upload _editor.addlistener (' Afterupfile ', function (t, ARG) {$ ("#file"). attr ("value", _editor.optio
        Ns.filepath + Arg[0].url);
    })
    });
        Popup File Upload dialog box function upfiles () {var myfiles = _editor.getdialog ("attachment");
    Myfiles.open (); } </script> 

5. Use the online management function of Ueditor picture
Using a picture upload will know that Ueditor also has an online management function, you can see the upload of the picture list, but in fact this feature has a bug

Building