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

Vue2Editor-Centered 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

Name	Type	Default	Description
placeholder	String	-	Placeholder text for the editor
editor-content	String	null	Set the the content of the editor
use-save-button	Boolean	True	Set to false to use your own button to save editor content
button-text	String	Save Content	Set the button's text
editor-toolbar	Array	** Too long for table. See toolbar example below	Use a custom toolbar
show-preview	Boolean	False	Set to true to get live preview

Events

Name	Description
editor-updated	Emitted when the editor contents change
save-content	Emitted when the default save button is clicked

Example

editor-content

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

Example

show-preview

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

Example

editor-toolbar

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

Example

use-save-button

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

Example

button-text

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

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.

Note: The default save button has a class of save-button which you can target for styling the button.

<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>
<style>
  .save-button {
    color: #fff;
    padding: .5em 1em;
    background-color: rgba(53, 73, 94, 0.85);
    text-decoration: none;
    border-radius: 2px;
    cursor: pointer;
    font-weight: 900;
    transition: background-color .2s ease;
    margin: 1em 0;
    float: right;
  }

  .save-button:hover {
      background-color: #35495e;
  }
</style>

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