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 2.0

Vue2Editor-Centered HTML Editor using Vue.js 2.0 and Quilljs

Vue.js

Quill

Install

You can use Yarn or NPM

$ npm install --save vue2-editor

yarn add vue2-editor

Use

import { VueEditor } from 'vue2-editor'

Props

Name	Type	Default	Description
v-model	String	-	Set v-model to the the content or data property you wish to bind it to
placeholder	String	-	Placeholder text for the editor
disabled	Boolean	false	Set to true to disable editor
editorToolbar	Array	** Too long for table. See toolbar example below	Use a custom toolbar

Example

Basic Setup

<template>
   <div id="app">
     <vue-editor v-model="content"></vue-editor>
   </div>
 </template>

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

   components: {
     VueEditor
   },

   export default {
     data() {
       return {
         content: '<h1>Some initial content</h1>'  
       }
     }
   }
 </script>

Example

Set Contents After Page Load

<template>
  <div id="app">
    <button @click="setEditorContent">Set Editor Contents</button>
    <vue-editor v-model="htmlForEditor"></vue-editor>
  </div>
</template>

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

  export default {
    components: {
      VueEditor
    },

    data() {
      return {
        htmlForEditor: null  
      }
    },

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

Example

Custom Toolbar

<template>
  <div id="app">
    <vue-editor v-model="content" :editorToolbar="customToolbar"></vue-editor>
  </div>
</template>

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

  export default {
    components: {
      VueEditor
    },

    data() {
      return {
        content: '<h1>Html For Editor</h1>',
        customToolbar: [
            ['bold', 'italic', 'underline'],
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
            ['image', 'code-block']
          ]
      }
    }
  }
</script>

Example

Saving the Content

<template>
  <div id="app">
    <button @click="saveContent"></button>
    <vue-editor v-model="content"></vue-editor>
  </div>
</template>

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

  export default {
    components: {
      VueEditor
    },

    data () {
      return {
        content: '<h3>Initial Content</h3>'
      }
    },

    methods: {
      handleSavingContent: function() {
        // You have the content to save
        console.log(this.content)
      }
    }  
  }
</script>

Example

Use a Live Preview

<template>
  <div id="app">
    <vue-editor v-model="content"></vue-editor>
    <div v-html="content"></div>
  </div>
</template>

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

  components: {
    VueEditor
  },

  export default {
    data() {
      return {
        content: '<h1>Initial Content</h1>'  
      }
    }
  }
</script>

Usage

import Vue2Editor from 'vue2-editor'

//... your code

Folder structure

src/: Source files for this component
- Vue2Editor.vue The component itself
example/: Example for demonstrating this component
- index.js: Entry for the example
- App.vue: The root component which we use to load this component
vbuild.example.js: Config file for your example
vbuild.component.js: Config file for your component
package.json: App manifest
.editorconfig: Ensure consistent editor behaivor
.gitignore: Ignore files we don't need to push

Development

yarn example: Run example in development mode
yarn deploy: Deploy example to gh-pages
yarn build:cjs: Build component in commonjs format
yarn build:umd: Build component in umd format
yarn build: Build component in both format
yarn lint: Run eslint

Check out your npm scripts, it's using vbuild under the hood.

License

MIT