Lightweight HTML5 WYSIWYG Editor Plugin For jQuery - Trumbowyg.js

Lightweight HTML5 WYSIWYG Editor Plugin For jQuery - Trumbowyg.js
File Size: 150 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Trumbowyg.js is a lightweight, customizable, extendable, semantic, cross-browser and jQuery based HTML5 WYSIWYG rich text editor for modern web/mobile applications.

More features:

  • 11 plugins: Base64, Font Clean paste, color picker, emoji picker, insert audio, noEmbed, basic base64 paste, preformatted, table, template and file upload.
  • 37 languages (See blow).
  • SVG based editor icons.
  • Works perfectly on most frameworks: Angular, React, VueJS, Ruby on Rails, etc.

Installation:

# NPM
$ npm install trumbowyg

# Bower
$ bower install trumbowyg

How to use it:

1. Insert the jQuery Trumbowyg plugin files into your web project as this:

<link rel="stylesheet" href="trumbowyg.min.css">
<script src="jquery.min.js"></script>
<script src="trumbowyg.min.js"></script>

2. Load the Trumbowyg's plugin and language JavaScript files of your choice in the webpage. Available languages:

  • ar Arabic
  • es_ar Spanish (Argentina)
  • fa Persian
  • he Hebrew
  • id Indonesian
  • ja Japanese
  • ko Korean
  • my Malaysian
  • ca Catalan
  • cs Czech
  • da Danish
  • de German
  • el Greek
  • en English
  • es Spanish
  • fi Finnish
  • fr French
  • hu Hungarian
  • it Italian
  • nl Dutch
  • pl Polish
  • pt Portuguese
  • ro Romanian
  • rs Serbian (Cyrlic)
  • rs_latin Serbian (Latin)
  • sk Slovak
  • sv Swedish
  • ua Ukrainian
<script src="plugins/plugin-name.js"></script>
<script src="langs/language-name.js"></script>

3. Call the plugin on a placeholder element to generate a default WYSIWYG Editor.

$('#demo').trumbowyg();

4. Defaults options to customize your WYSIWYG Editor.

$('#demo').trumbowyg({
  lang: 'en',

  fixedBtnPane: false,
  fixedFullWidth: false,
  autogrow: false,

  prefix: 'trumbowyg-',

  semantic: true,
  resetCss: false,
  removeformatPasted: false,
  tagsToRemove: [],

  btnsGrps: {
      design: ['bold', 'italic', 'underline', 'strikethrough'],
      semantic: ['strong', 'em', 'del'],
      justify: ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
      lists: ['unorderedList', 'orderedList']
  },
  btns: [
      ['viewHTML'],
      ['undo', 'redo'],
      ['formatting'],
      'btnGrp-semantic',
      ['superscript', 'subscript'],
      ['link'],
      ['insertImage'],
      'btnGrp-justify',
      'btnGrp-lists',
      ['horizontalRule'],
      ['removeformat'],
      ['fullscreen']
  ],
  // For custom button definitions
  btnsDef: {},

  inlineElementsSelector: 'a,abbr,acronym,b,caption,cite,code,col,dfn,dir,dt,dd,em,font,hr,i,kbd,li,q,span,strikeout,strong,sub,sup,u',

  pasteHandlers: [],

  imgDblClickHandler: function () {
      var $img = $(this),
          src = $img.attr('src'),
          base64 = '(Base64)';

      if (src.indexOf('data:image') === 0) {
          src = base64;
      }

      t.openModalInsert(t.lang.insertImage, {
          url: {
              label: 'URL',
              value: src,
              required: true
          },
          alt: {
              label: t.lang.description,
              value: $img.attr('alt')
          }
      }, function (v) {
          if (v.src !== base64) {
              $img.attr({
                  src: v.src
              });
          }
          $img.attr({
              alt: v.alt
          });
          return true;
      });
      return false;
  },

  plugins: {}
});

This awesome jQuery plugin is developed by Alex-D. For more Advanced Usages, please check the demo page or visit the official website.