10 Best WYSIWYG Text and HTML Editors for Your Next Project

Posted in Tools, Web Design4 years ago • Written by 37 Comments

Allowing users, and clients to format their text without delving into code has long been on developers’ priority lists, but these days, providing this usability is far easier than it once was. Here are 10 WYSIWYG editors that are commonly used, and are worth a look in if its something you need for a project.

1. NicEdit

Demo | Download

NicEdit

NicEdit is an alternative to some of the larger, more complex WYSIWYG editors out there, with its small download size. It boasts many of the expected editor features and easily integrates into your site.

2. TinyMCE

Demo | Download

TinyMCE

TinyMCE is an open-source JavaScript HTML WYSIWYG editor. It’s easy to integrate, and is highly customisable with themes and plugins. TinyMCE is one of the more “complete” editors out there, offering an experience similar to MSWord.

3. CKEditor

Demo | Download

CKEdior

CKeditor is the new FCKEditor that proved to be the market leader previously. It builds from that, and aims to fix what FCKEditor got wrong. The result is a high performance WYSIWYG editor that offers editing features comparable to MSWord and Open Office.

4. YUI Rich Text Editor

DemoDownload

YUI Rich Text Editor

The YUI Rich Text Editor is a UI control from Yahoo that turns textarea’s into fully functioning WYSIWYG editors. It comes in several different versions of varying features and complexity, but still manages to achieve a great user experience without a plethora of buttons crowding the interface.

5. MarkItUp!

Demo | Download

MarkItUp!

Markitup is a jQuery plugin that allows you to turn the text areas into markup editors in any markup you wish. HTML, Wiki syntax, and BBcode are just a few that are supported. Markitup is not a WYSIWYG editor, but that doesn’t hold it back from offering all the basic features you’d expect, and a lightweight download that works well.

6. FreeTextBox

Demo | Download

Free Text Box

FreeTextBox  is an HTML editor specifically for ASP.NET. The look and feel of the editor is the most like Microsoft Word that you are likely to get. The free version does lack a couple further features, but has more than enough to get you going.

7. MooEditable

Demo | Download

MooEditable

WYSIWYG editors have become common as plugins for the popular jQuery library, but not so common on Mootools. MooEditable though, fills that void, by providing a simple, but effective user experience to the user, by building on top of  a well written JavaScript library. If you’re a Mootools fan, then you’ll have no problems with this.

8. OpenWysiwyg

Demo | Download

OpenWYSIWYG

OpenWYSIWYG is a cross browser rich text editor with almost every editing capability you could want. It features a sleek user interface including drop-downs and buttons. High on its features is its capacity to handle tables well, with different borders and colours. However, Chrome is still not supported.

9. Spaw Editor

Demo | Download

SPAW Editor

Spaw Editor is a web-based in-browser WYSIWYG editor control that enables web site developers to replace a standard text area HTML control with full-featured, fully customizable, multilingual, skinable web-based WYSIWYG editor.

10. jHtmlArea

Demo | Download

jHtmlArea

jHtmlArea is another WYSIWYG text editor built as a plugin for the popular jQuery library.  It’s purpose is to be simple and lightweight, and it serves this well, with only the most needed options included in the plugin. It allows itself to be easily customised from the looks to the functions down to the language.

Further Discussion?

If you have used one of these before, or have used another web-based Rich Text editor that you think deserves a mention, then go ahead and add them in the comments area below. We’d love to hear from you on the subject!

20 Written ArticlesWebsite

Matt is an 18 year old web designer from Scotland, UK. He loves creating beautiful websites across different platforms. High on his things to learn fully are Jquery and php. He is extremely excited by css3 and html5 and can't wait to see them rolled out fully. To learn more about Matt, follow him @QwibbleDesigns, or check out his portfolio.

37 Comments Best Comments First
  • Martin Hruška

    Thursday, April 15th, 2010 11:00

    8

    All these editors are outdated. They are all based on clumsy contentEditable parameter, which don’t work the same in different browsers and all these editors do are very ugly hacks.
    But there’s different approach to browser wysiwyg editor problem! Javascript is now fast so we can emulate everything with DOM methods. Did you see latest Google Docs? Yes – no contentEditable, all with DOM. Even the blinking cursor is just styled DIV!
    I’m really waiting when this approach comes to open source world!

    +17
  • Andy

    Thursday, April 15th, 2010 10:47

    7

    My choice – WYMeditor…
    because of the simplicity of the interface and because the client can’t make a mess of the XHTML we’ve strived so hard to develop. Styles, typography and layout should be left for the branding/styleguide of the master CSS, not inline by a user who fanices themselves as a designer.

    “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. With WYMeditor, the code can’t be contaminated by visual informations like font styles and weights, borders, colors, …
    The end-user defines content meaning, which will determine its aspect by the use of style sheets. The result is easy and quick maintenance of information.”

    +6
  • Brett Widmann

    Tuesday, November 30th, 2010 15:55

    28

    This is a great collection of editors. I can’t wait to try out a few and see what works best for me. Thanks for sharing.

    +2
  • TiamatInc

    Saturday, April 24th, 2010 09:43

    22

    Thank you for the excellent list of editors.

    +1
    • Matt Corner

      Monday, April 26th, 2010 19:43

      25

      No problem, it helped me so i’m sure it can help others =)

      0
  • Jared Detroit

    Thursday, April 15th, 2010 03:42

    1

    Doesn’t WordPress use TinyMCE? I’ve found TinyMCE to be really easy to use and will definitely look to use it on my next project. I don’t know how it is to integrate into a website but it’s definitely easy to use.

    +1
    • Saad Bassi

      Thursday, April 15th, 2010 05:48

      5

      Yeah, Jared WP use TinyMice. I will suggest you to take a look on CKEditor. I love it and its really very comprehensive solution.:)

      -1
  • Emily McAuliffe

    Saturday, April 24th, 2010 00:31

    21

    For those who need to look outside an open source solution, please consider EditLive!. It is embedded in the leading content management systems and includes enterprise class support. One of the best loved features of EditLive! is the ability to copy and paste content from Word and produce clean, compliant XHTML. Try it – we have advanced features like track changes and commenting in our online demo. http://editlive.com/online-demo

    +1
  • Rean John Uehara

    Thursday, October 27th, 2011 16:17

    34

    April 14, 2010. :)

    +1
    • visitor

      Thursday, January 12th, 2012 02:20

      35

      Does anyone know how to bypass Latex to create text which includes mathematics? Is there anything more recent and which does not force the author to mess up the input with incomprehensible garbage? For example, Maple lets you create text files that can include equations and that you can save in different formats including pdf. Also, how does one generate those nice new animated pdf slides?

      -1
  • Chris Lottman

    Sunday, April 18th, 2010 18:04

    16

    I gravitate more towards Modx than wordpress. Modx uses TinyMcE which has always worked great for me.

    +1
    • Matt Corner

      Sunday, April 18th, 2010 20:59

      17

      You choose your cms on its wysiwyg editor? xD

      +2
      • Raman

        Tuesday, April 20th, 2010 06:29

        19

        Hey Matt, Do you know if there is one WYSIWYG editor that can input math equations? thanks

        +2
        • Matt Corner

          Monday, April 26th, 2010 19:42

          23

          I’m not aware of one I’m afraid. Out of curiosity, in what circumstance would you use such a feature?

          +3
  • Zac

    Thursday, April 15th, 2010 16:49

    9

    Do any of these strip off the ridiculous formatting/inlined-styling that happens when content editors (the clients) end up simply copying and pasting from MS Word? I’m yet to find a good solution to that problem.

    +1
    • Matt Corner

      Thursday, April 15th, 2010 19:02

      10

      I’m haven’t tested that to be fair. Would it not be easier to copy and paste as plain text and then style it using the wysiwyg editor itself?

      -1
      • Zac

        Thursday, April 15th, 2010 19:24

        12

        Sure, but to get the client to (always) do that is nearly impossible. ;)

        +3
    • Branson

      Friday, April 16th, 2010 07:41

      14

      TinyMCE and CKEditor for sure do this! You can see the button for it in the screenshots. The one for Tiny MCE is in the 2nd row, 5th button from the left. The strip for CKEditor is in the top row, 8th button over.

      It will popup and have you paste the text it…and then it auto strips it. If that fails, paste into Notepad, and then copy and paste again into the wysiwyg.

      +1
  • OIK2

    Monday, April 19th, 2010 02:30

    18

    I want to integrate custom tags(for things like a standard image display with captions, functional tags from within my CMS, etc) with some user input into the WYSIWYG editor. Any tips on what editor would be best for doing this?

    +1
    • Matt Corner

      Monday, April 26th, 2010 19:43

      24

      MarkitUp! seems to have to the ability to cater for custom tags. It might be what you’re looking for =)

      +1
  • $hekh

    Thursday, April 15th, 2010 05:31

    4

    its for sure, a great collection.

    +1
  • Mark

    Friday, May 14th, 2010 07:58

    27

    I just replaced TinyMCE with CKEditor and I am very impressed! The features and ease of use are great (both installing and as a wysiwyg). It also works well in all browsers. I’d highly recommend it. This coming from someone who had switched from FCKeditor to TinyMCE a couple years ago…

    +1
  • Fabio Polisini

    Wednesday, June 29th, 2011 21:52

    32

    Hi,
    i would like to point MooEditor, free editor that works with Mootools

    +1
    • Guest

      Friday, September 16th, 2011 23:53

      33

      I look the PEGOEditor and its nice but that only for browser and I try it on mozzila firefox

      0
  • Albert Lie

    Thursday, April 15th, 2010 05:28

    3

    I was once used TinyMCE, but now I use Adobe Dreamweaver for html editor. Nice share!

    +1
    • Matt Corner

      Thursday, April 15th, 2010 19:04

      11

      These aren’t to be used as html editors as such. They’re to be used for posting content to your site with basic styling like posting an article for example.

      -2
  • led strip

    Tuesday, May 10th, 2011 07:24

    31

    Hmm it appears like your website ate my first comment (it was super long) so I guess Ill just sum it up what I wrote and say, Im thoroughly enjoying your blog. I as well am an aspiring blog writer but Im still new to everything. Do you have any suggestions for inexperienced blog writers? Id really appreciate it.

    +1
  • Alan Tocheri

    Thursday, April 15th, 2010 06:31

    6

    Does anyone know what Squarespace uses for their editor? It’s obviously a custom job, but is it built on anything from this list?

    0
    • Nick

      Monday, May 7th, 2012 17:31

      37

      Hey Alan… the Squarespace editor is based on the YUI editor mentioned in this post.

      -3
  • Wayne Gomez

    Tuesday, February 28th, 2012 10:58

    36

    what about golive by adobe?

    -1
  • Jordan Walker

    Friday, April 16th, 2010 16:28

    15

    Those are very nice, I prefer CKEditor.

    -2
  • JC Johnston

    Thursday, May 13th, 2010 19:54

    26

    Thanks for the great list. I have heard of some these. I need to check out some these and see what ones will work best for me when I am not using Dreamweaver.

    -2
  • Ben Margetts

    Thursday, April 15th, 2010 21:16

    13

    I’m struggling to find a wysiwig that will allow me to simultaneously see and edit the html and wysiwig windows. All that i can find is editors that require me to toggle.

    Any suggestions?

    -2
  • Sean

    Monday, March 7th, 2011 01:49

    29

    I think Xinha is batter than jHtmlArea , And Xinha is opensource :)

    -3
  • ESN

    Thursday, April 15th, 2010 03:44

    2

    I have recently used CKeditor for a project and I must say it’s a huge improvement over the old FCKEditor.

    -4
  • Wayne Gomez

    Tuesday, February 28th, 2012 10:58

    36

    what about golive by adobe?

    -1
  • Rean John Uehara

    Thursday, October 27th, 2011 16:17

    34

    April 14, 2010. :)

    +1
    • visitor

      Thursday, January 12th, 2012 02:20

      35

      Does anyone know how to bypass Latex to create text which includes mathematics? Is there anything more recent and which does not force the author to mess up the input with incomprehensible garbage? For example, Maple lets you create text files that can include equations and that you can save in different formats including pdf. Also, how does one generate those nice new animated pdf slides?

      -1
  • Fabio Polisini

    Wednesday, June 29th, 2011 21:52

    32

    Hi,
    i would like to point MooEditor, free editor that works with Mootools

    +1
    • Guest

      Friday, September 16th, 2011 23:53

      33

      I look the PEGOEditor and its nice but that only for browser and I try it on mozzila firefox

      0
  • led strip

    Tuesday, May 10th, 2011 07:24

    31

    Hmm it appears like your website ate my first comment (it was super long) so I guess Ill just sum it up what I wrote and say, Im thoroughly enjoying your blog. I as well am an aspiring blog writer but Im still new to everything. Do you have any suggestions for inexperienced blog writers? Id really appreciate it.

    +1
  • Sean

    Monday, March 7th, 2011 01:49

    29

    I think Xinha is batter than jHtmlArea , And Xinha is opensource :)

    -3
  • Brett Widmann

    Tuesday, November 30th, 2010 15:55

    28

    This is a great collection of editors. I can’t wait to try out a few and see what works best for me. Thanks for sharing.

    +2
  • Mark

    Friday, May 14th, 2010 07:58

    27

    I just replaced TinyMCE with CKEditor and I am very impressed! The features and ease of use are great (both installing and as a wysiwyg). It also works well in all browsers. I’d highly recommend it. This coming from someone who had switched from FCKeditor to TinyMCE a couple years ago…

    +1
  • JC Johnston

    Thursday, May 13th, 2010 19:54

    26

    Thanks for the great list. I have heard of some these. I need to check out some these and see what ones will work best for me when I am not using Dreamweaver.

    -2
  • TiamatInc

    Saturday, April 24th, 2010 09:43

    22

    Thank you for the excellent list of editors.

    +1
    • Matt Corner

      Monday, April 26th, 2010 19:43

      25

      No problem, it helped me so i’m sure it can help others =)

      0
  • Emily McAuliffe

    Saturday, April 24th, 2010 00:31

    21

    For those who need to look outside an open source solution, please consider EditLive!. It is embedded in the leading content management systems and includes enterprise class support. One of the best loved features of EditLive! is the ability to copy and paste content from Word and produce clean, compliant XHTML. Try it – we have advanced features like track changes and commenting in our online demo. http://editlive.com/online-demo

    +1
  • OIK2

    Monday, April 19th, 2010 02:30

    18

    I want to integrate custom tags(for things like a standard image display with captions, functional tags from within my CMS, etc) with some user input into the WYSIWYG editor. Any tips on what editor would be best for doing this?

    +1
    • Matt Corner

      Monday, April 26th, 2010 19:43

      24

      MarkitUp! seems to have to the ability to cater for custom tags. It might be what you’re looking for =)

      +1
  • Chris Lottman

    Sunday, April 18th, 2010 18:04

    16

    I gravitate more towards Modx than wordpress. Modx uses TinyMcE which has always worked great for me.

    +1
    • Matt Corner

      Sunday, April 18th, 2010 20:59

      17

      You choose your cms on its wysiwyg editor? xD

      +2
      • Raman

        Tuesday, April 20th, 2010 06:29

        19

        Hey Matt, Do you know if there is one WYSIWYG editor that can input math equations? thanks

        +2
        • Matt Corner

          Monday, April 26th, 2010 19:42

          23

          I’m not aware of one I’m afraid. Out of curiosity, in what circumstance would you use such a feature?

          +3
  • Jordan Walker

    Friday, April 16th, 2010 16:28

    15

    Those are very nice, I prefer CKEditor.

    -2
  • Ben Margetts

    Thursday, April 15th, 2010 21:16

    13

    I’m struggling to find a wysiwig that will allow me to simultaneously see and edit the html and wysiwig windows. All that i can find is editors that require me to toggle.

    Any suggestions?

    -2
  • Zac

    Thursday, April 15th, 2010 16:49

    9

    Do any of these strip off the ridiculous formatting/inlined-styling that happens when content editors (the clients) end up simply copying and pasting from MS Word? I’m yet to find a good solution to that problem.

    +1
    • Matt Corner

      Thursday, April 15th, 2010 19:02

      10

      I’m haven’t tested that to be fair. Would it not be easier to copy and paste as plain text and then style it using the wysiwyg editor itself?

      -1
      • Zac

        Thursday, April 15th, 2010 19:24

        12

        Sure, but to get the client to (always) do that is nearly impossible. ;)

        +3
    • Branson

      Friday, April 16th, 2010 07:41

      14

      TinyMCE and CKEditor for sure do this! You can see the button for it in the screenshots. The one for Tiny MCE is in the 2nd row, 5th button from the left. The strip for CKEditor is in the top row, 8th button over.

      It will popup and have you paste the text it…and then it auto strips it. If that fails, paste into Notepad, and then copy and paste again into the wysiwyg.

      +1
  • Martin Hruška

    Thursday, April 15th, 2010 11:00

    8

    All these editors are outdated. They are all based on clumsy contentEditable parameter, which don’t work the same in different browsers and all these editors do are very ugly hacks.
    But there’s different approach to browser wysiwyg editor problem! Javascript is now fast so we can emulate everything with DOM methods. Did you see latest Google Docs? Yes – no contentEditable, all with DOM. Even the blinking cursor is just styled DIV!
    I’m really waiting when this approach comes to open source world!

    +17
  • Andy

    Thursday, April 15th, 2010 10:47

    7

    My choice – WYMeditor…
    because of the simplicity of the interface and because the client can’t make a mess of the XHTML we’ve strived so hard to develop. Styles, typography and layout should be left for the branding/styleguide of the master CSS, not inline by a user who fanices themselves as a designer.

    “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. With WYMeditor, the code can’t be contaminated by visual informations like font styles and weights, borders, colors, …
    The end-user defines content meaning, which will determine its aspect by the use of style sheets. The result is easy and quick maintenance of information.”

    +6
  • Alan Tocheri

    Thursday, April 15th, 2010 06:31

    6

    Does anyone know what Squarespace uses for their editor? It’s obviously a custom job, but is it built on anything from this list?

    0
    • Nick

      Monday, May 7th, 2012 17:31

      37

      Hey Alan… the Squarespace editor is based on the YUI editor mentioned in this post.

      -3
  • $hekh

    Thursday, April 15th, 2010 05:31

    4

    its for sure, a great collection.

    +1
  • Albert Lie

    Thursday, April 15th, 2010 05:28

    3

    I was once used TinyMCE, but now I use Adobe Dreamweaver for html editor. Nice share!

    +1
    • Matt Corner

      Thursday, April 15th, 2010 19:04

      11

      These aren’t to be used as html editors as such. They’re to be used for posting content to your site with basic styling like posting an article for example.

      -2
  • ESN

    Thursday, April 15th, 2010 03:44

    2

    I have recently used CKeditor for a project and I must say it’s a huge improvement over the old FCKEditor.

    -4
  • Jared Detroit

    Thursday, April 15th, 2010 03:42

    1

    Doesn’t WordPress use TinyMCE? I’ve found TinyMCE to be really easy to use and will definitely look to use it on my next project. I don’t know how it is to integrate into a website but it’s definitely easy to use.

    +1
    • Saad Bassi

      Thursday, April 15th, 2010 05:48

      5

      Yeah, Jared WP use TinyMice. I will suggest you to take a look on CKEditor. I love it and its really very comprehensive solution.:)

      -1

Comments are closed.

54.234.128.25 - unknown - unknown - US