ykankaya / vue-trumbowyg

Vue.js component for Trumbowyg WYSIWYG editor

Vue-Trumbowyg

Vue.js v2.x component for Trumbowyg WYSIWYG editor

Demo on JSFiddle

Installation

# npm
npm install vue-trumbowyg --save

# Yarn
yarn add vue-trumbowyg

Features

• Reactive v-model value
  • You can change editor value programmatically
• Emits all possible events
• Supports most plugins
• Play nice with vee-validate validation library

Requirements

• jQuery >=1.8

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: '',
        config: {
          // Any option from 
          // https://alex-d.github.io/Trumbowyg/documentation/#basic-options
        }       
      }
    },
    components: {
      trumbowyg
    }
  }
</script>

As plugin

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

Available props

The component accepts these props:

Attribute	Type	Default	Description
v-model / value	String / null	null	Set or Get editor value (required)
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)

• Acquire required files

<!-- Editor dependency-->
<script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>

<!-- Editor itself -->
<script src="https://unpkg.com/trumbowyg@2/dist/trumbowyg.min.js"></script>
<link href="https://unpkg.com/trumbowyg@2/dist/ui/trumbowyg.min.css" rel="stylesheet">

<!-- Vue js -->
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<!-- Lastly add this package -->
<script src="https://unpkg.com/vue-trumbowyg"></script>

• Use the component anywhere in your app like this

<!-- index.html -->
<div id="app">  
   <trumbowyg v-model="content" class="form-control"></trumbowyg>  
</div>
<script>
  // Initialize as global component
  Vue.component('Trumbowyg', VueTrumbowyg.default);
  
  new Vue({
    el: '#app',
    data: {
      content: null,      
    },    
  });
</script>

Troubleshoot

• Read setup guide

Run examples on your localhost

• Clone this repo
• Make sure you have node-js >=6.10 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:8000 in your default web browser

Changelog

Please see CHANGELOG for more information what has changed recently.

License

MIT License