Quill Image Super Solution Module

Quill Image Super Solution Module

[quill,image,upload,paste,drop,extend...] The most complete function! Realize the most perfect! The smallest volume! Solve all bugs of the same type of plug-in! This module is a special plug-in for the rich text editor vue-quill-editor, which provides the functions of custom uploading pictures to the server, pasting pictures to uploading to the server, and dragging pictures to uploading to the server. Supports use with other modules.

quill-image-super-solution-module

Introduction

This module is a rich text editor, vue-quill-editora dedicated plug-in, providing a custom upload pictures to the server, paste the pictures uploaded to the server, drag and drop pictures uploaded to the server functions. Supports use with other modules.

This module is a special plug-in for the rich text editor vue-quill-editor, which provides custom upload pictures to the server, paste pictures to the server, and drag pictures to the server. Features. Supports use with other modules.

Rich text editor for the original implementation: the picture is encoded as base64an encrypted string, and then at the time of submission of the data, this form field holds a large htmlcontent, may be subject to network reasons, the database restrictions, etc. caused by external factors fail. And when we need these image resources, it is not easy to archive, so this module is needed.

The original implementation of the rich text editor is: encode the picture into an encrypted string of base64, and then when submitting the data, this form field saves a large html content, so it may be due to network reasons, database restrictions, etc. Factors lead to failure. And when we need these image resources, it is not easy to archive, so this module is needed.

Highlights Show

  1. Integrated functions such as paste, drag and drop, reduce the number of plug-ins installed
  2. One solution other plug-ins are present bug: When you insert a picture, cursor position errors Solve a bug in other plugins: the cursor position is wrong when inserting pictures
  3. When solving other plug-paste a picture, display abnormal bugthe Solve at The problem of Abnormal of a displaying bugthe when OTHER plugins Paste Pictures
  4. Solve other types of plug-in to upload files without restriction of bugthe Solve at The bugthat OTHER plugins the Upload File types the without Restrictions
  5. Pasting pictures and dragging pictures also realize the function of uploading to the server

Features

  • Version 1.0.1
  1. Insert, paste, drag and drop pictures to upload to the server, customize the upload path
  2. Limit image size function
  3. Restrict upload image types
  4. Show upload progress
  5. Show upload success or failure
  6. Supports common use with other plugins
  • Version 1.0.2
  1. Change the description document and fix the errors in the examples in the description
  • Version 1.0.3
  1. Solve the editor can not paste the text of bugthe Solve at The bugthat CAN not Paste text in at The Editor
  • Version 1.0.4
  1. Npm modules in the documentation keywordset incorrectly, correct them. The keywordsetting error in the Npm module description document is corrected.
  • Version 2.0.0
  1. Nothing updated, just want to send a big version for fun
  • Version 2.0.1
  1. Resolve when copying multiple lines of text and the text has a carriage return, there will be extra blank line in bugthe Solve at The bugthat Extra blank Lines by Will appear the when COPYING Multiple Lines of text and there IS A at The Carriage return in text

Installation

## yarn (Recommended, high-speed download Recommended, high-speed download)
yarn add quill-image-super-solution-module
## npm
npm install quill-image-super-solution-module --save-dev

Introduce

import { container, ImageExtend, QuillWatch } from "quill-image-super-solution-module";
Quill.register("modules/ImageExtend", ImageExtend);

Example

<template>
    <div class="quill-example">
        <quill-editor v-model="example" :options="editorOption"> </quill-editor>
    </div>
</template>
<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor, Quill } from "vue-quill-editor";
import { container, ImageExtend, QuillWatch } from "quill-image-super-solution-module";

Quill . Register ( " modules / ImageExtend " , ImageExtend); 
Export  default { 
    Components : {} quillEditor, 
Data () { return {             Example : " Test " ,             Content : " " , // Rich Text box parameters // the Rich text box parameter settings             editorOption : {                 modules : {                     ImageExtend : { //    

                          Optional parameters whether to display upload progress and prompt 
// Optional model types within the Parameters Run the display to the Upload Progress and prompt.                         Loading : to true , // picture parameter name // Picture the Parameter name                         name : " img " , // optional parameter image size, units of M, 1M = 1024KB // Optional the Parameters Image size, unit iS M.                         size : 1 , // server address, if the action is empty, then insert a picture using base64 // server address, IF iS empty action, to use base64 insert picture                         action : "                          

 / uploads " , 
// optional upload the picture format // Optional, uploadable Image format                         the Accept : " Image / JPG, Image / PNG, Image / GIF, Image / jpeg, Image / BMP, Image / icon-the X- " , // Response as a function to retrieve the address of the particular server returns the image // Response the GET iS a specific function to address returned by the image server // example server returns {code: 200; data: { url: 'baidu.com '}} // For example, the server returns {code: 200; data:{ url:'baidu.com'}} // Then return res.data.url response : ( res ) => { return                          

                             RES . Data . URL ; 
                        }, 
// optional parameter setting request header // Optional The the Set Parameter Request header. headers : ( XHR ) => { // such add-token CSRF // the For Example, the Add-CSRF token XHR . the setRequestHeader ( " the X--CSRFToken " , " TestToken " );                         }, // pictures exceed the size of callbacks // callback exceeds the when at the Image at the size sizeError : ()                          

                        => { 
Alert ( " picture is larger than M 1 " );                         }, // optional parameter to start uploading custom trigger event // Optional the Parameters Custom Start the Upload the Trigger Event. Start : () => {}, // optional Upload custom parameter end event-triggered, regardless of success or failure // optional triggered by the parameters customize at the event at the end of the Upload, regardless of success or failure. end : () => {}, // optional parameter upload failed trigger event // Optional the Parameter Upload of the event triggered by failure. error : () => {},                            

                          // optional parameter upload successful event triggered 
// Optional at The Event triggered by the Parameter A successful the Upload. Success : () => {}, // optional parameter to select pictures trigger, can also be used to set the head, but better than headers One more parameter, you can set formData // Optional parameters. Select the picture to trigger. It can also be used to set the header, but there is one more parameter than headers, which can be set formData change : ( xhr , formData ) => { formData . append ( " example " , " test " );                          

                        }, 
                    }, 
                    toolbar : { 
// container is a toolbar, all toolbars are introduced this time, and they can also be configured by themselves // container is a toolbar, all toolbars are introduced this time, and they can also be configured by themselves                         container : Container,                         handlers : { Image : function () { // hijack the original picture click the button event // hijack the click the button at the original picture event QuillWatch . EMIT ( the this . Quill . the above mentioned id );                          

                            },
                        },
                    },
                },
            },
        };
    },
};
</script>

Pay tribute to

This module refers to many plug-ins and integrates what everyone has made. Take it from the public and use it for the public, I hope it will be helpful to everyone.

This module refers to many plug-ins and integrates what everyone has made. Take it from the public and use it for the public, I hope it will be helpful to everyone.

Refer to the plugin catalog
  • quill-image-extend-module
  • quill-image-paste-module
  • quill-image-drop-module
  • There are many Stack Overflowcodes provide good people on There is also a lot of code provided by good people on Stack Overflow

If it works, please click the star in the upper right corner

Please click the star if it works

Download Details:

Author: EthanYan6

Source Code: https://github.com/EthanYan6/quill-image-super-solution-module

vue vuejs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get

How to Make a Simple Vue Custom Select Component

In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.

Creating a Custom Tooltip Component in Vue

There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.