![PyPI Now Supports iOS and Android Wheels for Mobile Python Development](https://cdn.sanity.io/images/cgdhsj6q/production/96416c872705517a6a65ad9646ce3e7caef623a0-1024x1024.webp?w=400&fit=max&auto=format)
Security News
PyPI Now Supports iOS and Android Wheels for Mobile Python Development
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.
vue2-quill-editor
Advanced tools
HTML editor using Vue.js 2.0 and Quill.js, an open source editor
HTML Editor using Vue.js 2.0 and Quilljs
You can use Yarn or NPM
$ npm install --save vue2-quill-editor
OR
yarn add vue2-quill-editor
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 |
Basic Setup
<template>
<div id="app">
<vue-editor v-model="content"></vue-editor>
</div>
</template>
<script>
import { VueEditor } from 'vue2-quill-editor'
export default {
components: {
VueEditor
},
data() {
return {
content: '<h1>Some initial content</h1>'
}
}
}
</script>
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-quill-editor'
export default {
components: {
VueEditor
},
data() {
return {
htmlForEditor: null
}
},
methods: {
setEditorContent: function() {
this.htmlForEditor = '<h1>Html For Editor</h1>'
}
}
}
</script>
Using Multiple Editors
<template>
<div id="app">
<vue-editor id="editor1" v-model="editor1Content"></vue-editor>
<vue-editor id="editor2" v-model="editor2Content"></vue-editor>
</div>
</template>
<script>
import { VueEditor } from 'vue2-quill-editor'
export default {
components: {
VueEditor
},
data() {
return {
editor1Content: '<h1>Editor 1 Starting Content</h1>',
editor2Content: '<h1>Editor 2 Starting Content</h1>',
}
}
}
</script>
<style>
#editor1, #editor2 {
height: 350px;
}
</style>
Custom Toolbar
<template>
<div id="app">
<vue-editor v-model="content" :editorToolbar="customToolbar"></vue-editor>
</div>
</template>
<script>
import { VueEditor } from 'vue2-quill-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>
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-quill-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>
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-quill-editor'
components: {
VueEditor
},
export default {
data() {
return {
content: '<h1>Initial Content</h1>'
}
}
}
</script>
src/
: Source files for this component
Vue2Editor.vue
The component itselfexample/
: Example for demonstrating this component
index.js
: Entry for the exampleApp.vue
: The root component which we use to load this componentvbuild.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
yarn example
: Run example in development modeyarn deploy
: Deploy example to gh-pagesyarn build:cjs
: Build component in commonjs formatyarn build:umd
: Build component in umd formatyarn build
: Build component in both formatyarn lint
: Run eslintCheck out your npm scripts, it's using vbuild under the hood.
MIT
FAQs
HTML editor using Vue.js 2.0 and Quill.js, an open source editor
The npm package vue2-quill-editor receives a total of 513 weekly downloads. As such, vue2-quill-editor popularity was classified as not popular.
We found that vue2-quill-editor demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.