Rounding Up the Best Javascript WYSIWYG and Markup Editor

17. Jul, 2009 39 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.

PG

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.

Related Post

Digg Delicious Stumbleupon Technorati
0
General, Tools
, , , , , ,

39 Responses to “Rounding Up the Best Javascript WYSIWYG and Markup Editor”

  1. open-open.com Reply 17. Jul, 2009 at 11:14 pm

    more:http://www.open-open.com/ajax/Editor.htm

  2. Ashish Lohorung Rai Reply 18. Jul, 2009 at 6:05 am

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

  3. Rakhi to India Reply 19. Jul, 2009 at 12:29 pm

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

  4. Erik I Reply 19. Jul, 2009 at 3:51 pm

    fckeditor is also open source AFAIK.

  5. richcode Reply 20. Jul, 2009 at 2:51 am

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

  6. london web designers Reply 20. Jul, 2009 at 6:01 pm

    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!

  7. Volomike Reply 20. Jul, 2009 at 8:36 pm

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

  8. Rafyta Reply 26. Jul, 2009 at 11:07 pm

    @Volomike: try jWYSIWYG

  9. ShunYea Reply 28. Jul, 2009 at 12:52 am

    it very useful，i get。

  10. itlivewire Reply 04. Aug, 2009 at 2:49 am

    fckeditor is the most mature and full of features

  11. abdelah Reply 08. Aug, 2009 at 11:49 am

    good
    thanks

  12. lebisol Reply 26. Aug, 2009 at 7:23 pm

    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.

  13. Kyle Reply 25. Oct, 2009 at 1:59 am

    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!

  14. Thaninrat Thanatharavat Reply 25. Oct, 2009 at 10:36 am

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

  15. Sepp Reply 28. Oct, 2009 at 4:13 pm

    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!

  16. lebisol Reply 29. Oct, 2009 at 11:33 am

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

  17. ukay Reply 19. Nov, 2009 at 10:33 pm

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

  18. cool Reply 20. Nov, 2009 at 5:26 pm

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

  19. Student Brands Reply 21. Nov, 2009 at 1:47 pm

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

  20. denbagus Reply 25. Nov, 2009 at 6:36 am

    great javascript editor ..thank you

  21. Calgary webdesign Reply 01. Dec, 2009 at 4:55 pm

    good article thanks, i plan on using it for sure

  22. Photographer Reply 10. Jan, 2010 at 10:22 am

    Thanks for the great collection.

  23. Itsashirt T shirts Reply 15. Jan, 2010 at 3:08 pm

    Nice list, gonna try markItUp!

  24. web design chicago Reply 19. Jan, 2010 at 1:46 pm

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

  25. hubeRsen Reply 29. Jan, 2010 at 4:56 am

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

  26. Tidy Design London Reply 29. Jan, 2010 at 4:57 am

    Cooooolio, very TIDY!

  27. Mark Kordon Reply 29. Jan, 2010 at 5:00 am

    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…

  28. Apeldoorn Webdevelopment Reply 29. Jan, 2010 at 5:04 am

    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.

  29. FruitPixel Reply 29. Jan, 2010 at 5:15 am

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

  30. Inza Reply 29. Jan, 2010 at 5:23 am

    What about Texyla editor, which supports Texy! syntax?

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

  31. Heiko Reply 29. Jan, 2010 at 5:31 am

    Great list – only knew TinyMCE from WP before. Thx

  32. insic2.0 Reply 29. Jan, 2010 at 5:32 am

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

  33. saurabh shah Reply 29. Jan, 2010 at 5:44 am

    amazing bunch of editors … Thanks for sharing insic….

  34. Chris Southam Reply 29. Jan, 2010 at 7:28 am

    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

  35. zaphod Reply 30. Jan, 2010 at 7:57 am

    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”.

  36. Sergio Guerrero Reply 07. Feb, 2010 at 3:21 am

    CKEditor is my choice!!

  37. waro Reply 21. Feb, 2010 at 7:13 am

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

Leave a Reply