Bs:

I’ve been blogging lately. Rewrote the article editor. Quill.js, thought I’d share it. Some potholes still need attention.

Introduction and use of vue-quill-editor

1, first put an official document address:

https://github.surmon.me/vue-quill-editor/

NPM address: https://www.npmjs.com/package/vue-quill-editor

2. Usage (personal recommendation)

The individual uses the corresponding page to be imported individually, not globally. Global introduction can cause some unnecessary trouble.

import { quillEditor } from 'vue-quill-editor' 
export default {  components: {    quillEditor  }}Copy the code

Vue page:

<quill-editor
  ref="QuillEditor"
  class="quill-dht"
  :options="editorOption"
  v-model="content"
  @blur="onEditorBlur($event)"
  @focus="onEditorFocus($event)"
  @ready="onEditorReady($event)"
  @change="onEditorChange($event)"
></quill-editor>Copy the code

Note the above several events, specific do not need me to explain it

Personally, the change event has been used, that is, when using, we should pay attention to throttling or shaking prevention

The key in the event is to return an object data, more commonly used is the text field, this is rich text plain text content, more useful in the introduction of the article. Otherwise, the v-model contains HTML elements. It’s a lot of trouble to get rid of yourself.

Let me put down my configuration items

editorOption: {
  theme: "snow", // pay attention to the style problem placeholder:"Start writing...",
  debug: false, modules: {// Customize the container: [["bold"."italic"."underline"."strike"], // toggled buttons
        ["blockquote"."code-block"],
        [{ header: 1 }, { header: 2 }], // custom button values
        [{ indent: "1" }, { indent: "+ 1" }], // outdent/indent
        [{ direction: "rtl" }], // text direction
        [{ size: ["small".false."large"."huge"] }], // custom dropdown
        [{ color: [] }, { background: [] }], // dropdown with defaults from theme
        [{ align: [] }],
        ["link"."image"],
        ["clean"Handlers: {image: value => {if (value) {
            this.upload_type = 1;
            this.$refs.upload.click();
          } else {
            this.quill.format("image".false);
          }
        }
      }
    },
    // imageDrop: trueImageResize: {displayStyles: {backgroundColor: imageResize: {displayStyles: {backgroundColor:"black",
        border: "none",
        color: "white"}}, ImageExtend: {// If not set, that is {} copy and paste function is still enabled and base64 insert name:"img", // Picture parameter name size: 1, // Optional picture size, unit: M, 1M = 1024KB Action: uploadImg, response: res => {return this.$api.static().visit + res.data;
      },
      headers: xhr => {
        xhr.setRequestHeader("Authorization", user_info.sign);
      },
      sizeError: () => {
        this.$notify({
          title: "Upload failed".type: "error",
          message: "Picture size over 1M"}); }, start: () => {}, // Optional parameters to customize the start upload trigger event end: () => {}, // Optional parameters to customize the upload end event, whether the upload fails or succeeds. // Optional parameters to customize the upload failure trigger event error: e => { console.log(e); this.$notify({
          title: "Upload failed".type: "error",
          message: "Picture size over 1M"}); }}}},Copy the code

3. Introduction of styles

You don’t need to worry about styles because you are using vUE components, but note that styles must be referenced globally. Unless you want to customize the button’s events. The reason for this is that styles are not just for your editor page, but also for your later article browsing page.

Use main.js to refer to whatever you use. Ensure that it corresponds to the preceding configuration items

//import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
//import "quill/dist/quill.bubble.css";Copy the code

4, the article is edited, you need to release, the key point, most online articles did not say this

The normal way online is:

<section class="ql-editor" v-html="info.content"></section>Copy the code

Inside the V-HTML is the content of the editor V-Model.

But when you do that, you’ll notice, oh, I’m out of my container. The font size is wrong. The style is different. It’s so different from what’s in my editor.

The reason:

1. Your style has no global import

2, the above way to introduce the way is wrong (I gave the above official did not say, pit)

Solution:

1, the style is easy to solve, and I said in advance above

2. The HTML content is in the wrong format

I actually discovered this by looking carefully at the HTML content that the editor edited in F12.

Notice that the actual editing area of the editor is within the following div contents, and many of the contents have their own CSS

Above:



So the correct way to present content is (if not, refer to the style in the editor) :

<div class="ql-snow">
  <section class="ql-editor" v-html="info.content"></section>
</div>Copy the code

Basically then my content is in sync with the editor, and images and so on don’t overflow

Two, easy to use plug-in introduction

1, quill-image-resize-module, support to adjust the size and position of images during editing

Use:

import { quillEditor, Quill } from "vue-quill-editor"; // Support image scaling import ImageResize from"quill-image-resize-module";
Quill.register("modules/imageResize", ImageResize);Copy the code
editorOption: {
  theme: "snow",
  placeholder: "Start writing...",
  debug: false,
  modules: {
    imageResize: {
      displayStyles: {
        backgroundColor: "black",
        border: "none",
        color: "white"}}}},Copy the code

Read more official documents, very simple

2. Quill-image-extend-module supports dragging in images to upload to the server

Use:

import { container, ImageExtend, QuillWatch } from "quill-image-extend-module";
Quill.register("modules/ImageExtend", ImageExtend);Copy the code

My code here is too messy, I will put the official address, rather than look at my code

git：https://github.com/NextBoy/quill-image-extend-module

3. Custom image upload (elementUI for personal use)

The main toolbar configuration is here

// Customize menu bar toolbar: {container: [["bold"."italic"."underline"."strike"], // toggled buttons
    ["blockquote"."code-block"],
    [{ header: 1 }, { header: 2 }], // custom button values
    [{ indent: "1" }, { indent: "+ 1" }], // outdent/indent
    [{ direction: "rtl" }], // text direction
    [{ size: ["small".false."large"."huge"] }], // custom dropdown
    [{ color: [] }, { background: [] }], // dropdown with defaults from theme
    [{ align: [] }],
    ["link"."image"],
    ["clean"] // remove formatting button
  ],
  handlers: {
    image: value => {
      if (value) {
        this.upload_type = 1;
        this.$refs.upload.click();
      } else {
        this.quill.format("image".false); }}}},Copy the code

ElementUI part

<el-upload
  :headers="headers"
  :action="uploadImg"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload"
>
  <div ref="upload"></div>
</el-upload>Copy the code

Mainly after the successful uploading of pictures:

// Get the cursor positionletlength = quill.getSelection().index; Quill.insertembed (length,"image",
  this.$api.static().visit + res.data ); // Adjust the cursor to the end quill.setSelection(length + 1);Copy the code

Three, thanks

Thanks to quill rich text editor, although personally tried to develop. But other people are better than you, you have to admit it.