Test RichText Editor

9 posts Page 1 of 1
Contributors
User avatar
XTechVB
VIP - Site Partner
VIP - Site Partner
Posts: 727
Joined: Thu May 20, 2010 10:32 am

Test RichText Editor
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
You do not have the required permissions to view the files attached to this post.
You can find me on Facebook or on Skype mihai_92b
User avatar
Dummy1912
VIP - Donator
VIP - Donator
Posts: 1969
Joined: Sat Aug 21, 2010 2:17 pm

Re: Test RichText Editor
Dummy1912
works all fine for me on firefox :)

#Birthday
visit us on:


http://www.softpedia.com/get/System/Lau ... -Run.shtml
Check it out ! http://www.softpedia.com/publisher/I-A- ... 90017.html
Check it out ! http://www.softpedia.com/get/Desktop-En ... lock.shtml
User avatar
comathi
Coding God
Coding God
Posts: 1242
Joined: Fri Mar 26, 2010 1:59 pm

Re: Test RichText Editor
comathi
Works fine for me on the latest version of Chrome on Windows 8.1.

Great job by the way cooll;
User avatar
XTechVB
VIP - Site Partner
VIP - Site Partner
Posts: 727
Joined: Thu May 20, 2010 10:32 am

Re: Test RichText Editor
XTechVB
comathi wrote:
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.
You can find me on Facebook or on Skype mihai_92b
User avatar
smashapps
Coding Guru
Coding Guru
Posts: 961
Joined: Tue Apr 05, 2011 8:41 am

Re: Test RichText Editor
smashapps
I'm using Google Chrome with Windows 8.1, everything worked perfectly.

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

#Birthday
My name is Tom | Visit my blog where I post new content every day! Tom's Daily Blog | MineCraft is awesome!
User avatar
comathi
Coding God
Coding God
Posts: 1242
Joined: Fri Mar 26, 2010 1:59 pm

Re: Test RichText Editor
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.
User avatar
XTechVB
VIP - Site Partner
VIP - Site Partner
Posts: 727
Joined: Thu May 20, 2010 10:32 am

Re: Test RichText Editor
XTechVB
comathi wrote:
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.
You can find me on Facebook or on Skype mihai_92b
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Re: Test RichText Editor
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
User avatar
XTechVB
VIP - Site Partner
VIP - Site Partner
Posts: 727
Joined: Thu May 20, 2010 10:32 am

Re: Test RichText Editor
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.
You can find me on Facebook or on Skype mihai_92b
9 posts Page 1 of 1
Return to “Help & Support”