Vue Trumbowyg Save Abandoned

Vue.js component for Trumbowyg WYSIWYG editor :memo:

Project README

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>
  • :bulb: 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/[email protected]"></script>

<!-- Editor itself -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/ui/trumbowyg.min.css" rel="stylesheet">

<!-- Vue js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></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

Open Source Agenda is not affiliated with "Vue Trumbowyg" Project. README Source: ankurk91/vue-trumbowyg
Stars
232
Open Issues
0
Last Commit
2 years ago
License
MIT

Open Source Agenda Badge

Open Source Agenda Rating