Multiboot in wysiwyg editor

The essence of this is that there is an editor (for example: imperavi.com/redactor ) and there is a need to upload many pictures at once. Ideally, a simple drag and drop, but in our case, the editor eats only one picture at a time. It needs to be corrected.

Rummaging through the api editor and not finding anything about multiboot, I began to think how to solve this problem without resorting to some kind of global development, like writing a plugin from scratch. It will take a lot of time and effort, besides it is pressing up and you need to do it until the evening.

Then we do it differently, remembering the already ready plugin github.com/LPology/Simple-Ajax-Uploader for multi-loading with the thought that we give the pictures to the multi-loader and then write them to the editor. No sooner said than done.
')
We include all the necessary files and initialize the editor.

$('.text').redactor(); 

We also initialize the Simple Ajax Uploader.

 new ss.SimpleUpload({ dropzone: 'dragbox', url: 'upload/path', name: 'file', multiple: true, responseType: 'json', onComplete: function(filename, response) { $('.redactor-editor').append('<p><img src="'+ filename +'" /></p>'); } }); 

So, what we want, we specified the class for the drop zone ( dropzone: 'dragbox' ) and, of course, designated this place in our html code.

 <div class="dragbox">   + (  ) </div> 

Here we will throw photos by dragging. After that, we wrote to the callback function, that when the download is complete, we want to insert the image at the end of the editor.

 onComplete: function(filename, response) { $('.redactor-editor').append('<p><img src="'+ filename +'" /></p>'); } 

On the server we take their ready library and we connect (an example from the documentation).

 require('Uploader.php'); $upload_dir = '/img_uploads/'; $valid_extensions = array('gif', 'png', 'jpeg', 'jpg'); $Upload = new FileUpload('file'); $result = $Upload->handleUpload($upload_dir, $valid_extensions); if (!$result) { echo json_encode(array('success' => false, 'msg' => $Upload->getErrorMsg())); } else { echo json_encode(array('success' => true, 'file' => $Upload->getFileName())); } 

Images are regularly uploaded to the server and the paths come back, but there was a problem with the editor, it does not accept our html code, constantly clearing it. In addition, in this way we can not control the place of loading images.

Again, go back to the api editor and look for how you can directly influence its contents through api. It turns out we can, because find the method we need imperavi.com/redactor/docs/api/insert . Rewrite the callback code to insert images.

First of all, we need to provide an internal link to the editor in order to have access to its api. To do this, we declare a variable in the field of view of both of them.

 var redactor; 

After that, we place an internal link to the editor in this variable using the callback that is executed when the editor is initialized.

 $('.text').redactor({ initCallback: function(){ redactor = this; } }); 

Ultimately, using the insert method now available to us, we insert the images into the editor.

 onComplete: function(filename, response) { redactor.insert.html('<p><img src="'+response.path+'" /></p>'); } 

According to the results, we drag the images into the dragbox field, after which the server processes and returns the path that is successfully inserted into the editor when the download of each image is finished.