RTE Help

Before I go any further and post code, I trust some one will have answer. I have a Rich Text Editor that needs one major adjustment. It was downloaded and the author is no longer available so need help with it because I am not all that good with JS. It might get complicated.

I have had previous bad experiences on forums so please bear with me as I am a hesitant.

If someone who knows what they are doing without excessive code, then please respond to this and I will post the code.

Thanks for your understanding and patience.

 

This isn't really the way. Just post the code, and ask. There are plenty of qualified people on these forums, and if it's a reasonable question, you'll probably get an answer. Better chances if you put up a test case on jsfiddle.net. Also, be clear about what you need done to the script, and expect some replies like "why don't you just use <some other script>"

 

Thanks for your reply PoPSiCLe. I realize about the "way", but have had code stolen and been given uselss answers before on JS Forums, so am extremely wary.

The script below is the only one I want to use because it is small and does what I need it to do except that I want to eliminate the drop down and only code in the Paragraph tags in all browsers. It is clearly marked in the code.

I hope someone can come up with a good answer.

// +----------------------------------------------------------------+
// | SimpleTextEditor 1.0               |
// | Author: Cezary Tomczak [www.gosu.pl]                           |
// | Free for any use as long as all copyright messages are intact. |
// +----------------------------------------------------------------+

function SimpleTextEditor(id, objectId) {
if (!id || !objectId) { alert("SimpleTextEditor.constructor(id, objectId) failed, two arguments are required"); }
var self = this;
this.id = id;
this.objectId = objectId;
this.frame;
this.viewSource = false;

this.path = ""; // with slash at the end
this.cssFile = "";
this.charset = "iso-8859-1";

this.editorHtml = "";
this.frameHtml = "";

this.textareaValue = "";

this.browser = {
"ie": Boolean(document.body.currentStyle),
"gecko" : (navigator.userAgent.toLowerCase().indexOf("gecko") != -1)
};

this.init = function() {
if (document.getElementById && document.createElement && document.designMode && (this.browser.ie || this.browser.gecko)) {

// EDITOR
if (!document.getElementById(this.id)) { alert("SimpleTextEditor "+this.objectId+".init() failed, element '"+this.id+"' does not exist"); return; }
this.textareaValue = document.getElementById(this.id).value;
var ste = document.createElement("div");
document.getElementById(this.id).parentNode.replaceChild(ste, document.getElementById(this.id));
ste.id = this.id+"-ste";
ste.innerHTML = this.editorHtml ? this.editorHtml : this.getEditorHtml();

// BUTTONS
var buttons = ste.getElementsByTagName("td");
for (var i = 0; i < buttons.length; ++i) {
if (buttons[i].className == "button") {
buttons[i].id = this.id+'-button-'+i;
buttons[i].onmouseover = function() { this.className = "button-hover"; }
buttons[i].onmouseout = function() { this.className = this.className.replace(/button-hover(\s)?/, "button"); }
buttons[i].onclick = function(id) { return function() { this.className = "button-hover button-click"; setTimeout(function(){ document.getElementById(id).className = document.getElementById(id).className.replace(/(\s)?button-click/, ""); }, 100); } }(buttons[i].id);
}
}

// FRAME
if (this.browser.ie) {
this.frame = frames[this.id+"-frame"];
} else if (this.browser.gecko) {
this.frame = document.getElementById(this.id+"-frame").contentWindow;
} this.frame.document.designMode = "on"; this.frame.document.open(); this.frame.document.write(this.frameHtml ? this.frameHtml : this.getFrameHtml()); this.frame.document.close(); insertHtmlFromTextarea();}};
function lockUrls(s) {if (self.browser.gecko) { return s; } return s.replace(/href=["']([^"']*)["']/g, 'href="simpletexteditor://simpletexteditor/$1"');}
function unlockUrls(s) {if (self.browser.gecko) { return s; } return s.replace(/href=["']simpletexteditor:\/\/simpletexteditor\/([^"']*)["']/g, 'href="$1"');}
function insertHtmlFromTextarea() {try { self.frame.document.body.innerHTML = lockUrls(self.textareaValue); } catch (e) { setTimeout(insertHtmlFromTextarea, 10); }} this.getEditorHtml = function() {var html = ""; html += '<input type="hidden" id="'+this.id+'" name="'+this.id+'" value=""><table class="ste" cellspacing="0" cellpadding="0"><tr><td class="bar"><table id="'+this.id+'-buttons" cellspacing="0" cellpadding="0"><tr>';

// ----------------------------- *******************
// ----------------------------- *******************
// This needs to work for <P> tags only. I don't want the drop down at all. Headers can go.


html += '<td><select onchange="'+this.objectId+'.execCommand(\'formatblock\', this.value);this.selectedIndex=0;"><option value=""></option><option value="<h1>">Heading 1</option><option value="<h2>">Heading 2</option><option value="<h3>">Heading 3</option><option value="<p>">Paragraph</option><option value="<pre>">Preformatted</option></select></td>';


// ----------------------------- *******************
// ----------------------------- *******************

html += '<td><div class="separator"></div></td>';
html += '<td class="button"><img src="'+this.path+'images/bold.gif" width="20" height="20" alt="Bold" title="Bold" onclick="'+this.objectId+'.execCommand(\'bold\')"></td>';
html += '<td class="button"><img src="'+this.path+'images/italic.gif" width="20" height="20" alt="Italic" title="Italic" onclick="'+this.objectId+'.execCommand(\'italic\')"></td>';
html += '<td class="button"><img src="'+this.path+'images/underline.gif" width="20" height="20" alt="Underline" title="Underline" onclick="'+this.objectId+'.execCommand(\'underline\')"></td>';
html += '<td><div class="separator"></div></td>';
html += '<td class="button"><img src="'+this.path+'images/left.gif" width="20" height="20" alt="Align Left" title="Align Left" onclick="'+this.objectId+'.execCommand(\'justifyleft\')"></td>';
html += '<td class="button"><img src="'+this.path+'images/center.gif" width="20" height="20" alt="Center" title="Center" onclick="'+this.objectId+'.execCommand(\'justifycenter\')"></td>';
html += '<td class="button"><img src="'+this.path+'images/right.gif" width="20" height="20" alt="Align Right" title="Align Right" onclick="'+this.objectId+'.execCommand(\'justifyright\')"></td>';
html += '<td><div class="separator"></div></td>';
html += '<td class="button"><img src="'+this.path+'images/ol.gif" width="20" height="20" alt="Ordered List" title="Ordered List" onclick="'+this.objectId+'.execCommand(\'insertorderedlist\')"></td>';
html += '<td class="button"><img src="'+this.path+'images/ul.gif" width="20" height="20" alt="Unordered List" title="Unordered List" onclick="'+this.objectId+'.execCommand(\'insertunorderedlist\')"></td>';
html += '<td><div class="separator"></div></td>';
html += '<td class="button"><img src="'+this.path+'images/outdent.gif" width="20" height="20" alt="Outdent" title="Outdent" onclick="'+this.objectId+'.execCommand(\'outdent\')"></td>';
html += '<td class="button"><img src="'+this.path+'images/indent.gif" width="20" height="20" alt="Indent" title="Indent" onclick="'+this.objectId+'.execCommand(\'indent\')"></td>';
html += '<td><div class="separator"></div></td>';
html += '<td class="button"><img src="'+this.path+'images/link.gif" width="20" height="20" alt="Insert Link" title="Insert Link" onclick="'+this.objectId+'.execCommand(\'createlink\')"></td>';
html += '<td class="button"><img src="'+this.path+'images/image.gif" width="20" height="20" alt="Insert Image" title="Insert Image" onclick="'+this.objectId+'.execCommand(\'insertimage\')"></td>';
html += '<td><div class="separator"></div></td>';
html += '<td class="button"><img src="'+this.path+'images/help.gif" width="20" height="20" alt="Help" title="Help" onclick="'+this.objectId+'.openWindow(\''+this.path+'help.html\', \'300\', \'300\')"></td>';
html += '</tr></table></td></tr>';
html += '<tr><td class="frame"><iframe id="'+this.id+'-frame" frameborder="0"></iframe></td></tr>';
html += '<tr><td class="source"><input id="'+this.id+'-viewSource" type="checkbox" onclick="'+this.objectId+'.toggleSource()"> View Source</td></tr>';
html += '</table>';
return html;};
this.getFrameHtml = function() {var html = ""; html += '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">';
html += '<html><head>'; html += '<meta http-equiv="Content-Type" content="text/html; charset='+this.charset+'">'; html += '<title>SimpleTextEditor frame</title>'; html += '<style type="text/css">pre { background-color: #eeeeee; padding: 0.75em 1.5em; border: 1px solid #dddddd; }</style>';
if (this.cssFile) { html += '<link rel="stylesheet" type="text/css" href="'+this.cssFile+'">'; } html += '<style type="text/css">html,body { cursor: text; } body { margin: 0.5em; padding: 0; }</style>'; html += '</head><body></body></html>'; return html;};
this.openWindow = function(url, width, height) {var x = (screen.width/2-width/2); var y = (screen.height/2-height/2); window.open(url, "", "scrollbars=yes,width="+width+",height="+height+",screenX="+(x)+",screenY="+y+",left="+x+",top="+y);};
this.toggleSource = function() {var html, text; if (this.browser.ie) {if (!this.viewSource) {html = this.frame.document.body.innerHTML; this.frame.document.body.innerText = unlockUrls(html); document.getElementById(this.id+"-buttons").style.visibility = "hidden"; this.viewSource = true;} else {text = this.frame.document.body.innerText; this.frame.document.body.innerHTML = lockUrls(text); document.getElementById(this.id+"-buttons").style.visibility = "visible"; this.viewSource = false;}}
else if (this.browser.gecko) {if (!this.viewSource) {html = document.createTextNode(this.frame.document.body.innerHTML); this.frame.document.body.innerHTML = ""; this.frame.document.body.appendChild(html); document.getElementById(this.id+"-buttons").style.visibility = "hidden"; this.viewSource = true;}
else {html = this.frame.document.body.ownerDocument.createRange(); html.selectNodeContents(this.frame.document.body); this.frame.document.body.innerHTML = html.toString(); document.getElementById(this.id+"-buttons").style.visibility = "visible"; this.viewSource = false;}}
document.getElementById(this.id+"-viewSource").checked = this.viewSource ? "checked" : ""; document.getElementById(this.id+"-viewSource").blur();};
this.execCommand = function(cmd, value) {if (cmd == "createlink" && !value) {var url = prompt("Enter URL:", "");
if (url) { this.frame.focus(); this.frame.document.execCommand("unlink", false, null);
if (this.browser.ie) this.frame.document.execCommand(cmd, false, "simpletexteditor://simpletexteditor/"+url); else if (this.browser.gecko) this.frame.document.execCommand(cmd, false, url); this.frame.focus(); }} else if (cmd == "insertimage" && !value) {var imageUrl = prompt("Enter Image URL:", "");
if (imageUrl) {this.frame.focus(); this.frame.document.execCommand(cmd, false, imageUrl); this.frame.focus();}} else {this.frame.focus(); this.frame.document.execCommand(cmd, false, value); this.frame.focus();}};
this.isOn = function() {return Boolean(this.frame);};
this.getContent = function() {try { return unlockUrls(this.frame.document.body.innerHTML); } catch(e) { alert("SimpleTextEditor "+this.objectId+".getContent() failed"); }};
this.submit = function() {if (this.isOn()) {if (this.viewSource) { this.toggleSource(); } document.getElementById(this.id).value = this.getContent(); }};}

Code (JavaScript):

Thank you in advance.

 

Well that was a waste of time.