Baidu text editor Ueditor for net uses qiniu storage attachment implementation, text editor ueditor

Baidu text editor Ueditor for net uses qiniu storage attachment implementation, text editor ueditor

Baidu editor is powerful and easy to use. Unfortunately, attachments are stored locally. If there are a large number of users on the website, the website directory will become very large and files will not be easy to manage, qiniu cloud storage has made a lot of effort in Attachment storage, and it feels good to use it. If you change the attachment storage of ueditor to qiniu, it will solve the attachment storage problem of a large number of posts.

Download the new ueditor for net. decompress the package and copy the ueditor directory to the root directory of the mvc project directory.

Next, check/ueditor/net/app_code/uploadHandler. cs and find the code for saving the attachment below.

 try        {            if (!Directory.Exists(Path.GetDirectoryName(localPath)))            {                Directory.CreateDirectory(Path.GetDirectoryName(localPath));            }            File.WriteAllBytes(localPath, uploadFileBytes);            Result.Url = savePath;            Result.State = UploadState.Success;        }        catch (Exception e)        {            Result.State = UploadState.FileAccessError;            Result.ErrorMessage = e.Message;        }        finally        {            WriteResult();        }

In the code, we can see that the file is saved in localPath. Okay, start to modify it.

Try {if (! Directory. exists (Path. getDirectoryName (localPath) {Directory. createDirectory (Path. getDirectoryName (localPath);} // File. writeAllBytes (localPath, uploadFileBytes); // Result. url = savePath; # region <-- upload the Server File to qiniu --> OssService oss = new OssService (); Attachment attc = new Attachment (); fileInfo fi = new FileInfo (uploadFileName); attc. fileName = fi. name; attc. fileExt = fi. extension; attc. relationId = RelationId; attc. userName = OwnerName; attc. uploaddate = DateTime. now; attc. attachmentType = AttachmentType. goods; oss. putFileToQiniu (localPath, attc); # endregion Result. url = attc. fileUrl; Result. state = UploadState. success;} catch (Exception e) {Result. state = UploadState. fileAccessError; Result. errorMessage = e. message;} finally {WriteResult ();}

　　

OssService is a file control logic of qiniu cloud storage in my project. The specific code is too lazy to be posted, that is, reference qiniu.. net SDK, which saves files from the server to qiniu cloud. If you have used qiniu, you will know what is going on. Attachment is an Attachment object in my project. The processing logic is already included in OssService.

 

Careful friends may find that the OwnerName and RelationId variables are used in the Code. These two variables are the User Name of the current website user and the post Id associated with the attachment, but how can we get it here? In fact, ueditor has provided the extension method. Here I will briefly mention that you need to modify the uploadHandler constructor, as shown below:

public UploadHandler(HttpContext context, UploadConfig config)        : base(context)    {        this.UploadConfig = config;        RelationId = context.Request["RelationId"] != null ? context.Request["RelationId"].ToString() : "";        OwnerName = context.Request["OwnerName"] != null ? context.Request["OwnerName"].ToString() : "";        this.Result = new UploadResult() { State = UploadState.Unknown };    }

　

Then, modify the ueditor initialization code to pass these two variables in.

<Script id = "container" name = "content" type = "text/plain"> @ Html. Raw (Model. DescriptionDetail) </script> <! -- Configuration file --> <script type = "text/javascript" charset = "UTF-8" src = "~ /Ueditor. config. js "> </script> <! -- Editor source code file --> <script type = "text/javascript" charset = "UTF-8" src = "~ /Ueditor. all. js "> </script> <! -- Instantiate editor --> <script type = "text/javascript"> var ue = UE. getEditor ('Container'); ue. ready (function () {ue.exe cCommand ('serverparam', {'relationid': '@ Model. shopId ', 'ownername':' @ User. identity. name'}) ;}); </script>

In fact, ueditor has completed the Extended Interface for us. During ueditor initialization, We can configure these two variables as serverparam.

Now, I am satisfied with the normal operation. However, I found that the returned url is incorrect if a single file upload function is used in ueditor, the url is/ueditor/net/http: // xxxx... ", the original ueditor automatically added a prefix to the image url we returned, resulting in abnormal image editing. However, to solve this problem, find \ ueditor \ net \ config directly. json. Modify imageUrlPrefix from "/ueditor/net/".

 

Now the file upload is completed, and the Attachment List is down. Modify/ueditor/net/app_code/listHandler. cs and find this code

 1 try 2         { 3             var localPath = Server.MapPath(PathToList); 4             buildingList.AddRange(Directory.GetFiles(localPath, "*", SearchOption.AllDirectories) 5                 .Where(x => SearchExtensions.Contains(Path.GetExtension(x).ToLower())) 6                 .Select(x => PathToList + x.Substring(localPath.Length).Replace("\\", "/"))); 7             Total = buildingList.Count; 8             FileList = buildingList.OrderBy(x => x).Skip(Start).Take(Size).ToArray(); 9             10         }

 

 1 try 2         { 3             //var localPath = Server.MapPath(PathToList); 4             //buildingList.AddRange(Directory.GetFiles(localPath, "*", SearchOption.AllDirectories) 5             //    .Where(x => SearchExtensions.Contains(Path.GetExtension(x).ToLower())) 6             //    .Select(x => PathToList + x.Substring(localPath.Length).Replace("\\", "/"))); 7             //Total = buildingList.Count; 8             //FileList = buildingList.OrderBy(x => x).Skip(Start).Take(Size).ToArray(); 9             OssService oss = new OssService();10             Total = oss.GetShopFilesCount(SearchExtensions, RelationId);11             FileList = oss.GetShopFiles(SearchExtensions, RelationId, Start, Size).ToArray();12         }

Okay, everything is okay. You can still use it now. The only unpleasant thing is that the ueditor upload attachment management window does not have the function to delete attachments. It's disgusting. Please change it if you have time.

How can Baidu's Ueditor Rich Text Editor extract only uploaded attachments or images in net?

This should be done by changing the JS or adjustment mode. Let's talk about the adjustment mode. Now there are two modes in the online editor, one is FULL and the other is SIMPLE, it is recommended that you paste it to the software's API specification. You must have answers in this regard.

How Does Baidu ueditor add two rich-text editors to a page? The first editor is not displayed when two rich-text editors are displayed in ie6 and 7.

Different IDs are used for loading.