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

Overview

Vue2Editor

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

View Docs

Vue2Editor-Centered

📖 Release Notes

Install

You can use Yarn or NPM

npm install vue2-editor

OR

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.

  1. It passes the file to be handled however you need
  2. The Editor instance
  3. 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>

Example - Custom Toolbar

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

Example - Saving The Content

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

Example - Use a Live Preview

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

How To Use Custom Quill Modules

There are two ways of using custom modules with Vue2Editor. This is partly because there have been cases in which errors are thrown when importing and attempting to declare custom modules, and partly because I believe it actually separates the concerns nicely.

Version 1 - Import and Register Yourself

Vue2Editor now exports Quill to assist in this process.

  1. When importing VueEditor, also import Quill.
  2. Import your custom modules
  3. Register the custom modules with Quill
  4. Add the necessary configuration to the editorOptions object
">
<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>

Version 2 - You Import | Vue2Editor Registers

(Recommended way)

  1. Import your custom modules
  2. Use the customModules prop to declare an array of module(s).
  3. Add the necessary configuration for those modules in the editorOptions object under modules as seen below
">
<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>

Development

Vue2Editor now uses Poi for development

License

MIT

You might also like...
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

Contentful - Vue 3 compatible package for outputting a Contentful Rich Text Field
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.

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

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

A simple and powerful package for easy usage of tinymce in Vue.js project.
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

Trix text editor component for Vue.js
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

A medium like text editor for vue js WYSIWYG
A medium like text editor for vue js WYSIWYG

A medium like text editor for vue js WYSIWYG

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

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

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

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

Owner
Zendy Kim
Zendy Kim
Quill Editor for Vue 3 component.

Quill Editor for Vue 3 component.

VueUP 470 Dec 4, 2022
Quill editor for vue3

Quill editor for vue3

Lili 40 Nov 29, 2022
🌸A modern WYSIWYG rich-text editor using tiptap and Element UI for Vue.js

Element Tiptap Editor A WYSIWYG rich-text editor using tiptap and Element UI for Vue.js that's easy to use, friendly to developers, fully extensible a

Jiaxun Li 887 Dec 2, 2022
A rich text editor as a Vue component, with image and auto-save support

Vue Trix Rich Text Editor A Vue wrapper around the Trix rich-text editor, with support for images and auto-save. Note: No true two-one binding. While

Dymantic Design 35 May 22, 2022
A modern WYSIWYG rich-text editor built on top of tiptap and Quasar for Vue.js.

quasar-tiptap A modern WYSIWYG rich-text editor built on top of tiptap and Quasar Framework for Vue.js. Examples & Demos Examples Live Demo Code Sandb

DonoteBase 251 Nov 22, 2022
🚀 Awesome and extendable rich text editor component for Vuetify projects using tiptap

vuetify-tiptap ?? Awesome and extendable rich text editor component for Vuetify projects using tiptap View Demo · Usage · Installation · API · License

null 8 Nov 30, 2022
Vue component for Froala WYSIWYG HTML Rich Text Editor.

Vue JS Froala WYSIWYG Editor vue-froala-wyswiyg provides Vue bindings to the Froala WYSIWYG editor VERSION 3. Compatibility v1 later @legacy Vue.js 1.

Froala 599 Nov 30, 2022
A renderless rich-text editor for Vue.js

We’re working on tiptap 2. Become a sponsor to get access immediately! Sponsor ?? tiptap A renderless and extendable rich-text editor for Vue.js [FAQ]

überdosis 17.2k Nov 27, 2022
A renderless rich-text editor for Vue.js

A renderless and extendable rich-text editor for Vue.js

überdosis 17.1k Nov 27, 2022
A full-fledged rich-text editor for Vue.js

A vue rich editor component

Ryan Wang 17 Aug 15, 2022