javascript WYSIWYG HTML editors? - javascript

What are the options for something that will let users make text bold/italic/underline/etc as they are writing in a textarea and work in all browsers?

Give a look to FKCEditor, I always recommend it...

I always liked TinyMCE
http://tinymce.moxiecode.com/

I favor the Rich Text Editor in the YUI

I've used InnovaStudio WYSIWYG. Pretty extensible and cheap.

FCKEditor is a popular choice, although it's incredibly bloated. There's a nice simple example in jQuery jQuery Plugins
I wrote my own in the end as I wanted to customise the editor quite a lot. It's not too difficult to do and typically involves popping an iframe on the page, setting the contenteditable to be true and then using a simple javascript command to update the html of the iframe.

Related

making a text edit field

I am a beginner in HTML5, CSS3, and JavaScript. I reached my limit for the use of the trial version of Microsoft's OneNote. I like the program so much, I want to make an equivalent of it as an html version so I won't have to empty my pockets for the paid version.
The part I need help with is the part where you type in your notes. I don't know how to make a text edit field in html. Is it possible to do something like that? I would be satisfied if it could only do the same functions as note pad. Just so long as I am able to do the simple type and edit functions. Can someone show me how to code this or lead me to a site that teaches something like this?
Thanks! Tony.
There are plenty of solutions out there. Nicedit, CKEditor, etc. These all have a Rich text interface, and are javascript managed.
The simplest solution would be to just use a <textarea> which would allow for plain text input only.
The simplest way is to use the <textarea> tag in HTML. See this link too.
You can also use HTML5 Data caching to save your notes locally through your browser after implementing your textarea tags.
Here's a neat little plugin that should be relatively minor to install/use.
https://github.com/ekdevdes/storage.js

Is designMode bad?

In a previous post that I posted here, I got responses that contentEditable and designMode are bad practices. So I switched to TinyMCE, but that uses designMode as well... is there something bad about it?
Im using it for a Rich Text editor on my website fyi.
They were trying to tell you not to re-invent the wheel.
If you're using designMode, you probably want either a rich text editor (with toolbars) or a syntax-highlighting code editor.
In either case, you should reuse existing libraries rather than re-creating them from scratch. (Rich text editors are hard, especially across browsers)

JavaScript WYSIWYG implementation

I want to write a very simple WYSIWYG editor, but i don't understand how do they work :(
I've tried to read sources of tinyMCE but stuck in all those classes and functions.
As I know they're creating iframe then do some black magic there and everything works.
The question is: what do those editors do with iframe so it becomes editable?
Thank you.
The keywords are contentEditable and designMode.
Good sources to get started:
Rich-Text Editing in Mozilla (MDC)
element.contentEditable in Mozilla (MDC)
contentEditable in IE (MSDN)
very simple means you want little extension? In such case, you will like http://code.google.com/p/jwysiwyg/
Its constructor is really simple, but not good for extension works.
You can search JQuery. I think there's huge amount of HTML editor or rich text editor available.
By the way, the HTML editor inside Extjs is the worst thing I have ever seen.
Google released yesterday an open source editor:
http://closuretools.blogspot.com/2010/07/introducing-closure-library-editor.html
A quick look at it shows an IFRAME with the BODY tag with the attribute: contentEditable

How does one go about writing a simple WYSIWYG editor in JavaScript?

In my project I need to write small WYSIWYG editor (just let users make text bold/italic/underline and maybe some more). So I wouldn't like to use monsters like tinymce or fckeditor. My question is what HTML elements and javascript functions do I need to know for it? An HTML element in which I can edit and format text is a very interesting thing in this question.
If you want to roll your own, look at Midas. It's available in FF3+, IE, Safari, Opera, Chrome.
Basically, you use contentEditable and execCommand to turn the browser into an RTE.
document.getElementById('edit').contentDocument.designMode = "on";
Have a look at http://www.mozilla.org/editor/ie2midas.html
There is http://www.gosu.pl/steditor/ which code is quite simple and clear. It uses designMode and execCommand as was mentioned in other answers.
Alternatively use simple languages like markdown or textile and provide a live preview.
I think most people will get asterisks for emphasis and double ones for bolding.
I've used YUI's wysiwyg editor in the past and it lets you configure the the buttons so you could easily use it and limit the buttons to bold/italic/underline.

How does Google mail achieve rtf in textarea?

I am intended to develop a rich input textarea similar to Google mail. Any ideal or resource to share? Thanks in advance!
My suggestion is to use TinyMCE it is a great Rich Text Box. Yahoo also has a really great Rich Text Editor (which has been deprecated).
These are not textareas, btw - they are IFRAMEs holding full HTML managed by the editor code. I also recommend FCKeditor - very configurable and easily integrated. You can write your code using textareas, make a javascript call and those textareas go hidden and the IFRAME gets injected in place. Upon submit the html gets copied back in the textarea. so really don't need to do much...
I am not sure what google uses, but I've used FCKEditor and it worked out great.
Look at the ContentEditable tag. And also have a look at Squire on gihub which is an open source rich text editor that is very lightweight and flexible (used in opera's mail client)
The editors given in the other answers are very heavy and come with their own (outdated, bloated) UI components.

Categories