Vue2-Editor

HTML Editor using Vue.js 2.0 and Quilljs

Vue.js

Quill

Install

$ npm install --save vue2-editor

Use

import { VueEditor } from 'vue2-editor'

Props

editor-content:

You can set the the content of the editor dynamically. If you don't need this feature then do not include it.

<template>
  <div id="app">
    <button type="button"
      @click="setEditorContent">
      Set Editor Contents
    </button>

    <vue-editor
      :editor-content="htmlForEditor">
    </vue-editor>
  </div>
</template>

<script>
  import { VueEditor } from 'vue2-editor'

  export default {
    data: function () {
      return {
        htmlForEditor: null  
      }
    },

    components: {
      VueEditor
    },

    methods: {
      setEditorContent: function () {
        this.htmlForEditor = '<h1>Html For Editor</h1>'
      }
    }
  }
</script>

show-preview:

This is set to FALSE by default. To enable:

<vue-editor
  :show-preview="true">
</vue-editor>

editor-toolbar:

If you want to use a custom toolbar then you can set it to a property from the data object.

<template>
  <div id="app">
    <vue-editor
      :editor-toolbar="customToolbar">
    </vue-editor>
  </div>
</template>

<script>
  import { VueEditor } from 'vue2-editor'

  export default {
    data: function () {
      return {
        customToolbar: [
            ['bold', 'italic', 'underline'],
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
            ['image', 'code-block']
          ]
      }
    },

    components: {
      VueEditor
    }
  }
</script>

use-save-button:

This is set to true by default. Set to false to use your own button.

button-text:

The default text is 'Save Content'. If you want to use the built in Save button but with different text then you can set this prop to a String.

<vue-editor
  button-text="Custom Save Message">
</vue-editor>

Events

editor-updated:

Emitted when the editor contents change. You will want to listen for this event if using your own save button.

save-content:

Emitted when the default save button is clicked.

How do I get the html content from the text editor?

There are 2 different scenarios we need to address.

1. Using the default Save Button

When the button is clicked, the 'save-content' event is emitted with the current contents of the editor.

You need to create a method that runs when this event is emitted and pass a parameter to this method. This parameter holds the editor contents.

EX:

<template>
  <div id="app">
    <h1>Write Your Message and save it!</h1>
    <vue-editor
      @save-content="handleSavingContent">
    </vue-editor>
  </div>
</template>

<script>
  import { VueEditor } from 'vue2-editor'

  export default {
    components: {
      VueEditor
    },

    methods: {
      handleSavingContent: function (contentsToBeSaved) {
        console.log(contentsToBeSaved)
      }
    }  
  }
</script>

2. Using your own button

The event 'editor-updated' is emitted when the text inside the editor changes. The current editor contents are sent with this event.

You need to create a method that runs when this event is emitted.

EX:

<template>
  <div id="app">

    <vue-editor
      :use-save-button="false"
      @editor-updated=handleUpdatedContent>
    </vue-editor>

    <button type="button" name="save-content"
      @click="saveTheContent">
      Our Own Button
    </button>

  </div>
</template>

<script>
  import { VueEditor } from 'vue2-editor'

  export default {
    data: function () {
      return {
        htmlFromEditor: null
      }
    },

    components: {
      VueEditor
    },

    methods: {
      handleUpdatedContent: function (value) {
        this.htmlFromEditor = value
      },

      saveTheContent: function () {
        // Do whatever you want
        console.log(this.htmlFromEditor)
      }
    }
  }
</script>

Example using several configuration options

<template>
  <div id="app">
    <button type="button"
      @click="setEditorContent">
      Set Editor Content
    </button>

    <vue-editor
      :editor-content="htmlForEditor"
      :show-preview="true"
      @editor-updated="handleUpdatedContent"
      @save-content="handleSavingContent"
      button-text="Save Your Content">
    </vue-editor>
  </div>
</template>

<script>
  import { VueEditor } from 'vue2-editor'

  export default {
    data: function () {
      return {
        htmlForEditor: null  
      }
    },

    components: {
      VueEditor
    },

    methods: {
      handleSavingContent: function (value) {
        console.log(value)
      },

      handleUpdatedContent: function (value) {
        console.log(value);
      },

      setEditorContent: function () {
        this.htmlForEditor = '<h1>Html For Editor</h1>'
      }
    }  
  }
</script>

License

MIT