|
JavaScript - Submit A Textarea/iframe With Wysiwyg-editor
Hi! I am trying to use a very simpe wysiwyg-editor. It works fine, except i don't know how to proces the data from the iframe. I simply cant make use of the text written.
Code: <html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function Init() {
document.getElementById("rte").contentWindow.document.designMode = "On";
}
function doBold() {
document.getElementById("rte").contentWindow.document.execCommand('bold', false, null);
}
function doItalic() {
document.getElementById("rte").contentWindow.document.execCommand('italic', false, null);
}
function doURL() {
var mylink = prompt("Enter a URL:", "http://");
if ((mylink != null) && (mylink != "")) {
document.getElementById('rte').contentWindow.document.execCommand("CreateLink",false,mylink);
}
}
function doImage() {
myimg = prompt('Enter Image URL:', 'http://');
document.getElementById('rte').contentWindow.document.execCommand('InsertImage', false, myimg);
}
</script>
</head>
<body onLoad="Init();">
<input type="submit" name="btnBold" value="bold" on id="btnBold" onClick="doBold();">
<input type="submit" name="btnItalic" id="btnItalic" value="italic" onClick="doItalic();">
<input type="submit" name="btnURL" id="btnURL" value="URL" onClick="doURL();">
<input type="submit" name="btnImg" id="btnImg" value="Image" onClick="doImage();">
<br>
<form action="process.php" method="post">
<iframe name="rte" id="rte"><textarea name="areal"></textarea>
</iframe>
<br>
<input type="submit" value="Submit"></form>
</body>
</html>
Most editors seem use this iframe-thing, without telling how to send the information by a form. Similar TutorialsI use http://www.openwebware.com/ wysiwyg editor. It is necessary to change something in it, but I do not know how? When the inserted image in the editor, and then changes the image size, stretches the image in an editor, I want to record a change image size, without editor in <input type='text'> field. Is there any idea how to bring? Thanks! WYSIWYG editor for PHPBB3. As far as I'm aware only unofficial MODS exist, and one has the impression they are fraught with bugs. I need a polished free opensource solution. I was really hopeful there was an official WYSIWYG, but I haven't found it yet if there is one. Can anyone confirm? Hi All, Having a real problem with IE losing focus when clicking outside the wysiwyg iframe. This works fine in Firefox, Chrome, Safari, Opera. Code: <html>
<head></head>
<body>
<script type="text/javascript">
function initializeEditor() {
contentEditor.document.designMode='on';
}
function insertHTML1() {
var html = "<em><u>Some Text</u></em><p>2. Select this text<p><strong></u>Some text</strong>";
document.contentEditor.focus();
range = contentEditor.document.selection.createRange();
document.contentEditor.focus();
range.pasteHTML(html);
}
function insertHTML2() {
var html = "<strong>INSERTED TEXT</strong>";
document.contentEditor.focus();
range = contentEditor.document.selection.createRange();
document.contentEditor.focus();
range.pasteHTML(html);
}
</script>
<iframe name="contentEditor" id="contentEditor" onLoad="initializeEditor();"></iframe>
<p><input type="button" value="1. Click Here" onClick="insertHTML1()">
<p><input type="text" value="3. Click Here">
<p><input type="button" value="4. Click Here" onClick="insertHTML2()">
</body>
</html>
To demonstrate, first follow steps 1, 2 and 4. This works fine! Introduce step 3, clicking in a field outside the iframe and focus is lost. Appreciate any help!! Thanks I am allowing my customers to use a rich text editor (wysiwyg) on a jsp page to create snippets of HTML code that can be used to describe their items. When they want to add an image, table or custom tag (something we wrote), they are presented with a properties box created using javascript on the same page just below the editor. Upon clicking 'Insert' button on the properties box, I use javascript to create an HTML string with the tag information and insert the string into the edited page where the cursor was. The problem is that I can't seem to find a reliable way to know where the cursor was. More information: I am a C programmer who morphed to a Java programmer who knows some javascript. The JSP page looks like this: -------------------------------------------------------------------- Some text and text fields for some basic information -------------------------------------------------------------------- The javascript wysiwyg editor -------------------------------------------------------------------- The properties box (changes depending on the type of item being inserted) -------------------------------------------------------------------- Submit button, etc. for the page (so the information can be persisted) I have tried: 1. Seven days of searching the web for helpful hints. 2. Using a popup window to get the properties (doesn't work because in IE7, closing the popup also kills the session... I need to use some of the beans on the main window on the popup.) 3. Processing onMouseDown and onKeyDown events storing the element information in a global variable so I could use it later to know the point of insertion. (Has not been reliable and the arrow keys present real problems with where the cursor ends up as that is different from where it was pressed.) I am frustrated because I don't seem to be gaining on the problem. I suspect it is because I have missed something very simple. Does anyone have any ideas? Thanks in advance. Carl I would like to add a Lightbox like image display function to TinyMCE. What is a good approach in the regard, integration or extension? Thank for your input in advance. I have a form, which has a textarea. Though I'm wanting it to be able to submit with the enter key. Can anyone help me? Everything I've tried either refreshes, or does a linebreak. Heres the code to the whole page, seeing as the form takes up most of it. Code: <?
require("scripts/function.s");
$username = $x;
$password = $y;
require("scripts/verify.s");
?>
<html>
<head>
<link rel=stylesheet type=text/css href=style.css>
<script type="text/javascript" src="http://www.katarra.net/googiespell/AJS.js"></script>
<script type="text/javascript" src="http://www.katarra.net/googiespell/googiespell.js"></script>
<script type="text/javascript" src="http://www.katarra.net/googiespell/cookiesupport.js"></script>
<script language=Javascript>
function clearForm(f){
f.action.value = f.nonaction.value;
f.nonaction.value = "";
return true;
}
</script>
<script language="javascript" type="text/javascript">
setTimeout(
function()
{
var mytext = document.getElementById("rptext");
mytext.focus();
mytext.select();
}
, 1);
</script>
<style type="text/css">
<!--
a {
text-decoration:none;
}
.style3 {font-size: larger}
-->
</style>
</head>
<body>
<body onLoad = "focusIt()">
<script language="javascript" type="text/javascript">
//window.alert("hello");
function focusIt()
{
var mytext = document.getElementById("rptext");
mytext.focus();
}
</script>
<form action=main.php#thebottom method=post target=TOP name=theForm onSubmit="clearForm(theForm)">
<table width="204" border="0" align="left" cellpadding="10">
<tr>
<td width="18" valign="middle"><div align="center"><? echo "<a href=\"main.php?username=$x&password=$y&action=look+at+$x\" target=\"TOP\" style=\"text-decoration:none\">APPEARANCE</a>" ?></div></td>
<td width="18" valign="middle"><div align="center"><? echo "<a href=\"main.php?username=$x&password=$y&action=stats\" target=\"TOP\">STATS</a>" ?></div></td>
<td width="18" valign="middle"><div align="center"><? echo "<a href=\"main.php?username=$x&password=$y&action=quests\" target=\"TOP\">QUESTS</a>" ?></div></td>
<td width="18" valign="middle"><div align="center"><? echo "<a href=\"main.php?username=$x&password=$y&action=who\" target=\"TOP\">WHO</a>" ?></div></td>
<td width="20" valign="middle"><div align="center"><? echo "<a href=\"main.php?username=$x&password=$y&action=description\" target=\"TOP\">DESCRIPTION</a>" ?></div></td>
</tr>
<tr>
<td valign="middle"><div align="center"><? echo "<a href=\"main.php?username=$x&password=$y&action=settings\" target=\"TOP\">SETTINGS</a>" ?></div></td>
<td valign="middle"><div align="center"><? echo "<a href=\"wiki\" target=\"_blank\">HELP</a>" ?></div></td>
<td valign="middle"><div align="center"><? echo "<a href=\"main.php?username=$x&password=$y&action=listmail\" target=\"TOP\">MAIL</a>";?></div></td>
<td colspan="2" valign="middle"><div align="center"><span class="style3"><? echo "<b><a href=\"main.php?username=$x&password=$y&action=quit\" target=\"TOP\"><u>LOG OUT</u></a></b>" ?></span></div> <div align="center"></div></td>
</tr>
</table>
<table width="627" border="0" align="right" cellpadding="0">
<tr>
<td width="132"><div align="right"><?$admin = get("admin");if($admin == "Y" || $admin == "Y+" || $admin === "special") echo "<a href=\"admin.php\" target=\"TOP\">ADMIN PANEL</a>";?>
</div></td>
<td width="317" rowspan="3"><div align="center">
<textarea name="nonaction" cols="50" rows="3" wrap="virtual" id="rptext" class="textarea"></textarea>
</div></td>
<td width="151"><div align="right"></div></td>
</tr>
<tr>
<td><div align="right">
<?$admin = get("admin");if($admin == "Y+") echo "<input type=checkbox name=nolog>";?>
</div></td>
<td>
<input type=submit value=SUBMIT>
</a></td>
</tr>
<tr>
<td><div align="right">
<?
//<form action=main.php#thebottom method=post><input type=hidden name=username value=$x><input type=hidden name=password value=$y><input type=submit border=0 style=border:0;background-color:#006;color:#FF0;font-family:Tahoma; name=command value=Clear></form>
//<a href=\"main.php?username=$x&password=$y&action=clear\" target=\"TOP\">Clear</a>
?>
<? echo "<input type=button onclick=\"theForm.action.value='clear';theForm.submit();\" border=0 style=border:0;background-color:#000;color:#FF0;font-weight:bold; value=CLEAR>" ?></div></td>
<td><div align="right">
<input type=hidden name=action value="">
<input type=hidden name=username value=<?=$x?>>
<input type=hidden name=password value=<?=$y?>>
</div></td>
<br>
</table>
</FORM>
<div align="center">
<p> </p>
<p><a href="https://www.ixwebhosting.com/templates/ix/v2/affiliate/clickthru.cgi?id=jrdelaney" target="_blank"><img src="https://www.ixwebhosting.com/templates/ix/v2/images/banners/88x31-businessplus.gif" border=0 align="absmiddle"></a></p>
</div>
<script type="text/javascript">
var googie1 = new GoogieSpell("googiespell/", "http://www.katarra.net/sendReq.php?lang=");
googie1.decorateTextarea("rptext");
</script>
</body>
</html>
Hello all, i need a help that i have a submit form a iframe. Normally the code process is : Code: <a href="submit_news7c98.html?iframe=true&width=420&height=560" name="submit_news" class='ie6fix' id='submit_news' rel="prettyPhoto">Submit Query</a> Now iframe load and form process to form_process.php and then when i click submit the form process to form_process2.php now i will able to close the iframe after submit. I have tried simple javascript solution like body onload function timer function but they only work with if the open the submit_news7c98.html page direct it is not working when i am opening it as iframe from my site. so anybody can help me on this ? Hi all, I have an iframe on my page and I added the following code to detect the iframe file height to avoid scrolling which is working fine. Code: <script type="text/javascript">
function setIframeHeight(iframeName) {
//var iframeWin = window.frames[iframeName];
var iframeEl = document.getElementById? document.getElementById(iframeName): document.all? document.all[iframeName]: null;
if (iframeEl) {
iframeEl.style.height = "auto"; // helps resize (for some) if new doc shorter than previous
//var docHt = getDocHeight(iframeWin.document);
// need to add to height to be sure it will all show
var h = alertSize();
var new_h = (h-148);
iframeEl.style.height = new_h + "px";
//alertSize();
}
}
function alertSize() {
var myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myHeight = document.body.clientHeight;
}
//window.alert( 'Height = ' + myHeight );
return myHeight;
}
</script>
<body onload="setIframeHeight('ifrm');">
<iframe name="ifrm" id="ifrm" src="http://thirdpartywebsite.com/search.htm" width="948" frameborder="no" scrolling="no" style="margin-top:45px; margin-left:10px; align="center">
</iframe>
There is a form in the iframe and it is coming from a third party web site which I have no access. My problem is when a client submits the search form in the iframe search results page is higher than the search main page and half of search results page is not shown. Is there a way to sense that the page in the iframe is changed and resize the iframe height accordingly? Thanks Ceyhun This is probable very easy, I've tried with normal html and am unable to get my head around it. I would like to in some way replicate how a web browser works. I have a form entry field with a submit button at the top of the page. Under that I have an iframe. I copy the url http://www.bbc.co.uk into the entry field, click submit and the iframe updates with the website. Have looked around and haven't found anything similar. Code so far.... <form target="myURL"> <input type="text" name="goTo"> <input type="submit" name="submit" value="submit"> </form> <iframe src="" name="myURL" border="0" frameborder="0" width="768" height="354"></iframe> Thanks in advanced. Death = $Mill I have a form inside an iFrame which I want to submit with javascript as the iFrame loads. For example: Code: <iframe src="......." name="myiframe" id="myiframe"> <form method="post" id="myform" name="myform" action="http:// www.yahoo.com" rel="nofollow" target="_self"> </form> </iframe> No matter how I try to submit the form I cannot get it. I have tried: document.getElementsByName("myform") document.myiframe.myform all other combinations I try gives the same, i cannot access the form. (The page inside the iFrame is from the same domain as the parent page, I am not trying to do any cross domain scripting) Can you please assist me getting this working ? Thanks! i have this code Code: function blockformat(tag) {
if(document.selection){
var Editor = document.getElementById('iView').contentWindow.document;
var range = Editor.selection.createRange();
if (range.pasteHTML) {
var content=Editor.selection.createRange().htmlText;
content1="<"+tag+">"+content+"</"+tag+">";
range.pasteHTML(content1);
}
} else if (window.getSelection) {
var Editor = document.getElementById('iView').contentWindow;
var range = Editor.getSelection().getRangeAt(0);
content1="<"+tag+">"+range+"</"+tag+">";
getIFrameDocument('iView').execCommand('insertHTML',false, content1);
}
}
the code get tag like "div" and insert into my wysiwyg the text that marked between the got tags. to example blockformat('div'); not in my wysiwyg iframe there is " <div>blabla</div>" now i want that if i clicked again the tags are remove like a execcommand if i click bold one time its make the text bold and second time its remove the bold tnx ... Hey, as i'm nearly finished writing my own wysiwyg editor, i need help to get it working in IE. So here is the Editor i hope you want to help me. Morri I am trying to create a WYSIWYG editor for my site, but seeing as how every browser gives different results when using the execcommand method, I am trying to do my own insertions instead. What I would like to do is create an iframe with designMode On to enable editing of the frame, but when someone does a command to bold text, I want to make a method which enters <b>Some Highlighted Text</b> into the frame where the user highlighted so it would appear bold and the source would have the <b> tags. My issue is I have been unsuccessful in learning how to take the selected text within an iframe and surround it with tags. I was able to accomplish this in Internet Explorer using this code: Code: //iFrame is the object handling the frame var text = iframe.document.selection.createRange().text; var obj = iframe.document.selection.createRange(); obj.text = '<i>' + text + '</i>'; Except the resulting text would actually have the <i> tags appear, and the source would be: Code: <i>Some Text</i> Pretty retarded if you ask me since in no way did I want it to convert the tags into entities. Anyway, if anyone could please direct me to a method in which I can successfully take selected text within the iframe and surround it with HTML tags in such a way that the formatting will actually show, I would be very grateful ^_^. Hey, i'm building my own wyiwyg-editor, and all works very good, exept getting the current focused element, i mean i wan't to show a path where the user is, and this function came out: Code: wysiwyg.getPath = function(i) {
if(wysiwyg.getMode(i) == 'source') return;
curr = document.getElementById('wysiwyg_frame_' + i).contentWindow.document;
sel = curr.selection;
if(sel == undefined) return;
if (sel.type=="Control") {
// control selection
range = sel.createRange();
if (range.length==1) {
elem = range.item(0);
}
else {
// multiple control selection
return;
}
} else {
range = sel.createRange();
elem = range.parentElement();
}
p = elem.tagName;
while(elem == elem.parentNode && elem.tagName != 'BODY'){
p = elem + ' > ' + p;
}
document.getElementById('wysiwg_path_' + i).innerHTML = p;
}
unfortunaly sel is always undefined, how can i fix it? i hope you can help me Morri I've downloaded a simple wysiwyg script from the internet, however I want to add a wordcounter to it. The main idea is that the amount of words is refreshed every time a new character is entered. However I haven't got a clue on how to implement this, I've used javascript a lot a few years ago.. but this is out of my league. So I'm hoping someone can help me with this. The html file: Quote: <html> <head> <style type="text/css">@import url('SimpleTextEditor.css');</style> <script src="SimpleTextEditor.js"></script> <script type="text/javascript"> function countWords(){ document.form1.wordcount.value = document.form1.inputString.value.split(' ').length + '/300 words'; if (document.form1.inputString.value.split(' ').length >= 50){ document.getElementById("wordcount").style.color = "red"; }else{ document.getElementById("wordcount").style.color = "black"; } } </script> </head> <body> <form name="form1" method="post"> <div style="height:34px;width:750px;margin-bottom:5px;background-image:url('mainbar.png');background-repeat:no-repeat; "><input style="margin-top:6px;margin-left:25px;" name="wordcount" type="text" value="" size="6"></div> <textarea name="inputString" id="inputString" cols="70" rows="4" onkeyup='countWords();'></textarea> <br> <script> var ste = new SimpleTextEditor("inputString", "ste"); ste.cssFile = 'test.css'; ste.charset = 'iso-8859-1'; ste.init(); </script> <input type="submit" value="submit" onclick="ste.submit();"> </form> </body> </html> The javascript file: Quote: 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="">'; html += '<table class="ste" cellspacing="0" cellpadding="0">'; html += '<tr><td class="bar"><table id="'+this.id+'-buttons" cellspacing="0" cellpadding="0"><tr>'; //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(); } }; } As you can see there are a few lines I wrote myself in the HTML file, but they didn't do the trick. Hi all, I have a small message board with TinyMCE (WYSIWYG) editor integrated into it. It works fine for everything except when someone tries to post code... especially content with the < or > characters. For example, a person may try to post an example of how to make red text in HTML. But when he does this: <span style="color:#ff0000;">Hello</span> Of course it comes out like this: Hello Or C code... #include <stdio.h> gets stripped off as INVALID HTML! So, I ended up making a Javascript filter that pre-processes pasted data and turns all < characters into "‹" and all > into "›" characters. BTW, those two characters look very similar to < and >. They look like this: ‹ and › so that, for example: ‹span style="color:#ff0000;"›Hello‹/span› is NOT interpreted as HTML. Similarly, I pre-convert <br /> to "↵" which is a little "down/left/arrow" symbol that is on most ENTER keys on a keyboard. After converting all the < and > characters, I then restore the ↵ back to <br /> (I do this to preserve the < and > in the br!). The resulting text is posted verbatim as a message, but if it's placed in a CODEBOX, then the codebox does an "onfocus="fix-it-back" meaning that the codebox innerHTML is converted back to < and > characters so it can be selected and copied as real code. All this seems to me to be complicated and convoluted. My gut tells me there is a simpler, better way to do it. Any suggestions or ideas please? Will be appreciated! Thanks! -- Roger Ok, so I'm working on a What-You-See-Is-What-You-Get editor, and it works flawlessly - with standards. I'm trying to work out bugs it has with IE, this one is particularly tricky: When the page loads, the editor should be inialized, and the inner HTML of the body of the iframe should set to specified text. This seems to work fine in standards-compliant browsers - Webkit, Firefox. But nothing is written to the body when when the page loads in IE, here's the gist of the code for reference: Code: function loadText(){
document.getElementById("edit").contentWindow.document.body.innerHTML = "predefined text";
}
window.onload = loadText;
The oddest part, is if I come from a new page to the editor in IE, the text doesn't appear. But when I refresh in IE, the text appears for a split second and disappears. Any help on this matter is greatly appreciated! Ok, so the code below will open a DIV under the iframe when right-clicking inside the iframe. The DIV will display the mouse coords where it was clicked. This works in IE, but I can't get it to work in Mozilla (FF, Saf, Op, Chr). Any help appreciated! Code: <html>
<body>
<script language="JavaScript">
function initialise() {
if (navigator.appName == "Microsoft Internet Explorer") {
editorContent.document.designMode='on';
editorContent.document.attachEvent("oncontextmenu", showContextMenu);
editorContent.document.attachEvent("onclick", hideContextMenu);
} else {
document.getElementById("editorContent").contentDocument.designMode='on';
editorContent.document.addEventListener("contextmenu", showContextMenu, true);
editorContent.document.addEventListener("click", hideContextMenu, true);
}
}
function showContextMenu() {
if (navigator.appName == "Microsoft Internet Explorer") {
var editorContentWin = document.getElementById('editorContent').contentWindow;
var mousex = editorContentWin.event.clientX;
var mousey = window.screenTop + editorContentWin.event.clientY;
} else {
/***************************************/
/* WHAT TO DO HERE TO WORK IN MOZILLA? */
/***************************************/
}
document.getElementById("contextMenu").style.visibility = 'visible';
document.getElementById("contextMenu").style.display = '';
document.getElementById("contextMenu").innerHTML = 'X: '+mousex+' Y: '+mousey;
if (navigator.appName != "Microsoft Internet Explorer") {
document.stopPropagation();
document.preventDefault();
}
return false;
}
function hideContextMenu() {
document.getElementById("contextMenu").style.visibility = 'hidden';
document.getElementById("contextMenu").style.display = 'none';
}
</script>
<iframe id="editorContent" name="editorContent" width="400" height="400" frameborder="1" onLoad="initialise();"></iframe>
<div id="contextMenu" style="width: 100px; height: 20px; border: 1px solid black; background-color: yellow; visibility: hidden; display: none"></div>
</body>
</html>
I have a WYSIWYG text area and I want to insert combo-box' value at current cursor location of the WYSIWYG text area. I have a simple textarea where the value is inserting on combo-box clicking. But when I do integrate both files, the functionality wont work. I have both scripting files..
|
|||||||