Get new jQuery plugins just once a week



FavoriteLoadingAdd to favorites

September 17, 2015

ContentTools | A JS library for building WYSIWYG editors for HTML content.

ContentTools is a javascript library for building WYSIWYG editors for HTML content.

Other than typing, there are two ways to add new content to the page; pressing the return key while editing a section of text (except pre-formatted text) or using one of the tools in the toolbox, for example to insert an image, video, table, etc.
Some tools can also convert content, for example selecting a paragraph of text and clicking the list tool will convert the paragraph to a new list.
Pre-formatted blocks of text can be converted back to standard text using the paragraph tool, however if you have a pre-formatted section of text and want to add a new paragraph after it you can hold down the ctrl key (command on Apple) whilst clicking the paragraph tool to achieve this.
Drag and place content Click and hold the image to drag
Each block of content on the page can be dragged to a new location. Non-text based elements such as images and videos can be dragged by clicking in the center of the element and dragging.
For text elements you need to click and hold. This pause is implemented to allow you to freely select sections of text using the mouse without triggering the drag behaviour.
If you want to drag a list or table then click and hold a child item or row. Continue to hold until the helper title changes to list or table.
When you drag an element over another, arrows will appear indicating where your content will be placed once you release it. All elements can be placed above or below others, while some elements such as images and videos can be placed to the left or right of other content.
Resizing images and videos
To resize an image or video, click and hold in any corner then drag to adjust the size as required. While you’re resizing, the dimensions will be displayed in the top right hand corner of the element.

Deleting content
Some elements are automatically removed when they become empty of content, for example text elements and list items will remove themselves when empty, as soon as they lose focus. Other elements like images and videos can be deleted using the delete tool in the toolbox or by pressing the delete key.
By default the delete tool will remove an item in a list or a row in a table, but if you hold down the ctrl key (command on Apple) when clicking the tool, the entire list or table will be removed.
The editor provides an interface for images to be uploaded, rotated and cropped before being inserted into the page. For the demo page all this functionality is faked as we haven’t provided a server-side API to support it, but you can get an idea of what’s possible (see the Handling image uploads tutorial).
Static content profile for Anthony Blackshaw at Stack Overflow, Q&A for professional and enthusiast programmers
Sometimes you want to include content within the page that shouldn’t be editable – we call this static content. As an example I’ve included my Stack Overflow user flair on the right here. Whilst the static element can’t be edited, the content around it can be.
The editor supports unlimited undo/redo for the editing session. Either use the undo/redo tools in the toolbox or the standard keyboard short-cuts.
The properties of an element can be viewed and edited in the properties dialog. The dialog is launched when a tag in the inspector bar is clicked.
The inspector bar may show a single tag, such as a p when a paragraph is selected, or multiple tags when the element is nested for example table > tbody > tr > td when a table cell is selected.
The properties dialog has 3 tabs (left to right):
– Styles
– Attributes
– Code (HTML)

Created by getme



ContentTools js library



Build Status Join the chat at

A JS library for building WYSIWYG editors for HTML content.



Using bower

bower install --save ContentTools

Using npm

npm install --save ContentTools


To build the library you'll need to use Grunt. First install the required node modules (grunt-cli must be installed):

git clone
cd ContentTools
npm install

Install Sass (if not already installed):

gem install sass

Then run grunt build to build the project.


To test the library you'll need to use Jasmine. First install Jasmine:

git clone
mkdir ContentTools/jasmine
mv jasmine/dist/ ContentTools/jasmine
cd ContentTools/jasmine

Then open ContentTools/SpecRunner.html in a browser to run the tests.

Alternatively you can use grunt jasmine to run the tests from the command line.

ContentTools via jsdelivr

ContentTools is available via the jsdelivr open source CDN, to reference a file from the ContentTools build directory use the following URL format:{verision}/{file}

For example to access the current primary JavaScript file the URL would be:

As the project's CSS uses relative file paths you will need to either role your own version of CSS from the SASS files (recommended) or override references to fonts/images within your local CSS.


Full documentation is available at

Where to post...

Stolen almost in it's entirety from this post on

Browser support

The current aim is for all the libraries to support IE9+, Chrome and Firefox. Test suites are complete for all the libraries except ContentTools and I'm using Jasmine to check that the tests pass in those browsers.

There will be some visual differences for ContentTools in IE9 as I use CSS animations for some of the UI feedback.

Helpful organizations

ContentTools is developed using a number of tools & services provided for free by nice folks at organizations committed to supporting open-source projects including BrowserStack, GitHub and jsdelivr, Travis CI.


Related posts:

Amplify JS
Papa Parse

To install using Bower
bower install ContentTools

ContentTools js library

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever