Vue2Editor

https://www.vue2editor.com/
Admin
Vue2Editor is a rich text editor component for Vue.js applications built on top of Quill.js.
Tokens:2,954
Snippets:28
Trust Score:6.3
Update:1 month ago
Show doc for...
Tokens:
Raw
### Basic Vue2Editor Setup

Source: https://www.vue2editor.com/examples

Standard implementation using v-model for content binding and component registration.

```vue
<template>
  <vue-editor v-model="content" />
</template>

<script>
import { VueEditor } from "vue2-editor";

export default {
  components: { VueEditor },

  data: () => ({
    content: "<h1>Some initial content</h1>"
  })
};
</script>
```

--------------------------------

### Install via Package Managers

Source: https://www.vue2editor.com/guide.html

Use NPM or Yarn to add the package to your project dependencies.

```bash
npm install vue2-editor
```

```bash
yarn add vue2-editor
```

--------------------------------

### Install via CDN

Source: https://www.vue2editor.com/guide.html

Include the Vue and Vue2Editor scripts directly in your HTML file to automatically register the plugin.

```html
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue2-editor/dist/vue2-editor.umd.min.js"></script>
```

--------------------------------

### Register Globally

Source: https://www.vue2editor.com/guide.html

Use the Vue.use() method to register the editor as a global plugin.

```javascript
import Vue from "vue";
import Vue2Editor from "vue2-editor";

Vue.use(Vue2Editor);
```

--------------------------------

### Register Locally

Source: https://www.vue2editor.com/guide.html

Import the component directly into your Vue files for local registration.

```javascript
// Basic Use - Covers most scenarios
import { VueEditor } from "vue2-editor";

// Advanced Use - Hook into Quill's API for Custom Functionality
import { VueEditor, Quill } from "vue2-editor";
```

--------------------------------

### Modular Version Usage

Source: https://www.vue2editor.com/guide.html

Use the core version for more control over JavaScript and custom Quill themes.

```vue
<script>
import { VueEditor } from "vue2-editor/dist/vue2-editor.core.js";

export default {
  components: { VueEditor }
};
</script>

<style lang="css">
@import "~vue2-editor/dist/vue2-editor.css";

/* Import the Quill styles you want */
@import '~quill/dist/quill.core.css';
@import '~quill/dist/quill.bubble.css';
@import '~quill/dist/quill.snow.css';
</style>
```

--------------------------------

### Implement Live Preview with Vue2Editor

Source: https://www.vue2editor.com/examples

Bind editor content to a data property to display real-time updates in the template.

```vue
<template>
  <div>
    <vue-editor v-model="content" />
    <div>{{ content }}</div>
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";

export default {
  components: { VueEditor },

  data: () => ({
    content: "<h1>Some initial content</h1>"
  })
};
</script>
```

--------------------------------

### Custom Image Handler Implementation

Source: https://www.vue2editor.com/examples

Configures the editor to use a custom image handler via the useCustomImageHandler prop and the imageAdded event. Requires an axios-like request to upload the file and manual insertion of the image URL into the editor.

```vue
<template>
  <div id="app">
    <vue-editor
      id="editor"
      useCustomImageHandler
      @imageAdded="handleImageAdded"
      v-model="htmlForEditor"
    >
    </vue-editor>
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";
import axios from "axios";
export default {
  components: {
    VueEditor
  },

  data() {
    return {
      htmlForEditor: ""
    };
  },

  methods: {
    handleImageAdded: function(file, Editor, cursorLocation, resetUploader) {
      // An example of using FormData
      // NOTE: Your key could be different such as:
      // formData.append('file', file)

      var formData = new FormData();
      formData.append("image", file);

      axios({
        url: "https://fakeapi.yoursite.com/images",
        method: "POST",
        data: formData
      })
        .then(result => {
          const url = result.data.url; // Get url from response
          Editor.insertEmbed(cursorLocation, "image", url);
          resetUploader();
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
```

--------------------------------

### Nuxt.js Integration

Source: https://www.vue2editor.com/guide.html

Configure the module in nuxt.config.js and wrap the component in client-only tags to prevent hydration mismatches.

```javascript
{
  modules: ["vue2-editor/nuxt"];
}
```

```html
<client-only>
  <VueEditor />
</client-only>
```

--------------------------------

### Programmatically focus the editor

Source: https://www.vue2editor.com/examples

Use a ref to access the underlying Quill instance and call the focus method.

```vue
<template>
  <div>
    <button @click.prevent="focusEditor">Focus Editor</button>
    <vue-editor ref="editor" v-model="content" />
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";

export default {
  components: { VueEditor },

  data: () => ({
    content: "<h1>Some initial content</h1>"
  }),

  methods: {
    focusEditor() {
      this.$refs.editor.quill.focus();
    }
  }
};
</script>
```

--------------------------------

### Configure Custom Toolbar

Source: https://www.vue2editor.com/examples

Define a custom toolbar array to restrict or reorder available editor options.

```vue
<template>
  <vue-editor v-model="content" :editor-toolbar="customToolbar" />
</template>

<script>
import { VueEditor } from "vue2-editor";

export default {
  components: { VueEditor },

  data: () => ({
    content: "<h1>Html For Editor</h1>",
    customToolbar: [
      ["bold", "italic", "underline"],
      [{ list: "ordered" }, { list: "bullet" }],
      ["image", "code-block"]
    ]
  })
};
</script>
```

--------------------------------

### Implement Multiple Editors

Source: https://www.vue2editor.com/examples

