Lightweight HTML5 WYSIWYG Editor Plugin For jQuery - Trumbowyg.js

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

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.

See Also:

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
  • bn Bangla
  • by Belarusian
  • ca Catalan
  • cs Czech
  • da Danish
  • de German
  • el Greek
  • en English
  • es Spanish
  • es_ar Spanish (Argentina)
  • et Estonian
  • 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.indent.js: Button indent.
  • 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-',
  tagClasses: {},

  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,
  defaultLinkTarget: undefined
});

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,
  throttleDelay: 300,
  noResultGifUrl: 'https://media.giphy.com/media/2Faz9FbRzmwxY0pZS/giphy.gif'
};

// 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,
allowHorizontalResize: true,
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'
],
backgroundColorList: null, // fallbacks on colorList
allowCustomBackgroundColor: true,
displayBackgroundColorsAsList: false,
borderColorList: null, // fallbacks on colorList
allowCustomBorderColor: true,
displayBorderColorsAsList: false,
dropdown: [
  {
      title: 'tableRows',
      buttons: [
          'tableAddHeaderRow',
          'tableAddRowAbove',
          'tableAddRow',
          'tableDeleteRow',
      ],
  },
  {
      title: 'tableColumns',
      buttons: [
          'tableAddColumnLeft',
          'tableAddColumn',
          'tableDeleteColumn',
      ],
  },
  {
      title: 'tableVerticalAlign',
      buttons: [
          'tableVerticalAlignTop',
          'tableVerticalAlignMiddle',
          'tableVerticalAlignBottom',
     ],
  },
  {
      title: 'tableOthers',
      buttons: [
          // Cell merge/split
          'tableMergeCells',
          'tableUnmergeCells',
          'tableDestroy',
      ]
  }
],

// 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
})
.on('tbwmodalopen', function(){ 
  // on modal open
})
.on('tbwmodalclose', function(){ 
  // on modal close
})

Changelog:

v2.28.0 (2023-03-07)

  • Bugfix

v2.27.3 (2023-03-01)

  • Bugfix

v2.27.0/1/2 (2023-02-28)

  • Table plugin rework
  • Feat: change editor HTML structure to allow overlays
  • Feat: add .trumbowyg-icons class for plugin SVG Sprites
  • Upgrade: use Array.isArray instead of deprecated $.isArray
  • Add Azerbaijani support
  • Update Catalan and Spanish core and plugins translations
  • Bugfixes

v2.26.0 (2022-11-15)

  • Breaking Change: Replace defaultLinkTarget option with linkTargets list
  • Feat: Add the ability to create select in modal
  • Feat: Add a select to pick the link target in the insert link modal
  • Bugfixes

v2.25.2 (2022-08-12)

  • Add Russian translations to all plugin
  • Add Belarusian translations to all plugin
  • Fix: do not disable removeformatPasted when the plugin is disabled itself
  • Prevent Firefox from nesting multiple spans on font-size changes
  • Fixes "Cannot read property '1' of null"
  • Make MathML editable, even after toggle HTML view

v2.25.1 (2021-07-15)

  • Prevent error when range does not exist

v2.25.0 (2021-07-05)

  • Fixed: Disable buttons when the editor is disabled

v2.24.0 (2021-06-08)

  • Fixed: Disable buttons when the editor is disabled
  • Add Estonian support
  • Add Bangla support
  • Add Spanish translations to table plugin
  • Add Turkish translations to some plugins
  • Plugins update

v2.23.0 (2020-12-07)

  • Add tagClasses option to add classes to any tag
  • Add Plugin indent: button indent & outdent

v2.22.0 (2020-11-26)

  • Lot of fixes

v2.21.0 (2019-12-31)

  • Properly clean body events on destroy
  • Add resize handle with canvas

v2.20.0 (2019-11-05)

  • Add tbwmodalopen and tbwmodalclose events
  • Add defaultLinkTarget option
  • Fixed Wrap cursor in p when empty
  • Add throttleDelay option and noResultGifUrl option to Giphy plugin

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.