• Top Members
    Reps
    Posts
  • 834 Replies
    2585 Replies
  • 716 Replies
    2026 Replies
  • 331 Replies
    1928 Replies

Test RichText Editor

User avatar
XTechVB
VIP - Donator
Posts: 727

Test RichText Editor

Fri Jul 18, 2014 3:27 pm

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
comathi
Coding God
Posts: 1242

Re: Test RichText Editor

Fri Jul 18, 2014 4:42 pm

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

Great job by the way cooll;

User avatar
XTechVB
VIP - Donator
Posts: 727

Re: Test RichText Editor

Fri Jul 18, 2014 8:07 pm

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
Posts: 960

Re: Test RichText Editor

Sat Jul 19, 2014 1:38 am

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
Posts: 1242

Re: Test RichText Editor

Sat Jul 19, 2014 6:56 am

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 - Donator
Posts: 727

Re: Test RichText Editor

Sat Jul 19, 2014 10:49 am

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
Posts: 2577

Re: Test RichText Editor

Sun Aug 24, 2014 11:26 am

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
Image
Image

User avatar
XTechVB
VIP - Donator
Posts: 727

Re: Test RichText Editor

Sun Aug 24, 2014 1:10 pm

#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

Post Reply

Return to “Help & Support”