Vue.js component for Trumbowyg WYSIWYG editor
Branch: master
Clone or download
Latest commit 1058f9d Feb 8, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Cleanup Jul 14, 2018
examples Switch to webpack-dev-server Nov 18, 2018
src No longer need this hack since v2.12.0 Nov 25, 2018
.babelrc upgrade deps Dec 18, 2018
.editorconfig Upgrade deps Sep 18, 2018
.gitattributes Upgrade deps Sep 18, 2018
.gitignore Upgrade deps Sep 18, 2018
CHANGELOG.md Version 3.4.1 Nov 28, 2018
LICENSE.txt Housekeeping Jan 13, 2018
README.md Upgrade deps Feb 8, 2019
package.json Upgrade deps Feb 8, 2019
webpack.config.dev.js upgrade deps Dec 18, 2018
webpack.config.js upgrade deps Dec 18, 2018
yarn.lock Upgrade deps Feb 8, 2019

README.md

Vue Trumbowyg

downloads npm-version github-tag license

Vue.js 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: 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';
  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)

<!-- Editor dependencies-->
<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.6"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/vue-trumbowyg@3"></script><
<script>
  // Initialize as global component
  Vue.component('Trumbowyg', VueTrumbowyg.default);
</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