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

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.

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