Lightweight HTML5 WYSIWYG Editor Plugin For jQuery - Trumbowyg.js

Lightweight HTML5 WYSIWYG Editor Plugin For jQuery - Trumbowyg.js
File Size: 759 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.
  • 40+ 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 a language JavaScript files of your choice in the webpage. Available languages:

  • ar Arabic
  • bg Bulgarian language
  • by Belarusian
  • ca Catalan
  • cs Czech
  • da Danish
  • de German
  • el Greek
  • en English
  • es Spanish
  • es_ar Spanish (Argentina)
  • fa Persian
  • fi Finnish
  • fr French
  • he Hebrew
  • hr Croatian
  • hu Hungarian
  • id Indonesian
  • it Italian
  • ja Japanese
  • ko Korean
  • lt Lithuanian
  • mn Mongolian
  • my Malaysian
  • nl Dutch
  • no_nb.js Norwegian Bokmål
  • ph Filipino
  • pl Polish
  • pt Portuguese
  • pt_br Portuguese Brazilian
  • ro Romanian
  • rs Serbian (Cyrlic)
  • rs_latin Serbian (Latin)
  • ru Russian
  • sk Slovak
  • sl 
  • sq Albanian
  • sv Swedish
  • th Thai
  • tr Turkis
  • ua Ukrainian
  • vi Vietnamese
  • zh_cn Simplified Chinese
  • zh_tw Traditional Chinese
<script src="plugins/plugin-name.js"></script>
<script src="langs/language-name.js"></script>

3. Load a plugin of your choice in the webpage. Available plugins:

  • trumbowyg.allowtagsfrompaste.js: Cleans tags from pasted text, whilst allowing several specified tags. Must be set to FALSE since it was applied prior to pasteHandlers, or else it will be useless. It is most advisable to use along with the cleanpaste plugin, or else you'd end up with dirty markup.
  • rumbowyg.base64.js: Addes image base64 support.
  • trumbowyg.cleanpaste.js: Performs a "cleaning" on any paste, in particular it will clean pasted content of microsoft word document tags and classes.
  • trumbowyg.colors.js: Color picker.
  • trumbowyg.emoji.js: Emoji picker.
  • trumbowyg.fontfamily.js: Font Family picker.
  • trumbowyg.fontsize.js: Sets font size from a dropdown.
  • trumbowyg.giphy.js: Searchs and picks gif to insert from Giphy.
  • trumbowyg.highlight.js: Code highlighter.
  • trumbowyg.history.js: Enables history for undo and redo functionality.
  • trumbowyg.insertaudio.js: Allows you to insert audio files.
  • trumbowyg.lineheight.js: Custom line height.
  • trumbowyg.mathMl.js: MathML plugin.
  • trumbowyg.mention.js: Mentions an user from a source list.
  • trumbowyg.noembed.js: Embeds any content from a link using noembed.com API.
  • trumbowyg.pasteembed.js: Url paste to iframe with noembed.
  • trumbowyg.pasteimage.js: Basic base64 paste.
  • trumbowyg.preformatted.js: Wraps your code with <pre> tags.
  • trumbowyg.resizimg.js: Resizes images (preserving aspect ratio) by dragging their bottom-right corner.
  • trumbowyg.ruby.js: Ruby text plugin.
  • trumbowyg.specialchars.js: Unicode characters picker.
  • trumbowyg.table.js: Table plugin.
  • trumbowyg.template.js: Manages HTML templates.
  • trumbowyg.upload.js: Upload plugin.
<script src="plugins/plugin-name/plugin-name.js"></script>
$('#demo').trumbowyg({
  plugins: {
    plugin-name: {
      // plugin options here
    }
  }
});

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

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

5. All default options to customize your WYSIWYG Editor.

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

  fixedBtnPane: false,
  fixedFullWidth: false,
  autogrow: false,
  autogrowOnEnter: false,
  imageWidthModalEdit: false,

  prefix: 'trumbowyg-',

  semantic: true,
  semanticKeepAttributes: false,
  resetCss: false,
  removeformatPasted: false,
  tabToIndent: false,
  tagsToRemove: [],
  tagsToKeep: ['hr', 'img', 'embed', 'iframe', 'input'],
  btns: [
    ['viewHTML'],
    ['undo', 'redo'], // Only supported in Blink browsers
    ['formatting'],
    ['strong', 'em', 'del'],
    ['superscript', 'subscript'],
    ['link'],
    ['insertImage'],
    ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
    ['unorderedList', 'orderedList'],
    ['horizontalRule'],
    ['removeformat'],
    ['fullscreen']
  ],
  // For custom button definitions
  btnsDef: {},
  changeActiveDropdownIcon: false,

  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: [],

  plugins: {},
  urlProtocol: false,
  minimalLinks: false
});

