Recently, due to project requirements, a front-end text editing box is needed, with the function of real-time uploading of pictures. I compared several plug-ins online. First, it was Baidu's UEitor and found that the framework was too large. It was not what I wanted to see if a small framework introduced so many files; secondly, it was jQuery's easyUI. Although the personal version is free, the project belongs to the company's business, and it seems that it is not appropriate to use the commercial version of the framework. Considering that the front end of the project is mainly built on bootstrap, the bootstrap-wysiwyg plug-in was finally selected, which is very simple, lightweight and highly extensible.
It is very convenient to introduce bootstrap-wysiwyg and implement text editing function, but I noticed that image upload is implemented using fileapi. For most websites, although the user experience without uploading is very good with FileApi, when it is actually stored in the database, we still hope to store the static path of the image on the server rather than stringed images. In short, we need to make a little rewrite of bootstrap-wysiwyg (hereinafter referred to as WY).
First, let’s observe the image controls on the page. Skip the other controls and check the source code. It is easy to find the following code:
<div> <a id="pictureBtn"> <i></i></a> <input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" /></div>
Let's make an explanation. The data-role and data-target properties are predefined events in bootstrap. Here we can understand it as layout-related, without considering it. The key point is here. The third property data-edit, there is no such event in bootstrap. Observe bootstrap-wysiwyg.js, you can find some codes like this:
toolbar.find('input[type=file][data-' + options.commandRole + ']') .change( ... ...commandRole : 'edit',In other words, this property is actually implemented to facilitate selectors, which is equivalent to adding a listener event to the image button.
Let's continue to study the implementation of WY image preview. The first step is, as shown in the above code, the listener catches the change event of fileInput, responds, and calls the insertFiles function
restoreSelection();if (this.type === 'file' && this.files && this.files.length > 0) { insertFiles(this.files);}saveSelection(); his.value = '';Find insertFiles function
insertFiles = function (files) { editor.focus(); $.each(files, function (idx, fileInfo) { if (/^image///.test(fileInfo.type)) { $.when(readFileIntoDataUrl(fileInfo)).done(function (dataUrl) { execCommand('insertimage', dataUrl); }).fail(function (e) { options.fileUploadError("file-reader", e); }); } else { options.fileUploadError("unsupported-file-type", fileInfo.type); } }); }We noticed that it uses the $.Deferred() method of jQuery, first called a readFileIntoDataUrl method, and then successfully outputs the image to the text box through the self-encapsulated execCommand method. This picture is actually a <img> tag, but the src attribute is an image represented by a string. So what we need to do is actually upload the file after the listener is triggered, obtain the src of the picture, and then hand over the link to the subsequent execCommand method.
Since the author is not very familiar with Deferred, he still uses the more common callback mode
Observe the call method of ajaxFileUpload:
$.ajaxFileUpload({ url : ..., secureurl : false, fileElementId : ..., dataType : "json", success : function(obj) { ... }, error : function() { ... } });There are two required properties, url and fileElementId. To maintain the correctness of the dependency, it is not advisable to rewrite ajaxFileUpload. However, since the WY control is implemented by a listener, it is unrealistic to pass parameters through functions, so we need to define some properties for the input box ourselves to achieve our goal.
Add some properties in fileInput
<input type="file" id="pictureInput" name="picture" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" action="..." />
id is used as fileElementId, and the name attribute is also necessary, mainly for background value selection, action is the URL that the image needs to be submitted to.
Define a function in bootstrap-wysiwyg.js called uploadFileToServer, the function format is as follows:
var uploadFileToServer = function(id, action, callback) { $.ajaxFileUpload({ url : action, secureurl : false, fileElementId : id, dataType : 'json', success : function(obj) { if (obj.status) { callback(obj.imgsrc); } else options.fileUploadError("server-internal-exception", obj.message); }, error : function() { options.fileUploadError("upload-failure", ""); } });Rewrite the insertFiles method as follows:
insertFiles = function(files, id, action) { editor.focus(); $.each(files, function(idx, fileInfo) { if (/^image///.test(fileInfo.type)) { /* * $.when(readFileIntoDataUrl(fileInfo)).done(function(dataUrl) { * execCommand('insertimage', dataUrl); }).fail(function(e) { * options.fileUploadError("file-reader", e); }); */ uploadFileToServer(id, action, function(src) { execCommand('insertimage', src); }); } else { options.fileUploadError("unsupported-file-type", fileInfo.type); } });At the same time, make certain modifications to the listener to obtain the necessary attributes
toolbar.find('input[type=file][data-' + options.commandRole + ']') .change( function() { restoreSelection(); if (this.type === 'file' && this.files && this.files.length > 0) { insertFiles(this.files, $(this).attr('id'), $(this).attr('action')); } saveSelection(); this.value = ''; });Mainly, two parameter positions have been added.
In this way, the rewriting is complete. Note that to ensure that the correct execution is performed, please refer to ajaxFileUpload.js before the control.
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.