Package Exports

vue2-editor

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue2-editor) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vue2-Editor

HTML Editor using Vue.js 2.0 and Quilljs
Vue.js
Quill

Install

$ npm install --save 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.

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']
        ]
    }
  }
}
</script>

use-save-button: Default is TRUE.

button-text: Default is 'Save Content'. If you want to use the built in Save button but want it to have different text then you can set this prop a String

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

## Events

editor-updated:

save-content:

Example using all configuration options

EX:

<template>
  <div id="app">
    <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 {
  methods: {
    handleSavingContent: function (value) {
      console.log(value)
    }
  }  
}
</script>

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, an event called 'save-content' is emitted with the value of the text editor.

You can listen for this event then execute a method that you create when the 'save-content'' method fires. Note: You will need to pass a parameter to the method you create. This parameter holds the value of 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 {
  methods: {
    handleSavingContent: function (contentsToBeSaved) {
      console.log(contentsToBeSaved)
    }
  }  
}
</script>

#### Using your own button

The event 'editor-updated' is emitted whenever the text inside the text editor changes. The current editor contents are sent as a value with this event.

This means we can listen for the 'editor-updated' event, get the value of the editor from it, and set it to a data reference in our current instance.

Then, we can use THAT data reference from our own instance however we please.

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
    }
  },

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

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

License

MIT