Skip to content
This repository has been archived by the owner. It is now read-only.

ankurk91/vue-trumbowyg

master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
Oct 31, 2020
src
Oct 31, 2020
Oct 31, 2020
Sep 18, 2018
Oct 31, 2020
Jan 13, 2018
Oct 31, 2020
Oct 31, 2020
Oct 31, 2020

Vue Trumbowyg

downloads npm-version github-tag build license

Vue.js component for Trumbowyg WYSIWYG editor

Demo or JSFiddle

Version matrix

Vue.js version Package version Branch
2.x 3.x 3.x
3.x 4.x master

Installation

# yarn
yarn add vue-trumbowyg

# npm
npm install 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
  • Vue v3.x

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';
  app.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>
  • 💡 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 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="https://cdn.jsdelivr.net/npm/jquery@3.5"></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@3"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/vue-trumbowyg@4"></script><
<script>
  // Initialize as global component
  yourAppInstance.component('Trumbowyg', VueTrumbowyg.default);
</script>

Troubleshoot

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

Changelog

Please see CHANGELOG for more information what has changed recently.

License

MIT License