kvnmck18 Posted November 9, 2008 Share Posted November 9, 2008 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 More sharing options...
kvnmck18 Posted November 9, 2008 Author Share Posted November 9, 2008 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 More sharing options...
kvnmck18 Posted November 10, 2008 Author Share Posted November 10, 2008 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 More sharing options...
kvnmck18 Posted November 10, 2008 Author Share Posted November 10, 2008 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 More sharing options...
kvnmck18 Posted November 10, 2008 Author Share Posted November 10, 2008 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 More sharing options...
Jesdisciple Posted November 12, 2008 Share Posted November 12, 2008 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 More sharing options...
kvnmck18 Posted December 3, 2008 Author Share Posted December 3, 2008 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 More sharing options...
Jesdisciple Posted December 4, 2008 Share Posted December 4, 2008 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 More sharing options...
Synook Posted December 4, 2008 Share Posted December 4, 2008 Why not just use contentEditable? Link to comment Share on other sites More sharing options...
kvnmck18 Posted December 4, 2008 Author Share Posted December 4, 2008 There are better things than "contentEditable" and I wanted to build it from scratch. Link to comment Share on other sites More sharing options...
Jesdisciple Posted December 4, 2008 Share Posted December 4, 2008 Looks like it's not remotely cross-browser to me... http://www.google.com/search?hl=en&q=c...ditable+mozilla Link to comment Share on other sites More sharing options...
kvnmck18 Posted December 4, 2008 Author Share Posted December 4, 2008 Yeah, it doesn't even load for me correctly in FF. Link to comment Share on other sites More sharing options...
Jesdisciple Posted December 5, 2008 Share Posted December 5, 2008 So... Are you done with this thread? Link to comment Share on other sites More sharing options...
kvnmck18 Posted December 6, 2008 Author Share Posted December 6, 2008 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 More sharing options...
boen_robot Posted December 6, 2008 Share Posted December 6, 2008 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 More sharing options...
Jesdisciple Posted December 7, 2008 Share Posted December 7, 2008 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 More sharing options...
kvnmck18 Posted December 14, 2008 Author Share Posted December 14, 2008 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 More sharing options...
Jesdisciple Posted December 14, 2008 Share Posted December 14, 2008 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.