The reason for using summernote as a rich text editor is because it is lightweight, and it is easy to make summernote plugins by yourself. I don't like the image uploading function that comes with summernote. I want to make a plugin for image uploading myself, and finally choose webuploader as the basic uploading component.
Let's take a look at the image upload function that comes with summernote, it's really simple.
The image upload function plugin that integrates webuploader into summernote is as shown below.
A tick icon is displayed, indicating that the image has been successfully uploaded to the server.
The code used by webuploader in summernote is as follows.
The above webuploader upload function is used in the summernote rich text editor. Let's transform the official demo example of webuploader and encapsulate it into a separate jquery plugin for use.
Use the code as follows
The usePaste and images parameters are specially made here . usePaste represents whether to enable the screenshot paste function of webuploader, because when there are multiple instances of webuploader on a page, pasting the screenshot will cause all instances to get the pasted image. If there are multiple instances of webuploader Simply disable the screenshot function if it exists. ( PS: After repeatedly testing the paste function of Webuploader, there is no problem. It is my negligence. When encapsulating the two plug-ins, paste:document.body is directly written in the code directly, so that all instantiations can listen to the paste event. All instances get data when pasting pictures. After repairing, the parameter function of usePaste is not needed.)
The images parameter is when we do the editing function, we need to initialize the instance of webuploader. The official demo of webuploader does not have such a function, so we need to modify it ourselves.
This article was originally published by the open source Chinese author [Cuttlefish Code], and may not be reproduced without permission.
Welcome to pay attention to the first time to get original sharing content.