Baidu's UEditor is a rich text editor, style and functionality are a lot of good-looking, so use this editor in a project. Easy to use, it can be directly introduced, only expressions and file upload pictures where you need to configure it. Last year, an article expression there, here mainly talk about the pictures uploaded. Previously been uploaded to the telecommunications server, this year the company bought one in the server, to be cut in the past, the background is currently only provides a common interface to check the domain name, key, signature, the front end is upload method some in the official website of reference to achieve upload. But UEditor the pictures uploaded is written in his own inside, they are afraid to change, then change the problem, the second is afraid that he might later have to make changes, so increase the use of a custom upload function.
1.UEditor file image upload
There are many online articles about this, a consistent approach is to define an interface to aid the background uploading. Not repeat them here, you can directly search about, a lot of articles introduced, or the official website is also instructive. Mention here UEditor source, because the content below is to modify the source code.
Source code is very long, tens of thousands of lines, I also look at the main places glances. For example config.js disposed in the, in the instruction all.js UE.commands, executing instructions execCommand.
2. Upload a file inside
Here is a used in the OSS file system, official website demo, is based on the plupload. plupload also glances code, and then write two programs, one for direct use in a demo of making changes (need to rely plupload), a format is modeled plupload organization at the request upload (in certain parameters of the interface is carried out in accordance with so much dependent), so you do not need this definition. Format parameter form is substantially the following code
. 1 the let the params = { 2 // key - Your name + path . 3 'Key': the this .storageId, . 4 'Policy': the this .policy, . 5 'OSSAccessKeyId': the this .OSSAccessKeyId, . 6 'success_action_status': the this .success_action_status / / so that the server 200 returns, otherwise, the default will return 204 . 7 , 'Signature': the this .signature, . 8 File . 9 } 10 for (the let Key in the params) { . 11 fd.append(key, params[key]) 12 }
3.UEditor Custom Function
Ali uploaded to the cloud, the best way is to implement services to achieve, that is to say 1 inside interface. If the service support, you can not waste time here. I because there is no interface, just wrote it myself.
New features custom steps:
3.1 find an array of toolbars in ueditor.config.js in, and you need to add a new button function names in the array;
3.2 labelMap found in zh-cn.js and prompts you to add the key is the name of 3.1, primarily for the mouse to place up to display text prompt content, of course, you can add about the way the English file prompt;
3.3 Locate "btnCmds" in ueditor.all.js, and finally add your name on an array of function 3.1. At this point, a new icon has appeared on your pages, but now shows a B, which is the default button bold style;
3.4 Add ueditor.css the style of your button, modeled on other buttons, you can use pictures, you can also use the picture on the editor here use the same name to the top of;
3.5 ueditor.all.js UE.commands find a place to write together, easy to find, follow its format to write your own button events, here use the same name to the top of;
If your page is to use the full functionality that has been done here. If it is from (their choice), do not forget to add your name to this new definition.
All.js if they think too much, you can find some online sites compression compress. For example: https://tool.oschina.net/jscompress?type=3
Here it has been completed, if want to see the detailed code can leave a message or see my git:
Under https://github.com/MRlijiawei/demos/files/ueditor-custom&aliupload