Use unique IDs and separate data properties to manage multiple independent editor instances on the same page.

```vue
<template>
  <div id="app">
    <vue-editor id="editor1" v-model="editor1Content"></vue-editor>
    <vue-editor id="editor2" v-model="editor2Content"></vue-editor>
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";

export default {
  components: {
    VueEditor
  },

  data() {
    return {
      editor1Content: "<h1>Editor 1 Starting Content</h1>",
      editor2Content: "<h1>Editor 2 Starting Content</h1>"
    };
  }
};
</script>

<style>
#editor1,
#editor2 {
  height: 350px;
}
</style>
```

--------------------------------

### Register Custom Modules via Props

Source: https://www.vue2editor.com/examples

Pass an array of module objects to the customModules prop to let Vue2Editor handle the registration process.

```vue
<template>
  <div id="app">
    <vue-editor
      :customModules="customModulesForEditor"
      :editorOptions="editorSettings"
      v-model="content"
    >
    </vue-editor>
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";
import { ImageDrop } from "quill-image-drop-module";
import ImageResize from "quill-image-resize-module";

export default {
  components: {
    VueEditor
  },
  data() {
    return {
      content: "<h1>Initial Content</h1>",
      customModulesForEditor: [
        { alias: "imageDrop", module: ImageDrop },
        { alias: "imageResize", module: ImageResize }
      ],
      editorSettings: {
        modules: {
          imageDrop: true,
          imageResize: {}
        }
      }
    };
  }
};
</script>
```

--------------------------------

### Register Custom Modules Manually

Source: https://www.vue2editor.com/examples

Import Quill from vue2-editor to register modules directly before passing configuration to the editorOptions object.

```vue
<template>
  <div id="app">
    <vue-editor :editorOptions="editorSettings" v-model="content"> </vue-editor>
  </div>
</template>

<script>
import { VueEditor, Quill } from "vue2-editor";
import { ImageDrop } from "quill-image-drop-module";
import ImageResize from "quill-image-resize-module";

Quill.register("modules/imageDrop", ImageDrop);
Quill.register("modules/imageResize", ImageResize);

export default {
  components: {
    VueEditor
  },
  data() {
    return {
      content: "<h1>Initial Content</h1>",
      editorSettings: {
        modules: {
          imageDrop: true,
          imageResize: {}
        }
      }
    };
  }
};
</script>
```

--------------------------------

### Vue2Editor Props

Source: https://www.vue2editor.com/api.html

Configuration properties for the Vue2Editor component.

```APIDOC
## Props

- **id** (String) - Default: quill-container - Set the id (necessary if multiple editors in the same view)
- **v-model** (String) - Set v-model to the the content or data property you wish to bind it to
- **useCustomImageHandler** (Boolean) - Default: false - Handle image uploading instead of using default conversion to Base64
- **placeholder** (String) - Placeholder text for the editor
- **disabled** (Boolean) - Default: false - Set to true to disable editor
- **customModules** (Array) - Declare Quill modules to register
- **editorToolbar** (Array) - Use a custom toolbar
- **editorOptions** (Object) - Offers object for merging into default config (add formats, custom Quill modules, ect)
```

--------------------------------

### Listen for editor events

Source: https://www.vue2editor.com/examples

Bind event listeners to the component to track focus, blur, and selection changes.

```vue
<template>
  <vue-editor
    v-model="content"
    @focus="onEditorFocus"
    @blur="onEditorBlur"
    @selection-change="onSelectionChange"
  />
</template>

<script>
import { VueEditor } from "vue2-editor";

export default {
  components: { VueEditor },

  data: () => ({
    content: "<h1>Some initial content</h1>"
  }),

  methods: {
    onEditorBlur(quill) {
      console.log("editor blur!", quill);
    },

    onEditorFocus(quill) {
      console.log("editor focus!", quill);
    },

    onSelectionChange(range) {
      console.log("selection change!", range);
    }
  }
};
</script>
```

--------------------------------

### Configure Webpack for Custom Quill Modules

Source: https://www.vue2editor.com/examples

Add this configuration to your webpack settings if you encounter errors when importing or declaring custom modules.

```javascript
new webpack.ProvidePlugin({
  "window.Quill": "quill/dist/quill.js",
  Quill: "quill/dist/quill.js"
});
```

--------------------------------

### Vue2Editor Events

Source: https://www.vue2editor.com/api.html

Events emitted by the Vue2Editor component.

```APIDOC
## Events

- **focus** (quill) - Emitted on `focus` event
- **blur** (quill) - Emitted on `blur` event
- **selection-change** (range, oldRange, source) - Emitted on Quill's `selection-change` event
- **text-change** (delta, oldDelta, source) - Emitted on Quill's `text-change` event
- **image-added** (file, Editor, cursorLocation) - Emitted when `useCustomImageHandler` is true and photo is being added to the editor
- **image-removed** (image) - Emitted when `useCustomImageHandler` is true and photo has been deleted
```

--------------------------------

### Set Editor Content Programmatically

Source: https://www.vue2editor.com/examples

Update the editor content by modifying the bound v-model data property.

```vue
<template>
  <div>
    <button @click="setEditorContent">Set Editor Content</button>
    <vue-editor v-model="content" />
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";

export default {
  components: { VueEditor },

  data: () => ({
    content: null
  }),

  methods: {
    setEditorContent() {
      this.content = "<h1>Html For Editor</h1>";
    }
  }
};
</script>
```
Tokens:
Raw