Nationwide Polyamorous Matrimony

npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript.Learn more »

vue-trumbowyg

3.4.2 • Public • Published

Vue Trumbowyg

downloads npm-version github-tag license

Vue.js component for Trumbowyg WYSIWYG editor

Demo on JSFiddle

Installation

# npm 
npm install vue-trumbowyg 
 
# yarn 
yarn add 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

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

install

npm i vue-trumbowyg

Downloadsweekly downloads

1,574

version

3.4.2

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability