A sample for jQuery based WYSIWYG Editor demonstrate OOP javascript - javascript

Want a WYSIWYG jQuery Editor as an example to illustrate how to use jQuery to built OOP javascript component.
P.S.
It is so good stackoverflow can use markdown... Would be a heaven if users would love such thing too

jHtmlArea - WYSIWYG HTML Editor for jQuery
A simple, light weight, extensible WYSIWYG HTML Editor built on top of jQuery. This component allows you to easily display a WYSIWYG HTML Editor in place of any TextArea DOM Elements on the page. The minified script alone is 7kb, and with css and image files it's a total of 15kb.
This project also include Visual Studio JavaScript Intellisense support.
(source: codeplex.com)

http://projects.bundleweb.com.ar/jWYSIWYG/ looks outdated, better try this link to jwysiwyg

jwysiwyg looks good but there's no useful documentation at all!

Check CleEditor http://premiumsoftware.net/cleditor/
CLEditor supports the following browsers on both the mac and pc: IE 6.0+, FF 1.5+, Safari 4+, Chrome 5+ and Opera 10+. All testing is done using jQuery 1.4.2.
CLEditor provides a rich plugin development environment, allowing you to customize its user interface and functionality to fit your needs.

http://wmd-editor.com/features#compatibility
or maybe if you just have time to write/modify for your own parse (as i will do)
use this:
http://markitup.jaysalvat.com

The WYSIWYG which can accept formatted text copied from Microsoft Word, are...
CLEditor
jHTML Area
NicEdit
Xinha
jWYSIWYG
I chose CLEdit, because the code is clean, and it allows me to decide how I want images to be aligned, and it doesn't have bugs like NicEdit. On NicEdit, it produces DOUBLE line breaks when HTML code is copied from other sites into the editor.

Related

Rich Text Editor On browser, other than nicEdit, tinyMCE, non-jQuery

I'm looking for a non-jQuery based Rich Text Editor for my web application. I did try nicEdit and it has cross-browser issues, especially with firefox.
We are writing application level javascript code as well, comparing the values in the RTE , diasbling/enabling it.
Other well-known browser-based RTEs include:
CKEditor
Aloha

Looking for light text rich editor for enterprise website ,more light then tinymce with basic buttons for comment form

I am Looking for light text rich editor for enterprise website ,more light then tinymce with basic buttons for comment form.
Its important that editor will also work in IE6.
until now I try cleditor 15KB, but he have problem with IE when 'enter' press.
cleditor have issue - (Jquery-Rich Text Editor) How can be fixed bug in rich text editor - when press enter in firefox created 'br' tag but in IE created 'p' tag?
YUI Editor 76kb - still prefer something lighter like cleditor 15kb and use jquery and not yui 2 framework.
HtmlBox editor- only for personal use according lisence and also have some bugs in simple demo.
markitUp editor - not show result , only in other window.
tinymce/ckeditor - not light editor
jHtmlArea - not support IE6
jwysiwyg - still beta version, not tested on IE6?
Update: I alreay use jquery.
please if you have good suggestion,
Thanks,
Yosef
7kb jQuery minimalist rich text editor that works in everything as far as I know (including IE6 but I never tried it with IE9):
http://batiste.dosimple.ch/blog/posts/2007-09-11-1/rich-text-editor-jquery.html
If you are ok with using Mootools framework. Mooeditable is a simple web-based WYSIWYG editor, written in MooTools. Works on A-Grade Browsers MIT license. Mooeditable
As far as size goes you can build your own using the builder and take out components that you do not need. Hope this helps.
Have you tried CKEditor? It's licensed under flexible Open Source and commercial licenses
According to their website, you'll be able to integrate and use it inside any kind of application, making it an ideal editor for developers to provide easy and powerful solutions to their users.
The cost of the license for a single website is about $400. You did say it was for an enterprise website, so maybe the cost isn't an issue.

Fast dynamic JavaScript WYSIWYG editor

Right now I am using the TinyMCE wysiwyg editor within my projects.
However there are some disadvantages with tinyMCE:
Tons of GET requests
Big
It is slow. I can't have a large number of TinyMCE editors at the same time. (Especially in IE)
Changing the DOM position of the TinyMCE caused issues where the listeners got lost.
Complicated to generate new TinyMCE editors dynamically during "runtime".
Hard to control by jQuery
Is there any WYSIWYG editor you would suggest?
A big plus would be a jQuery based editor as this project works with jQuery anyway.
You could try CKEditor http://ckeditor.com/blog/CKEditor_for_jQuery (formerly FCKeditor)
I'll suggest jHtmlArea, its jQuery powered and its quite fast
1 image file using CSS Image sprites
1 line of javascript, 1 line of CSS
I have used it in a lot of projects before and its quite good.
http://jhtmlarea.codeplex.com/
CKEditor is Slow!
If you need something as fast as possible, you could use http://unverse.net/Whizzywig-2011, but its ugly, so there is also something like http://aloha-editor.org/

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

Rich Text Editor with Gmail style spell check

I am after a JavaScript Rich Text Editor that supports highlighting words and triggering events when those highlighted words are clicked, like what Gmail does when in spellcheck mode.
I will need to heavily customize any existing solution, so something that is easy to extend would be ideal. Currently I am leaning towards TinyMCE.
Richtextbox or HTML?
If it is HTML, then you should stick with TinyMCE. :
It's (very) easy to integrate
It works across browsers
The toolbars were easy to modify
Wordpress uses it!
For what its worth, we also looked at FCKEditor but preferred TinyMCE
UPDATE: While some users wanted it, spell checking has never been on the "essentials" list. It has always been quicker / cheaper for us to teach the handful of users how to use the spell checking features of IE, Firefox or Chrome instead of putting it in the editor.
Imagine trying to code the 3 been soup example!!!
TinyMCE seems to be the best one these days. You might want to take a look at FCKEditor and HTMLArea as well. You can find a list of such WYSIWYG HTML editors here.

Categories