I found a straightforward iframe text editor in this discussion thread. I've been attempting to create a "reply with quote" feature that adds HTML-tagged post content to the editor. However, I encountered an issue with making the iframe body clickable and allowing text entry outside of the grey appended div element. Is there a solution to re-enable clicking within the body?
HTML:
<div class='margin'><div class='content'><h4>wreeeeeeeeee dsfsd sdfd sddfsfdsf</h4></div> <button id='reply'>Quote</button>
<div>
<a id="bold" class="font-bold">B</a>
<a id="italic" class="italic">I</a>
<select id="fonts">
<option value="Arial">Arial</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="Monotype Corsiva">Monotype</option>
<option value="Tahoma">Tahoma</option>
<option value="Times">Times</option>
</select>
<br/>
<iframe id="textEditor" style="width:500px; height:170px;">
</iframe>
<input type='hidden' name='comments' id='comments' />
<input id='submit'type='submit' value='submit'/>
Code:
document.getElementById('textEditor').contentWindow. document.designMode="on";
document.getElementById('textEditor').contentWindow. document.close();
$("#bold").click(function(){
if($(this).hasClass("selected"))
{
$(this).removeClass("selected");
}else
{
$(this).addClass("selected");
}
boldIt();
});
$("#italic").click(function(){
if($(this).hasClass("selected"))
{
$(this).removeClass("selected");
}else
{
$(this).addClass("selected");
}ItalicIt();
});
$("#fonts").change(function(){
changeFont($("#fonts").val());
});
function boldIt()
{
var edit = document.getElementById("textEditor").contentWindow;
edit.focus();
edit.document.execCommand("bold", false, "");
edit.focus();
}
function ItalicIt()
{
var edit = document.getElementById("textEditor").contentWindow;
edit.focus();
edit.document.execCommand("italic", false, "");
edit.focus();
}
function changeFont(font)
{
var edit = document.getElementById("textEditor").contentWindow;
edit.focus();
edit.document.execCommand("FontName", false, font);
edit.focus();
}
$('#textEditor').contents().find('body').css("word-wrap", "break-word");
$('#reply').click(function(){
var content = $(this).prev().html();
$("#textEditor").contents().find("body").html('<div style="background:grey;color:#fff;border:1px solid #222">Reply to someone<br>'+content+'</div>');
});
(Apologies for not converting the example code back to jQuery syntax, as I encountered an undefined document error in my attempt)