July 15, 2024

ContentTools: A Beautiful JS Library for WYSIWYG Web Editing

CMS engines come packed with their own WYSIWYG editors that include the most prominent features you could ever need. WordPress is one great example.

But often times developers would rather edit text directly in the page rather than move around to the administration panel. Back 10 years ago this was a practical impossibility, but now with the prevalence of Ajax it’s easier than ever before.

ContentTools is a brand new open source JavaScript library for performing this exact task. You simply embed the script into your page and target the API with JS codes on whichever page(s) offer editing. You’ll be able to manipulate text, upload images, and save all your changes directly to a database.

ContentTools editing webapp

To learn more there’s a great tutorials page offering a basic introduction to the platform. So far it’s still a rather new product which has yet to garner integration from major development platforms. However the functionality is stellar and would be superb if combined with user authentication.

Take a look over the getting started guide to understand more about how ContentTools works & operates.

Since the whole library is open source you’re free to manipulate it any way you’d like. If you want to help out visit the ContentTools repo on GitHub to fork your own copy or work into the support threads.

Those who are unmoved should play around in the live demo to see how it all functions. The lib is based on Ajax commands so everything can operate without a single page refresh. Definitely a cool project that I hope to read more about in the coming years.

Jake is a creative writer and UI designer by trade. You can follow him on twitter @jakerocheleau or learn more at his personal website JakeRocheleau.com.

One Comment

  1. zackrabie Reply

    It would be really cool if it could allow only users who have logged in to be able to edit the page. I’m a big fan of this Front-End content editing.

Leave a Reply

Your email address will not be published. Required fields are marked *