Vue.js component for Trumbowyg WYSIWYG editor

Vue Trumbowyg

Vue.js component for Trumbowyg WYSIWYG editor

Demo or JSFiddle


# yarn
yarn add vue-trumbowyg

# npm
npm install vue-trumbowyg 


  • Reactive v-model value
    • You can change editor value programmatically
  • Emits all possible events
  • Supports most plugins
  • Works with validation libraries like - vee-validate


  • jQuery >=1.8


    <trumbowyg v-model="content" :config="config" class="form-control" name="content"></trumbowyg>

  // 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 
    components: {
As plugin
  import Vue from 'vue';
  import VueTrumbowyg from 'vue-trumbowyg';
  import 'trumbowyg/dist/ui/trumbowyg.css';

This will register a global component <trumbowyg>


  • You can listen to various events like this
 <trumbowyg v-model="body" @tbw-blur="yourMethod"></trumbowyg>
  • 💡 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 / value 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=""></script>

<!-- Editor itself -->
<script src=""></script>
<link href="" rel="stylesheet">

<!-- Vue js -->
<script src=""></script>
<!-- Lastly add this package -->
<script src=""></script><
  // Initialize as global component
  Vue.component('Trumbowyg', VueTrumbowyg.default);


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

Download Details:

Author: ankurk91


Source Code:

#vuejs #vue #javascript

Vue.js component for Trumbowyg WYSIWYG editor
12.55 GEEK