Vue2Editor - An easy-to-use but yet powerful and customizable rich text editor powered by Quill.js and Vue.js

Zendy Kim

Last update: Feb 13, 2020

Related tags

Rich Text Editing vue2-editor

Overview

Vue2Editor

An easy-to-use but yet powerful and customizable rich text editor powered by Quill.js and Vue.js

View Docs

📖 Release Notes

Install

You can use Yarn or NPM

npm install vue2-editor

yarn add vue2-editor

Usage

// 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";

Props

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

Events

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

Examples

Example - Basic Setup

<template>
  <div id="app">
    <vue-editor v-model="content">vue-editor>
  div>
template>

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

export default {
  components: {
    VueEditor
  },

  data() {
    return {
      content: "Some initial content
"
    };
  }
};
script>

Example - Custom Image Handler

If you choose to use the custom image handler, an event is emitted when a a photo is selected. You can see below that 3 parameters are passed.

It passes the file to be handled however you need
The Editor instance
The cursor position at the time of upload so the image can be inserted at the correct position on success

NOTE In addition to this example, I have created a example repo demonstrating this new feature with an actual server.

<template>
  <div id="app">
    <vue-editor id="editor" useCustomImageHandler @image-added="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 => {
          let url = result.data.url; // Get url from response
          Editor.insertEmbed(cursorLocation, "image", url);
          resetUploader();
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
script>

Example - Set Contents After Page Load

<template>
  <div id="app">
    <button @click="setEditorContent">Set Editor Contentsbutton>
    <vue-editor v-model="htmlForEditor">vue-editor>
  div>
template>

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

export default {
  components: {
    VueEditor
  },

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

  methods: {
    setEditorContent: function() {
      this.htmlForEditor = "Html For Editor
";
    }
  }
};
script>

Example - Using Multiple Editors

<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: "

Editor 1 Starting Content

", editor2Content: "

Editor 2 Starting Content

" }; } }; script> <style> #editor1, #editor2 { height: 350px; } style>

<template> <div id="app"> <vue-editor v-model="content" :editorToolbar="customToolbar">vue-editor> div> template> <script> import { VueEditor } from "vue2-editor"; export default { components: { VueEditor }, data() { return { content: "

Html For Editor

", customToolbar: [["bold", "italic", "underline"], [{ list: "ordered" }, { list: "bullet" }], ["image", "code-block"]] }; } }; script>

<template> <div id="app"> <button @click="saveContent">button> <vue-editor v-model="content">vue-editor> div> template> <script> import { VueEditor } from "vue2-editor"; export default { components: { VueEditor }, data() { return { content: "

Initial Content

" }; }, methods: { handleSavingContent: function() { // You have the content to save console.log(this.content); } } }; script>

<template> <div id="app"> <vue-editor v-model="content">vue-editor> <div v-html="content">div> div> template> <script> import { VueEditor } from 'vue2-editor' components: { VueEditor }, export default { data() { return { content: '

Initial Content

' } } } script>

<template> <div id="app"> <vue-editor :editorOptions="editorSettings" v-model="content"> 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: '

Initial Content

', editorSettings: { modules: { imageDrop: true, imageResize: {} } } } } } script>

<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: "

Initial Content

", customModulesForEditor: [{ alias: "imageDrop", module: ImageDrop }, { alias: "imageResize", module: ImageResize }], editorSettings: { modules: { imageDrop: true, imageResize: {} } } }; } }; script>

License

MIT

A lightweight and customizable editor that allows you to embed rich content using Vuejs components.

Vue Mobiledoc Editor A Mobiledoc editor written using Vue and Mobiledoc Kit. Installation npm install vue-mobiledoc-editor The vue-mobiledoc-editor w

73 Aug 19, 2022

Contentful - Vue 3 compatible package for outputting a Contentful Rich Text Field

Contentful is a modern content management solution, designed as a framework to serve content in a presentation-independant way.

6 Mar 15, 2022

Visual activity editor, JSON Schema-based common form support editor configuration, quickly build your own editor platform

72 Jan 6, 2023

A simple and powerful package for easy usage of tinymce in Vue.js project.

vue-easy-tinymce A simple and powerful package for easy usage of tinymce in Vue.js project. Features v-model Support Multiple instance editor support

25 Mar 17, 2021

Trix text editor component for Vue.js

Vue-Trix Text Editor Simple and lightweight Trix rich-text editor Vue.js component for writing daily Table of Contents Vue-Trix Text Editor Table of C

213 Dec 31, 2022

A medium like text editor for vue js WYSIWYG

100 Dec 17, 2022

Vue.js text editor for writer

fospublisher-vue-text-editor 1. Introduction Vue.js text editor for writer Various features such as export to PDF, pagination, insert image, insert li

0 Jun 17, 2021

Zeurus, a cross-platform blazingly fast code/text editor with Syntax Highlighting 💫 🌀

Zeurus, a cross-platform blazingly fast code/text editor with Syntax Highlighting

11 Nov 27, 2022

Nexus, a cross-platform blazingly fast code/text editor with Syntax Highlighting

Nexus - The code/text editor of the future Nexus, a cross-platform blazingly fast code/text editor with Syntax Highlighting Installation Installing Ne