vue2-quill-editor

HTML Editor using Vue.js 2.0 and Quilljs Vue.js Quill You can use Yarn or NPM ```bash $ npm install --save vue2-quill-editor ``` OR ```bash yarn add vue2-quill-editor ``` ```javascript import { VueEditor } from 'vue2-quill-editor' //... your code ``` Name | Type | Default | Description -------------- | ------ | -------------------------------------------------- | ---------------------------------------------------------------------- id | String | quill-container | Set the id (necessary if multiple editors in the same view) 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 ```html

<div id="app">

<vue-editor v-model="content"></vue-editor>

</div>

```

Example

Set Contents After Page Load ```html

<button @click="setEditorContent">Set Editor Contents</button>

<vue-editor v-model="htmlForEditor"></vue-editor>

```

Example

Using Multiple Editors ```html

<vue-editor id="editor1" v-model="editor1Content"></vue-editor>

<vue-editor id="editor2" v-model="editor2Content"></vue-editor>

```

Example

Custom Toolbar ```html

<vue-editor v-model="content" :editorToolbar="customToolbar"></vue-editor>

```

Example

Saving the Content ```html

<button @click="saveContent"></button>

<vue-editor v-model="content"></vue-editor>

```

Example

Use a Live Preview ```html

<vue-editor v-model="content"></vue-editor>

<div v-html="content"></div>

```

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