Breadcrumbs

[XTechVB]

I'm working on a small website, and i need a WYSIWYG Editor, i already tried the standard ones like TinyMce and CKeditor. But they are bulky and too big for my needs.

So i developed a small version (just 1 file). I did my best to make it cross-browser compatible, it works well in IE 6+, Firefox 3+, Chrome 35, Opera 17 and Safari 5.

I need to know if it works on other versions of those browsers, All you have to do is open the index.html file, and see if the editor shows up and if the commands work.

Here is the editor(archived).

RTEditor.zip

[Dummy1912]

works all fine for me on firefox

#Birthday

[comathi]

Works fine for me on the latest version of Chrome on Windows 8.1.

Great job by the way cooll;

[XTechVB]

Works fine for me on the latest version of Chrome on Windows 8.1.

Great job by the way cooll;

Thanks! I'm not much of an expert on JavaScript, but this project taught me a lot. Including that IE's JScript engine and DOM API suck.

[smashapps]

I'm using Google Chrome with Windows 8.1, everything worked perfectly.

Nice job #XTechVB, that's pretty impressive so far!

#Birthday

[comathi]

You'll be glad to know it also works on mobile!

Tested in Safari on iOS 7.1.2

Although the interface is kinda small for fingers.

[XTechVB]

You'll be glad to know it also works on mobile!

Tested in Safari on iOS 7.1.2

Although the interface is kinda small for fingers.

Outstanding wahooo; Well i wasn't planing on using it on small mobile devices, But if it works that's good.
This interface is just for testing, The editor only provides the raw elements, Any styling can be done from the website's main StyleSheet. Also you can chose to use the default buttons or create your own.

[mikethedj4]

Works well running Version 36.0.1985.125 Ubuntu 14.04 (283153).
Although I do have some suggestions.

• If you'd like to know more about execCommand you can read my post about that here.
• Second don't use images to represent icons. The image quality is low and looks bad on smaller devices. I suggest using Font Awesome, Entypo, or SVG's.
• Also if you'd like to paste html at cursor location in a contentEditable element you can try using the following script.

Code: Select all

function pasteHtmlAtCaret(html) {
	var sel, range;
	if (window.getSelection) {
		// IE9 and non-IE
		sel = window.getSelection();
		if (sel.getRangeAt && sel.rangeCount) {
			range = sel.getRangeAt(0);
			range.deleteContents();

			// Range.createContextualFragment() would be useful here but is
			// non-standard and not supported in all browsers (IE9, for one)
			var el = document.createElement("span");
			el.innerHTML = html;
			var frag = document.createDocumentFragment(), node, lastNode;
			while ( (node = el.firstChild) ) {
				lastNode = frag.appendChild(node);
			}
			range.insertNode(frag);
			
			// Preserve the selection
			if (lastNode) {
				range = range.cloneRange();
				range.setStartAfter(lastNode);
				range.collapse(true);
				sel.removeAllRanges();
				sel.addRange(range);
			}
		}
	} else if (document.selection && document.selection.type != "Control") {
		// IE < 9
		document.selection.createRange().pasteHTML(html);
	}
}

and call it like so (this is merely a JQuery example. I would not recommend calling using prompt)...

Code: Select all

$('.insert-html').on('click', function(e) {
  var HTMLCode = prompt('Enter HTML code', ''); if(HTMLCode != null) {$('.editable').focus(); pasteHtmlAtCaret(HTMLCode); }
});

One pro about this is it works in IE, and allows for the ability to add buttons, tables, etc into the focused contentEditable element. However one drawback is after this is called execCommand's undo call does not work aka cashe it.

I don't like using traditional wysiwyg editors. Most web based ones I found did not work well on iOS, and all of the ones I used had fairly limited functionality; which made it hard to use for web design. which is why I decided to build my own web design app. So I can honestly say that I feel your pain with IE bro.

I personally like using JQuery more than traditional JavaScript because I don't have to worry about IE most of the time.

May also want to look into the following JQuery API's.
.wrap
.unwrap

[XTechVB]

#mikethedj4 thanks for the suggestions, I only need some basic functionality like bold, italic underline, etc... I made this editor specifically for my website's CMS (which is almost finished). Maybe I'll add more features and functionality in the future, but for now I'm quite happy with it, as it is. Also i don't really like JQuery.