General, Tools

Rounding Up the Best Javascript WYSIWYG and Markup Editor

Jul 17, 2009 insic 53 Comments

best WYSIWYG Editor
WYSIWYG Editor is the first requirement if you want to develop a web application which involved HTML editing and you want your user see a real time preview of what they are editing. Most of the available Content Management System and other publishing platform in the web are using WYSIWYG editor for easy page editing. So I will rounding up to you the best JS WYSIWYG editor in the web.

TinyMCE – Javascript WYSIWYG Editor

tinyMCE

TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL by Moxiecode Systems AB. It has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is very easy to integrate into other Content Management Systems.

TinyMCE is my personal choice. I love its flexibility and highly customizable.

TinyMCE Features:

  • Easy to integrate – Only a few lines of code needed.
  • Customizable - Themes and plugins, block invalid elements and force attributes.
  • Browserfriendly - Mozilla, MSIE, FireFox, Opera, Safari and Chrome.
  • Lightweight - PHP/.NET/JSP/Coldfusion GZip compressor, Makes TinyMCE 75% smaller and a lot faster to load.
  • AJAX Compatible – You can easily use AJAX to save and load content!
  • International - Multilanguage support using language packs.
  • Open Source – Free under the LGPL license, millions of ppl help test and improve this editor every day.


FCKeditor

FCKeditor

FCKeditor is a full featured, well-documented & simple to use WYSIWYG HTML text editor. It is lightweight, easy to implement. With an integrated powerful ajax file manager, CKFinder, you can control both the media & content of your web applications.

  • Multi browser compatibility 
  • Outputs XHTML 1.0
  • CSS support for better integration with your web site
  • Font formatting: type, size, color, style, bold, italic, etc
  • Text formatting: alignment, indentation, bullets list, etc
  • Cut, Paste, and Paste as Plain Text, Undo and Redo
  • Paste from Word cleanup with auto detection
  • Link and anchors support
  • Image insertion, with upload and server browsing support
  • Table creation and editing (add, delete rows, etc) – one of the best systems on the market.
  • Table cells editing (size, colors, etc)
  • Form fields
  • Right click context menus support
  • and more…

openWYSIWYG

openWYSIWYG

Setting up openWYSIWYG is so easy, you can quickly turn any <textarea$gt; into a powerful WYSIWYG editor with just a few simple lines of code.

Packed with every rich text editing feature you need, openWYSIWYG gives you total control over formatting your text. The ultimate <textarea$gt; replacement for your content management system.

Features:

  • Powerful Editing Environment
  • Enhanced Table Creation
  • Cross-Browser Compatible
  • Coded Entirely in JavaScript
  • Dropdowns with Formatting Preview
  • Open Source Licensing
  • Sleek User Interface

jwysiwyg

jwysiwyg

This plugin is an inline content editor to allow editing rich HTML content on the fly. It’s an alternative to WYMeditor with much less features. With a small file size less than 17Kb 26Kb total and only 9Kb 18Kb of code and 7Kb packed, the main concept is to keep it simple, not all users need font coloring or create tables, just the basic.

WYMeditor

WYMeditor

WYMeditor’s main concept is to leave details of the document’s visual layout, and to concentrate on its structure and meaning, while trying to give the user as much comfort as possible (at least as WYSIWYG editors).

WYMeditor has been created to generate perfectly structured XHTML strict code, to conform to the W3C XHTML specifications and to facilitate further processing by modern applications.

Features:

  • XHTML strict + CSS compliant
  • No font or text formatting, sizes or colors – WYMeditor is CSS-based
  • Designed to be easy to integrate into your application
  • No installation needed – this is 100% Javascript code – no plugin, no extension
  • Will remain as simple as possible
  • We focus on well-tested code, stability and usability before adding new features
  • Image, link, table support
  • Skins support
    via CSS
  • Internationalization
  • APIs, plugins support
  • Free and Open Source, fully adaptable to your needs

Free Rich Text Editor

free rich text editor

Free Rich Text Editor is an extremely easy to use FREE javascript based HTML WYSIWYG editor for your website, it can easily be implemented into any existing content management system or other web application with no knowledge required in programming or javascript. Only 3 lines of code required to set up the editor. It also now outputs as XHTML compliant code!

SmartMarkUP

smart markup

SmartMarkUP is a lightweight and powerful JavaScript library that allows you to turn any textarea into a fancy markup editor. HTML, CSS, XML, Wiki syntax, BBCode or any other desired markup language can be implemented and/or adjusted to your preferences and business needs. SmartMarkUP doesn’t depend on any other JavaScript library and can be integrated with any already existing JavaScript library or code.