6. All defaults options to customize the optional plugins.

// trumbowyg.allowtagsfrompaste.js
// When empty, all tags are allowed making this plugin useless
// If you want to remove all tags, use removeformatPasted core option instead
allowedTags: [],
// List of tags which can be allowed
removableTags: [
  'a',
  'abbr',
  'address',
  'b',
  'bdi',
  'bdo',
  'blockquote',
  'br',
  'cite',
  'code',
  'del',
  'dfn',
  'details',
  'em',
  'h1',
  'h2',
  'h3',
  'h4',
  'h5',
  'h6',
  'hr',
  'i',
  'ins',
  'kbd',
  'mark',
  'meter',
  'pre',
  'progress',
  'q',
  'rp',
  'rt',
  'ruby',
  's',
  'samp',
  'small',
  'span',
  'strong',
  'sub',
  'summary',
  'sup',
  'time',
  'u',
  'var',
  'wbr',
  'img',
  'map',
  'area',
  'canvas',
  'figcaption',
  'figure',
  'picture',
  'audio',
  'source',
  'track',
  'video',
  'ul',
  'ol',
  'li',
  'dl',
  'dt',
  'dd',
  'table',
  'caption',
  'th',
  'tr',
  'td',
  'thead',
  'tbody',
  'tfoot',
  'col',
  'colgroup',
  'style',
  'div',
  'p',
  'form',
  'input',
  'textarea',
  'button',
  'select',
  'optgroup',
  'option',
  'label',
  'fieldset',
  'legend',
  'datalist',
  'keygen',
  'output',
  'iframe',
  'link',
  'nav',
  'header',
  'hgroup',
  'footer',
  'main',
  'section',
  'article',
  'aside',
  'dialog',
  'script',
  'noscript',
  'embed',
  'object',
  'param'
]

// trumbowyg.colors.js
colorList: [
  'ffffff', '000000', 'eeece1', '1f497d', '4f81bd', 'c0504d', '9bbb59', '8064a2', '4bacc6', 'f79646', 'ffff00',
  'f2f2f2', '7f7f7f', 'ddd9c3', 'c6d9f0', 'dbe5f1', 'f2dcdb', 'ebf1dd', 'e5e0ec', 'dbeef3', 'fdeada', 'fff2ca',
  'd8d8d8', '595959', 'c4bd97', '8db3e2', 'b8cce4', 'e5b9b7', 'd7e3bc', 'ccc1d9', 'b7dde8', 'fbd5b5', 'ffe694',
  'bfbfbf', '3f3f3f', '938953', '548dd4', '95b3d7', 'd99694', 'c3d69b', 'b2a2c7', 'b7dde8', 'fac08f', 'f2c314',
  'a5a5a5', '262626', '494429', '17365d', '366092', '953734', '76923c', '5f497a', '92cddc', 'e36c09', 'c09100',
  '7f7f7f', '0c0c0c', '1d1b10', '0f243e', '244061', '632423', '4f6128', '3f3151', '31859b', '974806', '7f6000'
],
foreColorList: null, // fallbacks on colorList
backColorList: null, // fallbacks on colorList
allowCustomForeColor: true,
allowCustomBackColor: true,
displayAsList: false,

// trumbowyg.fontfamily.js
fontList: [
  {name: 'Arial', family: 'Arial, Helvetica, sans-serif'},
  {name: 'Arial Black', family: 'Arial Black, Gadget, sans-serif'},
  {name: 'Comic Sans', family: 'Comic Sans MS, Textile, cursive, sans-serif'},
  {name: 'Courier New', family: 'Courier New, Courier, monospace'},
  {name: 'Georgia', family: 'Georgia, serif'},
  {name: 'Impact', family: 'Impact, Charcoal, sans-serif'},
  {name: 'Lucida Console', family: 'Lucida Console, Monaco, monospace'},
  {name: 'Lucida Sans', family: 'Lucida Sans Uncide, Lucida Grande, sans-serif'},
  {name: 'Palatino', family: 'Palatino Linotype, Book Antiqua, Palatino, serif'},
  {name: 'Tahoma', family: 'Tahoma, Geneva, sans-serif'},
  {name: 'Times New Roman', family: 'Times New Roman, Times, serif'},
  {name: 'Trebuchet', family: 'Trebuchet MS, Helvetica, sans-serif'},
  {name: 'Verdana', family: 'Verdana, Geneva, sans-serif'}
]

