Get new jQuery plugins just once a week

×

ContentTools

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.
Images
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.
History
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.
Properties
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

Download

Example

ContentTools js library

WYSIWYG

ContentTools

Build Status Join the chat at https://gitter.im/GetmeUK/ContentTools

A JS library for building WYSIWYG editors for HTML content.

Demo

Install

Using bower

bower install --save ContentTools

Using npm

npm install --save ContentTools

Building

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

git clone https://github.com/GetmeUK/ContentTools.git
cd ContentTools
npm install

Install Sass (if not already installed):

gem install sass

Then run grunt build to build the project.

Testing

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

git clone https://github.com/pivotal/jasmine.git
mkdir ContentTools/jasmine
mv jasmine/dist/jasmine-standalone-2.0.3.zip ContentTools/jasmine
cd ContentTools/jasmine
unzip jasmine-standalone-2.0.3.zip

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:

http://cdn.jsdelivr.net/contenttools/{verision}/{file}

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

http://cdn.jsdelivr.net/contenttools/1.3.1/content-tools.min.js

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.

Documentation

Full documentation is available at http://getcontenttools.com/api/content-tools

Where to post...

Stolen almost in it's entirety from this post on meta.stackexchange.com

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.

ContentTools

Related posts:

editable-table
jsPanel
simple-calendar

To install using Bower
bower install ContentTools

ContentTools js library

http://jquer.in/wp-content/uploads/2015/09/ContentTools.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever