Fast dynamic JavaScript WYSIWYG editor - javascript

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/

Related

Research for a visual html editor which can export the changes or Finding a method for reapplying the user changes in initial html

I am looking for a visual HTML editor script that works in browser basically. Its initial content will be generated from an existing URL and all the changes which will be done by the user, should be exportable in some kind of format. The aim here is reaching the final look later by applying this exported data.
The user here will be non-technical end user. The editor can be similar to WYSIWYG so user can switch between preview and code. The editor should not rely on some kind of special CSS/JS frameworks, it should be able to read from CSS and JS files directly from URL while generating the page.
There are lots of visual editors out there with lots of cool stuff. Some are using drag-and-drop UI elements, some are meant to work just with Bootstrap etc. But so far I could not find something I can use.
So if existing tools are not enough, I need to find a way of generate same result by comparing the outputs.
Beside taking diff of the contents, is there any method for generating the exportable changes for reapplying to initial HTML later?
using diff may actually work but it may generate lots of bugs while working with js frameworks
If you are looking for what I think then.. https://ckeditor.com/ Check this one. I have used this HTML editor in a website. It changes the initial HTML and works like the way wordpress HTML editor works.

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)

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.

javascript WYSIWYG HTML editors?

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.

A sample for jQuery based WYSIWYG Editor demonstrate OOP 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.

Categories