Vue Trumbowyg
Vue.js component for Trumbowyg WYSIWYG editor
Demo or JSFiddle
Version matrix
| Vue.js version | Package version | Branch |
|---|---|---|
| 2.x | 3.x | 3.x |
| 3.x | 4.x | master |
Installation
# yarn
yarn add vue-trumbowyg
# npm
npm install vue-trumbowyg Features
- Reactive
v-modelvalue- You can change editor value programmatically
- Emits all possible events
- Supports most plugins
- Works with validation libraries like - vee-validate
Requirements
- jQuery >=1.8
- Vue v3.x
Usage
<template>
<div>
<trumbowyg v-model="content" :config="config" class="form-control" name="content"></trumbowyg>
</div>
</template>
<script>
// Import this component
import Trumbowyg from 'vue-trumbowyg';
// Import editor css
import 'trumbowyg/dist/ui/trumbowyg.css';
export default {
data () {
return {
content: null,
config: {
// Get options from
// https://alex-d.github.io/Trumbowyg/documentation
}
}
},
components: {
Trumbowyg
}
}
</script>As plugin
import Vue from 'vue';
import VueTrumbowyg from 'vue-trumbowyg';
import 'trumbowyg/dist/ui/trumbowyg.css';
app.use(VueTrumbowyg);This will register a global component <trumbowyg>
Events
- You can listen to various events like this
<trumbowyg v-model="body" @tbw-blur="yourMethod"></trumbowyg>💡 Events names are prefixed withtbwand separated with a dash, for example:tbw-focus
Available props
The component accepts these props:
| Attribute | Type | Default | Description |
|---|---|---|---|
| v-model | String / null | null |
Set or Get editor value (required) |
| disabled | Boolean | false |
Enable/disable editor |
| config | Object | {} |
Editor configuration options |
| svg-path | String, Boolean | import 'trumbowyg/dist/ui/icons.svg' |
Set custom svg icon file URL |
Install in non-module environments (without webpack)
<!-- Editor dependencies-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!-- Editor itself -->
<script src="https://cdn.jsdelivr.net/npm/trumbowyg@2"></script>
<link href="https://cdn.jsdelivr.net/npm/trumbowyg@2/dist/ui/trumbowyg.min.css" rel="stylesheet">
<!-- Vue js -->
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/vue-trumbowyg@4"></script><
<script>
// Initialize as global component
yourAppInstance.component('Trumbowyg', VueTrumbowyg.default);
</script>Troubleshoot
- Read the setup guide
Run examples on your localhost
- Clone this repo
- Make sure you have node-js
>=10.13and yarn>=1.xpre-installed - Install dependencies -
yarn install - Run webpack dev server -
yarn start - This should open the demo page at
http://localhost:9000in your default web browser
Changelog
Please see CHANGELOG for more information what has changed recently.
License
MIT License