Nitrogenous Polymorphic Molecule

    vue-trumbowyg

    4.0.0 • Public • Published

    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

    Install

    npm i vue-trumbowyg

    DownloadsWeekly Downloads

    1,985

    Version

    4.0.0

    License

    MIT

    Unpacked Size

    27.1 kB

    Total Files

    9

    Last publish

    Collaborators

    • ankurk91