Vue.js component for Trumbowyg WYSIWYG editor
JavaScript Vue
Clone or download
Latest commit 7e5d8c8 Aug 9, 2018
Permalink
Failed to load latest commit information.
.github Cleanup Jul 14, 2018
examples Emit blur event Aug 9, 2018
src Emit blur event Aug 9, 2018
.babelrc Update deps May 19, 2018
.editorconfig Use jQuery.extend instead of Object.assign Dec 23, 2017
.gitattributes Remove props Oct 19, 2017
.gitignore Housekeeping Jan 13, 2018
CHANGELOG.md Version 3.4.0 Aug 9, 2018
LICENSE.txt Housekeeping Jan 13, 2018
README.md Upgrade deps Aug 9, 2018
package.json Version 3.4.0 Aug 9, 2018
webpack.config.dev.js Cleanup Jul 14, 2018
webpack.config.js Update docs Jul 1, 2018
yarn.lock Upgrade deps Aug 9, 2018

README.md

Vue Trumbowyg

vue-js downloads npm-version github-tag license

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://cdn.jsdelivr.net/npm/jquery@3.3"></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@2.5"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/vue-trumbowyg@3"></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

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:9000 in your default web browser

Changelog

Please see CHANGELOG for more information what has changed recently.

License

MIT License