vue-mix

1.1.2 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i vue-mix

Weekly Downloads

1

Version

1.1.2

License

ISC

Last publish

Collaborators

  • droyer