A lightweight WYSIWYG editor

Light, translatable and customisable jQuery plugin.
Beautiful design, generates semantic code, comes with a powerful API.

Download Documentation
bower install trumbowyg
npm install trumbowyg

HTML5 & semantic

Editor and generated code are optimized for HTML5 support. Compatible with all recents browsers like IE9+, Chrome, Opera and Firefox.

Fast & lightweight

All existing WYSIWYG editors are larger than 45kB. Trumbowyg is only 20kB which means faster page loading. No useless features, just the necessary ones to generate clean, semantic code.

Customizable

Options and design are entirely configurable to suit your needs. However, the default design is compatible with Retina display and optimized for a great and simple user experience.

Getting Started

Download the package
Download
or
Via a package manager
bower install trumbowyg npm install trumbowyg

Installation

First, if you don't already do it, load jQuery at bottom of <body> like so: 


<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.1.1.min.js"><\/script>')</script>

Trumbowyg require jQuery >= 1.8

After these lines, you have to load Trumbowyg. 


<script src="bower_components/trumbowyg/dist/trumbowyg.min.js"></script>

Don't forget to load Trumbowyg CSS in the <head>, or load your own style for the editor. 


<link rel="stylesheet" href="bower_components/trumbowyg/dist/ui/trumbowyg.min.css">

Basics

This the minimal code to transform a simple div into the amazing WYSIWYG editor which is Trumbowyg. 


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

If you want to set options to Trumbowyg, add an object which contains your options as parameters. 


$('#trumbowyg-demo').trumbowyg({
    btns: ['strong', 'em', '|', 'insertImage'],
    autogrow: true
});

View all options on the documentation page.

SVG icons issue?

If icons do not load:

  • check if you are in HTTP(S) protocol;
  • check if you did not have strong problem;

If your problem is not solved by these tips, check the SVG icons documentation section.

30+ Languages

Read the documentation to apply a localization

You can create your own localization file and submit it in a pull request :)

Plugins

Extends Trumbowyg

You can create your own plugins for Trumbowyg and propose them via pull requests on the Github repository. These plugins are given by community, not official plugins. See up to date plugin list.

Packages

Ready for use Web frameworks and CMS packages

You can create your own package for Trumbowyg or use a ready for use. This is the full list of non-official know packages using Trumbowyg.

Buy me a beer