Press "Enter" to skip to content

An Amazing Lightweight WYSIWYG JavaScript Editor | Trumbowyg.js

Trumbowyg is a simple and lightweight WYSIWYG editor, weighing only 20 KB minified (8 KB gzip) for faster page loading. The jQuery-based HTML5 WYSIWYG Rich Text Editor for modern web/mobile apps. Trumbowyg is an open-source project licensed by the Massachusetts Institute of Technology and is completely free to use.

wysiwyg editor plugin, rich text editor html5, lightweight wysiwyg html editor, rich text editor html5 free, rich text editor jquery plugin, html simple rich text editor

How to make use of it:

Installation:

# NPM
$ npm install trumbowyg

# Bower
$ bower install trumbowyg

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

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

2. Load language JavaScript files of your alternative within the webpage.

<script src="plugins/plugin-name.js"></script>
<script src="langs/language-name.js"></script>

3. Load a plugin of your alternative within the webpage.

<script src="plugins/plugin-name/plugin-name.js"></script>
$('#demo').trumbowyg({
  plugins: {
    plugin-name: {
      // plugin options here
    }
  }
});

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

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

5. All default choices 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 default choices to customize the optionally available 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,
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 strategies.

// 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
})

Lightweight HTML5 WYSIWYG Editor Plugin, Trumbowyg WYSIWYG editor Github, best wysiwyg editor, jquery rich text editor with image upload


See Demo And Download

Official Website(Alex-D): Click Here

This superior jQuery/javascript plugin is developed by Alex-D. For extra Advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.