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-model
value- 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
As plugin
; ; ; app;
This will register a global component <trumbowyg>
Events
- You can listen to various events like this
- 💡 Events names are prefixed with
tbw
and 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--> <!-- Editor itself --> <!-- Vue js --><!-- Lastly add this package --><
Troubleshoot
- Read the setup guide
Run examples on your localhost
- Clone this repo
- Make sure you have node-js
>=10.13
and yarn>=1.x
pre-installed - Install dependencies -
yarn install
- Run webpack dev server -
yarn start
- This should open the demo page at
http://localhost:9000
in your default web browser
Changelog
Please see CHANGELOG for more information what has changed recently.
License
MIT License