// trumbowyg.fontsize.js
sizeList: [
  'x-small',
  'small',
  'medium',
  'large',
  'x-large'
],
allowCustomSize: true

// trumbowyg.giphy.js
{
  rating: 'g',
  apiKey: null,
};

// trumbowyg.insertaudio.js
src: {
  label: 'URL',
  required: true
},
autoplay: {
  label: 'AutoPlay',
  required: false,
  type: 'checkbox'
},
muted: {
  label: 'Muted',
  required: false,
  type: 'checkbox'
},
preload: {
  label: 'preload options',
  required: false
}

// trumbowyg.lineheight.js
sizeList: [
  '0.9',
  'normal',
  '1.5',
  '2.0'
]

// trumbowyg.mention.js
source: [],
formatDropdownItem: formatDropdownItem,
formatResult: formatResult

// trumbowyg.noembed.js
proxy: 'https://noembed.com/embed?nowrap=on',
urlFiled: 'url',
data: [],
success: undefined,
error: undefined

// trumbowyg.pasteembed.js
enabled: true,
endpoints: [
  'https://noembed.com/embed?nowrap=on',
  'https://api.maxmade.nl/url2iframe/embed'
]

// trumbowyg.resizimg.js
minSize: 32,
step: 4,

// trumbowyg.specialchars.js
symbolList: [
  // currencies
  '0024', '20AC', '00A3', '00A2', '00A5', '00A4', '2030', null,
  // legal signs
  '00A9', '00AE', '2122', null,
  // textual sign
  '00A7', '00B6', '00C6', '00E6', '0152', '0153', null,
  '2022', '25CF', '2023', '25B6', '2B29', '25C6', null,
  //maths
  '00B1', '00D7', '00F7', '21D2', '21D4', '220F', '2211', '2243', '2264', '2265'
]

// trumbowyg.table.js
rows: 8,
columns: 8,
styler: 'table'

// trumbowyg.upload.js
serverPath: '',
fileFieldName: 'fileToUpload',
data: [],                       // Additional data for ajax [{name: 'key', value: 'value'}]
headers: {},                    // Additional headers
xhrFields: {},                  // Additional fields
urlPropertyName: 'file',        // How to get url from the json response (for instance 'url' for {url: ....})
statusPropertyName: 'success',  // How to get status from the json response 
success: undefined,             // Success callback: function (data, trumbowyg, $modal, values) {}
error: undefined,               // Error callback: function () {}
imageWidthModalEdit: false      // Add ability to edit image width

7. API methods.

// Create a Modal window
var $modal = $('#demo').trumbowyg('openModal', {
    title: 'Modal Title',
    content: 'HTML Content Here'
});
// Close the current modal box
$('#demo').trumbowyg('closeModal');

// Save current range
$('#demo').trumbowyg('saveRange');

// Restore last saved range
$('#demo').trumbowyg('restoreRange');
            
// Get selection range
var range = $('#demo').trumbowyg('getRange');
            
// Get last saved range text
var text = $('#demo').trumbowyg('getRangeText');

// Get HTML content
$('#demo').trumbowyg('html');

// Set HTML content
$('#demo').trumbowyg('html', "<p>Your content here</p>");

// Clear the editor
$('#demo').trumbowyg('empty');

// Enable/disable the editor
$('#demo').trumbowyg('disable');
$('#demo').trumbowyg('enable');
$('#demo').trumbowyg('toggle');

// Destroy the editor
$('#demo').trumbowyg('destroy');

8. Events.

$('#demo').trumbowyg({
  // options here
})
// event handlers here
.on('tbwfocus', function(){ 
  // on focus
})
.on('tbwblur', function(){ 
  // on blur
})
.on('tbwinit', function(){ 
  // on init
})
.on('tbwchange', function(){ 
  // on change
})
.on('tbwresize', function(){ 
  // on resize
})
.on('tbwpaste', function(){ 
  // on paste
})
.on('tbwopenfullscreen', function(){ 
  // in the fullscreen mode
})
.on('tbwclosefullscreen', function(){ 
  // turn off the offscreen mode
})
.on('tbwclose', function(){ 
  // on close
})

Changelog:

v2.19.0 (2019-09-02)

  • Set list-style decimal for ordoned lists in resetCss
  • Avoid 1px move on editor switch
  • Disable word wrapping in dropdowns
  • Restore close modal on escape
  • Add missing skipTrumbowyg to execCmd API binding
  • Fix Thai key from de to th
  • Add Add row above and change Add columns to Add columns to the left/right
  • Fix Font family bug when selecting a font with a space in the name
  • Fix color minification issue by using rgba instead of HEX+alpha

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