Draft article was written three years ago, recently re-edited, and further improve the supplement made.
1, UEditor basic introduction
1.1, about UEditor
UEditor was developed by Baidu web front-end R & D department WYSIWYG rich text web editor with lightweight, customizable, focusing on user experience and other characteristics, based on open source MIT license that allows free use and modify the code.
Above this sentence from UEditor official. In my opinion, UEditor core feature: produced giant, free open source, full-featured (quite full), the experience is more in line with Chinese habits. UEditor For more information, refer to the following links:
In addition, UEditor official also offers a Mini version, called UMeditor . Said that in order to meet our portal for simple post box, or reply box demand customized version. The main points of improvement in the failure rate of loading and loading speed, and also slightly different function UEditor specific reference GitHub UMeditor of .
1.2, UEditor status quo
The latest version UEditor is v1.4.3.3, the latest version UMEditor is v1.2.3. The last release in the second half of 2016, almost three years have not been updated. But also have some of the basic functions, and the community is also more recognized and respected, many people or organizations have provided improved version features or enhancements, the official also occasionally follow.
On the whole, currently in the country to do relatively complex information dissemination or message function, UEditor / UMEditor is still one of the best choice.
2, UEditor simple to use
2.1, will be integrated into the project source UEditor
If you want to integrate the backend UEditor project, then download the source language version of the correspondence, copied to the project after decompression can. Two things to note:
- 1, only the official PHP, ASP, ASP.NET, JSP four versions, someone in the community to provide a version Note.js, Python and other languages.
- 2, all the back-end code are provided only official said DEMO role must not be used directly in the production environment. In all fairness, ASP.NET version of the back-end code to write really water, but can write these front-end back-end code has been very cattle breaking, I was used to that part of the code was changed again from beginning to end production use environment.
If you want to integrate the front UEditor project, then look at your pictures or need to upload the back-end functionality. If not, then the copy directly to the front end of the project can be. But if necessary, it would have to ensure that the back-end code to run front-end Web server can resolve the corresponding.
Of course, if you put UEditor deployed separately to support a back-end Web server it is also possible. In addition, the method integrates UMeditor with integrated UEditor exactly the same way.
2.2, let UEditor of UI rendering the page
1, first of all, the need to introduce UEditor 3 js file in the page, for example:
<!-- 编辑器的配置文件，前端配置都在这个文件中，注释十分丰富 -->
<script type="text/javascript" charset="utf-8" src="/ueditor-1.4.3/ueditor.config.js"></script>
<!-- 编辑器的源码文件 -->
<script type="text/javascript" charset="utf-8" src="/ueditor-1.4.3/ueditor.all.min.js"></script>
<!-- 编辑器的中文语言包 -->
<script type="text/javascript" charset="utf-8" src="/ueditor-1.4.3/lang/zh-cn/zh-cn.js"></script>2, then, where required rendering the page placed below UEditor "placeholder" Code (ID number to note, the next use):
<!-- 编辑器的容器 -->
<script id="editor" type="text/plain" style="width:800px; height:300px;"></script>3, finally, to get an editor instance by instantiating the editor's code (UI will be presented when the page is up and running):
$(function () {
var ue = UE.getEditor("editor"); // 创建编辑器实例（这里的 editor 就是上一步中的 ID）
});After obtaining the editor instance of the object, which can be invoked through the API UEditor it. What are the specific API is available, see UEditor API .
2.3, with two pit encountered in the process UEditor
1, a pit, get the content can be provided content is error .
I used to getContentget the contents of the editor and stored in the database, and then save the contents of the database with the setContentassigned editor. The results found that running can save storage, and open the Edit pages directly on the error, the editor did not show up.
Later found this is because the editor was not ready, so we can not be assigned, just need to put assignment readycan, after the sample code below:
ue.addListener("ready", function () {
ue.setContent("@Model.Content"); // 等编辑器准备好之后再赋值，否则报错
});In order to write this article, I tried to reproduce the error, the editor and the results show up, but will still be an error, the error message is "Uncaught TypeError: Can not set property 'innerHTML' of undefined".
To some extent, this problem is not considered a pit. Because the official manuals have instructions and recommendations - "the operation of the editor's best to do after the editor ready", but my people are particularly afraid of trouble, who can guesswork would be reluctant to get a closer look of the document, so the first time and lost by the pit.
2, pits two, displayed in the editor is in HTML, rather than text .
And initially doubtful whether this will be UEditor the Bug, until after this issue is resolved, in turn, want only to find there is actually a hidden easily overlooked "common sense", that is, the page template engine usually coded character string, for example, I have used the WebForms, NVelocity and RazorEngine like this.
In other words, this is the time to get the editor after HTML coding, that is to say as long as we can ensure that the editor got the HTML code before the line. Of course, first I did not expect was for this reason, so my solution was to try out the experience of other editors have used, that is, directly to the content on scriptthe label, the sample code is as follows:
<script id="editor" type="text/plain" style="width:800px;height:300px;">
@WebTools.RazorHelper.Raw(Model.Segment.Note)
</script>I realized the problem was the initiator of the page template engine instead UEditor, I made the following tests:
ue.addListener("ready", function () {
editor.setContent("@WebTools.RazorHelper.Raw(Model.Segment.Note)");
});Really is OK, this is further evidence that my guess was right!
2.4, the UEditor pictures uploaded to the cloud server
Since UEditor default upload images to a subfolder under the web root folder, if it is within the enterprise information systems, doing okay, but if the project is the Internet, a practice it is neither safe, nor economy, the best or uploaded to the cloud server.
Should UEditor pictures uploaded to the cloud server, only need to modify the logic to upload the back-end code. I have done with ASP.NET to UEditor 1.4.3 to upload pictures they shoot USS cloud and the UMeditor 1.2.2 pictures uploaded to Ali cloud OSS , in fact, the idea is the same.
UEditor core ASP.NET upload logic UploadHandlerclass Processmethod, upload pictures to a local portion of the code can be replaced with the following sample code.
try {
// 校验文件类型、文件大小等......
String fileMd5 = StringSecurity.GetMd5(uploadFileBytes); // 用文件的 MD5 值做文件名
String fileName = fileMd5 + Path.GetExtension(uploadFileName);
String filePath = $"/images/{DateTime.Now.ToString("yyMMdd")}/{fileName}";
// 调用又拍云的 SDK 来上传文件
UpYun upyun = new UpYun("bucketname", "username", "password");
upyun.setContentMD5(fileMd5);
bool upyunResult = upyun.writeFile(filePath, uploadFileBytes, true);
// ......
} catch (Exception e) {
logger.Error("文件上传失败！", e);
// ......
}UMeditor core ASP.NET upload logic Uploaderclass upFilemethod, upload pictures to a local portion of the code can be replaced with the following sample code.
try {
// 校验文件类型、文件大小等......
String fileName = $"{GuidHelper.LowerPureString}.{getFileExt()}";
String filePath = $"images/{DateTime.Now.ToString("yyMMdd")}/{fileName}";
// 调用阿里云的 SDK 来上传文件
var client = new OssClient(SrcPoint, AccessKeyId, AccessKeySecret,
new Aliyun.OSS.Common.ClientConfiguration() { IsCname = true });
var putResult = client.PutObject(SrcBucket, filePath, uploadFile.InputStream);
// ......
var uri = client.GeneratePresignedUri(SrcBucket, filePath);
URL = uri.GetLeftPart(UriPartial.Path); // 将文件路径赋值给编辑器引用的变量
} catch (Exception e) {
logger.Error("文件上传失败！", e);
// ......
}When might you see this article, we shoot and Ali cloud cloud cloud storage SDK has done a major change, here accompanied by GitHub link between the two:
3, Web Editor-talk
3.1, the twists and turns and I UEditor
In early 2016, I based learning purposes, amateur made the site with a news release function. Prior to this, I have used the FreeTextBox and FCKeditor (has been renamed CKEditor) , are pretty good impression, but also have this or that problem, such as problems in CKEditor space becomes a question mark .
I go online to search, I discovered that the evaluation of UEditor pretty good, and decided to use UEditor Web editor, because it is the first time, the process is relatively tortuous. After doing the news release function, it records a moment in passing, that the first draft of this article.
Media sites Two years later, that is, last year, the company should be with information dissemination function, at my suggestion, final selection of the UMeditor. But the whole team did not used except me, especially that several front-end, even the rich text editor is consequently do not know, finally I am responsible to lead this child to do the front-end functions.
Because this is the actual doing of the project, the company's editors are using, UI framework background has become React version of Ant Design by the jQuery version EasyUI, so the details will be more problems. In which various configurations and back-end transformation of the editor, are unified by me talk to solve front-end docking.
In another year, which is the beginning of this month, I once again saw the first draft of this article at the time of collating information. I instantly remembered last year with UMeditor process also done some recording, then think twice simply to record integrate, how can not find the results of last year's record, I had to give up. Perhaps remained in that company's computer now!
3.2, the space becomes a question mark CKEditor reasons and solutions
Root cause investigation, leading to the problem is the data conversion. There are in UTF-8 in a special coding 0xC2 0xA0, converted into characters when expressed as a space, like an ordinary half-size space, except that its width is not compressed, so it is often used for web publishing. In GB2312, Unicode character set but not the other encoding, if so easily transcoding, this code will be replaced with a question mark.
After a few years ago in the actual project also encountered a more wonderful situation, save an article, the content of the question mark on the whole gone. Later found someone else has encountered a problem space becomes a question mark, but the wrong solution, he is directly to the question mark and replace the ballots, the results of a normal question mark also banning federal funding.
The correct approach is, replace it with UTF-8 encoding format to replace the special space for the common spaces, if it is an HTML string, it is replaced . Example C # code replacement HTML string as follows:
byte[] space = new byte[]{0xc2,0xa0};
string utfSpace = Encoding.GetEncoding("UTF-8").GetString(space);
htmlStr = htmlStr.Replace(utfSpace," ");Note: The conversion can not be encoded before the replacement, we must continue to use UTF-8 encoding. If you have been converted into other codes, it completely hopeless, because at that point there is no difference between the normal and the wrong question mark question mark.
This link : http://www.cnblogs.com/hanzongze/p/js-ueditor.html
Copyright Notice : This article blog blogger garden Hanzong Ze original author retains authorship! Welcomed the adoption reprint, deduction or other mode of transmission to use this article, but must give the author bylines and links in the apparent position of the paper! Personal blog, limited capacity, if inappropriate, please criticism and thank you!