markItUp

markitup

markItUp! is a JavaScript plugin built on the jQuery library. It allows you to turn any textarea into a markup editor. Html, Textile, Wiki Syntax, Markdown, BBcode or even your own Markup system can be easily implemented.

Features:

  • Fast and unobtrusive integration
  • Support for keyboard shortcuts
  • Toolbar and drop down menus
  • Fully customizable and scriptable
  • Editor’s features callable from any place
  • Ajax dynamic preview
  • Customizable Skins

NicEdit

NicEdit

NicEdit is a Lightweight, Cross Platform, Inline Content Editor to allow easy editing of web site content on the fly in the browser.

NicEdit Javascript integrates into any site in seconds to make any element/div editable or convert standard textareas to rich text editing.

About the author: insic

Subscribe in my RSS Feed for more updates on Web Design and Development related articles. Follow me on twitter or drop a message to my inbox.

  • Pingback: Rounding Up the Best Javascript WYSIWYG and Markup Editor | INSIC 2.0 Web Development & Design Blog « Netcrema - creme de la social news via digg + delicious + stumpleupon + reddit

  • http://www.open-open.com/ajax/Editor.htm open-open.com
  • http://ashishlohorung.com.np Ashish Lohorung Rai

    Lots of editor .. i didn’t know many of them… nice listing

  • http://www.sendrakhitoindians.com/ Rakhi to India

    Nice stuff! I have read nicedit information on internet. It is really good one editor.

  • http://techinorg.blogspot.com Erik I

    fckeditor is also open source AFAIK.

  • http://richcode.co.cc richcode

    Im using TinyMCE. NicEdit is looks simple. thanks for the list

  • http://www.webdesignfromscratch.com/ london web designers

    Used both TinyMCE and FCKeditor… hadn’t heard of a couple of the ones you’ve listed so thanks for the post, will look into these!

  • http://volomike.com Volomike

    I look for the day when I can get a jQuery based tool that’s sort of like TinyMCE, but a little lighter.

  • http://rafyta.com Rafyta

    @Volomike: try jWYSIWYG

  • http://www.laozhe.net ShunYea

    it very useful,i get。

  • http://itlivewire.com/devblog/ itlivewire

    fckeditor is the most mature and full of features

  • http://www.all-maroc.com/vb abdelah

    good
    thanks

  • lebisol

    nice list, it would have been handy to mention which ones have file manager (image at least) browser/uploader. 2nd most important feature to any editor.

  • http://technokyle.com Kyle

    Thanks for the list. I usually use tinyMCE as an alternative for the blogspot editor but the problem is that when you make a table in tinyMCE and pasted the codes in blogger, the layout messes up. But the functionality is totally cool!

  • http://www.atdesigncm.com Thaninrat Thanatharavat

    I ‘m use FCKeditor. Now try to use in codeigniter. ;-)

  • http://www.design-sparks.de Sepp

    Nice Collection :-)
    I like Tiny MCE for CMS Backends, but it’s to oversized for frontend applications, so I’m creating my own tiny editor with the help of jQuery.

    btw: Nice Blog!

  • lebisol

    …and FCK is now CKeditor http://ckeditor.com/

  • http://itlivewire.com/ukay ukay

    Does any of the mentioned html editors support full html edit that includes as well as javascript?

  • cool

    yes ukay they also come with a free developer that designs and developers things for you. Just click on the little ‘person’ icon.

  • http://www.studentbrands.co.za Student Brands

    Thanks for the great info, hope to use it soon.Thanks again

  • http://denbagus.net denbagus

    great javascript editor ..thank you

  • http://www.wedgeim.com Calgary webdesign

    good article thanks, i plan on using it for sure

  • http://www.netglos.com Photographer

    Thanks for the great collection.

  • http://www.itsashirt.com Itsashirt T shirts

    Nice list, gonna try markItUp!

  • http://www.blueprintds.com web design chicago

    Excellent list! Always wonderful to know exactly what alternative editors there are!

  • http://hubersen.ch hubeRsen

    delicious list, don’t know many of them. thanks

  • http://www.tidydesign.com Tidy Design London

    Cooooolio, very TIDY!

  • http://kordon.me/ Mark Kordon

    Great list. Also the ones that I’ve found out there. Surprisingly, there’s only one WYSIWYG BBCode editor; TinyMCE.

    Would love to se some more of those…

  • http://www.deinternetjongens.nl Apeldoorn Webdevelopment

    We use a modified version of nicedit for a custom application CMS we’re building. It’s lightweight, versatile, it lacks most of the nonsense and let’s us add our own dialogs for image placement, adding links, etc.

    For us, it’s the best solution, because we can develop our own applications around it. If you want a more all-in-one ready to use editor, I think you should go with another one.

  • http://www.fruitpixel.com FruitPixel

    Great list, thanks! Usually use TinyMCE, but gonna check out FCKeditor and a couple of others…

  • http://www.dvojmo.cz Inza

    What about Texyla editor, which supports Texy! syntax?

    Texyla: http://texyla.janmarek.net/
    Texy!: http://texy.info

  • http://www.tikoim.de Heiko

    Great list – only knew TinyMCE from WP before. Thx

  • http://blog.insicdesigns.com insic2.0

    @Inza Surely I will check it :) Thanks for your suggestion

  • http://www.designstudio16.com saurabh shah

    amazing bunch of editors … Thanks for sharing insic….

  • Chris Southam

    If you are looking for one with a proper asset/image manager (which all the above charge for) then InnovaStudio is excellent. Not free though, but still excellent :)
    http://www.innovastudio.com

  • Pingback: roundup of WYSIWYG Markup Editors | A Day in the life of Peter Sena II

  • zaphod

    jwysiwyg segment -

    “It’s an alternative to WYMeditor with much LESS features.”

    - should be -

    “It’s an alternative to WYMeditor with much FEWER features.”

    If you can count it use “fewer”, if you can’t then use “less”.

  • http://www.sergioguerrero.es Sergio Guerrero

    CKEditor is my choice!!

  • http://digiblog.douse.web.id/ waro

    I used FCKEditor, but correctly me if I’m wrong the latest version seems lost its capability to upload image.

  • http://www.motomontage.com Philip Ingram

    One thing ALL these editors lack is true control over placement of the content. These are basically glorified in-line word processors. What I want to see more of is stuff like http://www.stiqr.com where you can basically design a whole web page without knowing any markup…and for those of us who do, make it a much quicker process. Still in beta stages but has major potential.

  • http://www.jasonadkison.com Jason

    I love xinha WYSIWYG editor: http://xinha.webfactional.com

    I have been integrating it into CodeIgniter for the past 2 years. Image/file uploading and linking works terrific, amongst some other nifty features. And it’s all FREE.

  • http://www.sendrakhistoindia.com Send Rakhis to India

    Thanks for sharing this information about the WYSIWYG editor, It is really helpfull

  • Cryin9Devil

    Anyone who tryed WebStorm from JetBrain ? I think it’s the most powerfull and complete web IDE i used till now

    Keep Tryin ;)

  • Atul

    Nice Collection :)

  • http://www.fimedia.ca/ Calgary Web Design

    Used to use one called HTMLArea for the longest time, but ran into headaches when dealing with absolute vs. relative links (I’m a programmer, so I deal with just code ~ whereas the clients and content developers deal with the editor). Ran into so many headaches unless everything was an absolute link, drove me insane :-)

    Upgraded to TinyMCE and I’ll never turn back! :-)

  • http://www.enioa.com Enioa Calgary Web

    These editors are getting powerful these days. As a web designer, if it improves your efficiency, I would jump on it.

  • ajax file manager

    ajax file manager

    FileUltimate is an ASP.NET file manager control which you can add directly to your existing ASP.NET (.aspx) pages. The control renders a user interface similar to “Windows Explorer” within the page and this user interface allows you to view the contents of the predefined root folders and allow complete file management actions within those folders. File management actions can be limited by predefined permissions and quota limits on each folder separately.

  • http://www.sendrakhistoindia.com Rakhi to India

    Very nice and useful post, Thanks a lot for posting this.

  • http://www.rakhitousa.com Rakhi to USA

    Wow!!! I was finding it from a month, finally reached to your post, Thanks!!!

  • Anubhav Jeph

    Hi,

    can any1 tell which is the most lightweight WYSIWYG editor from the above discussed editors . Currently i am using TinyMCE as mentioned in the article . Is there any other editor lighter than tinyMCE .

  • Pingback: Daily Dump 20100322 | Blog .Ronald

  • Rakhis to India

    The blog is
    absolutely fantastic. Lots of great information and inspiration, both of
    which we all need. Thanks.

    http://rakhitoindia.com

  • http://SnapEditor.com/ SnapEditor

    Check us out at http://snapeditor.com. We concentrate specifically on providing a WYSIWYG editor that is stable and doesn’t behave weirdly.