Jump to content

Getting started with a Rich Text Editor/WYSIWYG


kvnmck18

Recommended Posts

I have been trying to make a cross-browser Rich Text Editor (RTE). I figure jQuery will be the best solution because of the pre-built library -- the use of the select functions and wrap functions. The "iframe" RTE only works in IE, but using jQuery could change the wrap and make it work through out all browsers.I'm having difficulty finding where to start though. I don't want to use someone's code, I want to make it from start to finish and customize it as I go along. Start just simple basic RTE, just line breaks/bold/links.Any ideas?

Link to comment
Share on other sites

This is what I have started with:html page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>	<script type="text/javascript" src="jquery-1.2.6.js"></script>	<script type="text/javascript" src="wiki1.js"></script></head><body>	<textarea id="textarea"></textarea>	<br />	<input id="Submit" type="submit" value="Bold" />	<div id="preview"></div></body></html>

java script:

$(document).ready(function() {	//jSelect();	$("#Submit").click(function(){			TextRange();	});});function jSelect() {		$("#Submit").click(function() {		var TextVal = $("textarea").val();		var AddBr = TextVal.replace(/\n/g, "<br/>");		//$("#textarea").val(AddBr);		var selected =  $("textarea :selected").text();		alert( AddBr +"  selected: "+selected );		});}function TextRange() {	var textarea = document.getElementById("textarea");	var len = $("#textarea").val().length;	var start = textarea.selectionStart;	var end = textarea.selectionEnd;	var sel = textarea.value.substring(start, end);	//alert(sel);	var replace = '<b>'+sel+'</b>';	textarea.value = $("#textarea").val().substring(0,start)+replace+$("#textarea").val().substring(end,len);	$("#preview").html($("#textarea").val().substring(0,start)+replace+$("#textarea").val().substring(end,len));}

There are errors with the "selecting" and "bolding" but it's what I have so far, and might help me get some help on this. Also I have a funciton in there to add line-breaks -- even though it's not being called yet.

Link to comment
Share on other sites

Here's what I have now (updated just the .js files):

$(document).ready(function() {		$("#textarea").keyup(function() {		LineBreaks()	});	$("#Submit").click(function(){			TextRange();	});});function LineBreaks() {		var TextVal = $("textarea").val();	var AddBr = TextVal.replace(/\n/g, "<br/>");	$("#preview").html(AddBr);	}function TextRange() {	var textarea = document.getElementById("textarea");	var len = textarea.value.length;	var start = textarea.selectionStart;	var end = textarea.selectionEnd;	var sel = textarea.value.substring(start, end);	var replace = '<b>'+sel+'</b>';  	//alert(replace);	var outcome = textarea.value.substring(0,start)+replace+textarea.value.substring(end,len);	textarea.value = textarea.value.substring(0,start)+replace+textarea.value.substring(end,len);	var AddBr = outcome.replace(/\n/g, "<br/>");	$("#preview").html(AddBr);}}

So far this is only working in FF.

Link to comment
Share on other sites

Now, I've added some more options h1, h2, h3, bold, italic, line breaks - still only working in FFHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>	<script type="text/javascript" src="jquery-1.2.6.js"></script>	<script type="text/javascript" src="wiki1.js"></script></head><body>	<textarea id="textarea" cols="50" rows="10"></textarea>	<br />	<input id="Bold_It" class="styled_button" type="submit" value="Bold" />	<input id="Italic_It" class="styled_button" type="submit" value="Italic" />	<input id="H1_It" class="styled_button" type="submit" value="H1" />  	<input id="H2_It" class="styled_button" type="submit" value="H2" />  	<input id="H3_It" class="styled_button" type="submit" value="H3" />  	<div id="preview"></div></body></html>

JS:

$(document).ready(function() {		$("#textarea").keyup(function() {		LineBreaks()	});	$(".styled_button").click(function(){  		var ThisType= $(this).attr('id');		TextRange(ThisType);	});});function LineBreaks() {		var TextVal = $("textarea").val();	var AddBr = TextVal.replace(/\n/g, "<br/>");	$("#preview").html(AddBr);	}function TextRange(ThisType) {   	var textarea = document.getElementById("textarea");	var len = textarea.value.length;	var start = textarea.selectionStart;	var end = textarea.selectionEnd;	var sel = textarea.value.substring(start, end);	switch(ThisType) {	case 'Bold_It':		var replace = '<b>'+sel+'</b>';  		break;		case 'Italic_It':		var replace = '<i>'+sel+'</i>'; 		break;	case 'H1_It':		var replace = '<h1>'+sel+'</h1>'; 		break;	case 'H2_It':		var replace = '<h2>'+sel+'</h2>'; 		break;	case 'H3_It':		var replace = '<h3>'+sel+'</h3>'; 		break;	}	var outcome = textarea.value.substring(0,start)+replace+textarea.value.substring(end,len);	textarea.value = textarea.value.substring(0,start)+replace+textarea.value.substring(end,len);	var AddBr = outcome.replace(/\n/g, "<br/>");	$("#preview").html(AddBr);}

This is a good start. Please add help -- I need the "selection range" to work better (the "outcome" var).

Link to comment
Share on other sites

Newest additionsHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>	<title>NA</title>	<script type="text/javascript" src="jquery-1.2.6.js"></script>	<script type="text/javascript" src="wiki1.js"></script></head><body>	<textarea id="textarea" cols="50" rows="10"></textarea>	<br />	<input id="b_It" class="styled_button" type="submit" value="Bold" />	<input id="i_It" class="styled_button" type="submit" value="Italic" />	<input id="h1_It" class="styled_button" type="submit" value="H1" />	<input id="h2_It" class="styled_button" type="submit" value="H2" />	<input id="h3_It" class="styled_button" type="submit" value="H3" />	<input id="Link_It" class="styled_button" type="submit" value="Link" />	<div id="preview">	</div></body></html>

JS:

$(document).ready(function() {		$("#textarea").keyup(function() {		LineBreaks()	});	$(".styled_button").click(function(){  		var ThisType = $(this).attr('id');		var TheType = ThisType.replace(/_It/g, "")		TextRange(TheType);	});	});function LineBreaks() {		var TextVal = $("textarea").val();	var AddBr = TextVal.replace(/\n/g, "<br/>");	$("#preview").html(AddBr);	}function TextRange(TheType) {   	var textarea = document.getElementById("textarea");	var len = textarea.value.length;	var start = textarea.selectionStart;	var end = textarea.selectionEnd;	var sel = textarea.value.substring(start, end);	switch(TheType) {	case 'Link':			var url_Address=prompt("Please enter URL address","http://www.");			var url_Name=prompt("Please enter URL Name",sel);			var url_Target=prompt("Please enter URL target 'New_Window' or 'Self'","New_Window");			if (url_Address!=null && url_Address!="" && url_Address!="http://www." && url_Name!=null && url_Name!="" && url_Target!=null && url_Target!="") {			  if (url_Target=="New_Window") {				var replace = "<a href='"+url_Address+"' target='_blank'>"+url_Name+"</a>";					  } else {				var replace = "<a href='"+url_Address+"'>"+url_Name+"</a>";			  }			}		break;	default:			var replace = "<"+TheType+">"+sel+"</"+TheType+">";	}	var outcome = textarea.value.substring(0,start)+replace+textarea.value.substring(end,len);	textarea.value = textarea.value.substring(0,start)+replace+textarea.value.substring(end,len);	LineBreaks();}

What I need:

  • A "selected range" that works cross-browsers
  • A "limiter" to not allow the same "wrap" to occur twice
  • Remove a "wrap"
  • Remove open tags start tags and end tags

Link to comment
Share on other sites

  • Is IE the only browser which it's not working in right now? What's the latest version which works in IE?
  • Could you explain the "limiter" in more detail? When does text wrap twice? Why does it matter?
  • Why would you need to remove a wrap? (Am I understanding what a wrap is?)
  • When should tags be removed?

EDIT: http://w3schools.invisionzone.com/index.php?showtopic=19434

Link to comment
Share on other sites

  • 3 weeks later...

Thank you for your response :)Have you tried using that code? It's really not ideal how I have it setup.When I say "limiter", I am referring to not letting a word get "double wrapped" or wrapped twice - it matters because the output is nasty code. I'm a little OCD when it comes to having nice code output (I like to follow w3 standards 100%)Removing a wrap would be if... you made something "bold" and you wanted to make it "not bold" ... so remove the <b/> wrap. The wrap would be the "<b></b>"Basically, I want to just make a nice, clean, simple WYSIWYG that works cross-browsers. I know there are a lot out there, but I like to explore new developments and this has been something that I just cannot get to work out for me. Lets say, it's on my bucket-list.I would like it to be selectable text that can be edited and add "wraps" (like bold and italic) while making it work in all browsers. As edits are made (like adding wraps) I want it to be displayed as real CSS - so you select some of the text and select "bold" it displays as bold and the "background code" is <b>the selected text</b> -- and allow you to remove this wrap too.I think I rambled... did it make sense?Thanks again for your input. But really where should I go from here?

Link to comment
Share on other sites

I did try it, although I haven't read it yet. (I'm probably not familiar enough with JQuery to make sense of it.) I did notice that the Link button replaces my selection with "undefined" rather than wrapping it.I can't seem to find the thread with either the forum's search or Google, but someone suggested recently that an XML document be used to keep track of a WYSIWYG's HTML. This would help abstract tasks like finding an italic element within an italic element (italic.getElementsByTagName('i')), finding adjacent italic elements and fusing them, and unwrapping an element.BTW, I hope you know that you're not really using CSS? That's also possible, and might be a better practice even though the style can't be separated from the layout in this case. But it would make the XML DOM approach more complicated.

Link to comment
Share on other sites

There are better things than "contentEditable" and I wanted to build it from scratch.

Link to comment
Share on other sites

No. I'm back at the starting point. I have nothing answered... and I'm in the same spot.

Link to comment
Share on other sites

No. I'm back at the starting point. I have nothing answered... and I'm in the same spot.
I have to ask... what's wrong with TinyMCE? It's a free, cross browser, accessible (at least in terms of JS off-ness) WYSIWYG editor that can be plugged into any app and converts its final output into (X)HTML, meaning you can use XML validation tools on the server, ensuring best security and well-formdness.
Link to comment
Share on other sites

Did you read this?

I can't seem to find the thread with either the forum's search or Google, but someone suggested recently that an XML document be used to keep track of a WYSIWYG's HTML. This would help abstract tasks like finding an italic element within an italic element (italic.getElementsByTagName('i')), finding adjacent italic elements and fusing them, and unwrapping an element.
Link to comment
Share on other sites

boen_robot - to respond to your question - I just want to build my own. I want to learn how to.Jesdisciple - jQuery has a wrap() function that works, my main issue is having it display as real html and live edit it. The wrapping is the easy part.Has anyone ever built there own on this forum?

Link to comment
Share on other sites

I've never done it myself, but I've paid attention to others interested. You need to use a textarea for the HTML, to capture keyboard events. Then you lay an iframe over the textarea via CSS. When the user edits the textarea (which they don't know is there), you clean the HTML up and put it in the iframe. (Accessing the iframe's document involves a small but rather complicated technique, at least AFAIK.)

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...