|
JavaScript - Ie Fails Contentwindow.document.body For Wysiwyg
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! Similar TutorialsCode: <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<script language="javascript" type="text/javascript">
alert (document.body);
</script>
</head>
<body>
</body>
</html>
EDIT: moved script to after body, and now it works. Not the way it should be done I think ? I'm trying to implement saving the document.body.scrollTop value and then restoring it but the restore does not work. The SetScrollLocation() alert line is empty. The save alert() lines displays a value so its saving the scrollTop but it seems to loose the value on the SetScrollLocation() call. I'm saving on an OnClick event and then restoring when the form reloads from a refresh. PHP Code: function SaveScrollLocation () { document.forms[0].frm_body_hidden.value = document.body.scrollTop; alert(document.forms[0].frm_body_hidden.value); } function SetScrollLocation () { alert(document.forms[0].frm_body_hidden.value); document.body.scrolltop = document.forms[0].frm_body_hidden.value; } This code not work, Code: if( document.body.scrollTop() > 200 ) {
$( '.navigation' ).addClass( 'fixed' );
} else {
$( '.navigation' ).removeClass( 'fixed' );
}
I want it to work without jQuery, because half my site die's when i use jQuery, jsut want a simple scrollTop script for when im 200px from top it locks navigation fixed top the top, it works with jQuery but not without and been trying for hours to get it to work, any help would be kindly recieve thanks. I'm not a JS programmer, I stumble around. I have a web page that uses: d = document.createElement("script"); d.type = "text/javascript"; d.src = "/var/www/html/UpDist.php"; return (document.body.appendChild(d)); <-- what I want to do UpDist.php returns a value that I need to continue and I can't get the above code to work - UpDist runs, the return value doesn't. Thanks Chuck Hi, thanks for reading, I have to admit, I'm a noob, but what my code does drives me nuts, eternal thanks to whoever tries to help me out! In short my problem is that document.body.scrollHeight does not give me the correct pagesize combined with the viewport. I just want the parts of the page to be as long as the (in the original dynamicly entered) text in the middle. Imho pageheight = (document.body.scrollHeight+viewportheight); should give me the correct height of the page, but does not, why? It works and it is close, but not completely, I tried stuff like document.body.offsetHeight etc., but my guess is I miss facturing in a parameter, but I have not the slightest clue which... Here the page: http://buchenbergschule.de/ruh/depre...ode/test7.html Here the JS Code: Code: <script type="text/javascript">
<!--
var viewportwidth;
var viewportheight;
var pageheight;
if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}
else
{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
pageheight = (document.body.scrollHeight+viewportheight);
document.write('<style type=text/css> div#linksaussen');
document.write('{width:468px; height:'+(pageheight-896)+'px; position:absolute; top:896px; left:'+(((viewportwidth-948)*0.5084)-468)+'px; background-image:url(./images/back_links.png);}');
document.write('div#linksaussen1 {width:468px; height:897px; position:absolute; top:0px; left:'+(((viewportwidth-948)*0.5084)-468)+'px; background-image:url(./images/testlinks.png);}');
document.write('div#mitte {width:948px; height:'+pageheight+'px; position:absolute; top:0px; left:'+((viewportwidth-948)*0.5084)+'px; background-color:#FF0000;}');
document.write ('div#rechtsaussen1');
document.write ('{width:'+((viewportwidth-948)*0.4916)+'px; height:897px; position:absolute; top:0px; left:'+(948+((viewportwidth-948)/2))+'px; background-image:url(./images/testrechts.png); background-repeat:no-repeat;}');
document.write ('div#rechtsaussen');
document.write ('{width:'+((viewportwidth-948)*0.4916)+'px; height:'+(pageheight-896)+'px; position:absolute; top:896px; left:'+(948+((viewportwidth-948)/2))+'px; background-image:url(./images/back_rechts.png);}</style>');
alert (viewportwidth+'vpw'+viewportheight+'vph'+pageheight+'pgh')
//-->
</script>
Again please forgive my noobishness, my bad english and thanks again for any hint! I wanted to resize the modal dialog based on the content of the modal dialog for that i used the following lines of code, window.dialogWidth = document.body.scrollWidth+ "px"; window.dialogHeight = document.body.scrollHeight+ "px"; The 'document.body.scrollHeight' is not giving the exact height of the modal dialog bcos the button on the modal dialog are not completely visible to click for the user. Please can any one tell how to get the exact height of the modal dialog to resize it? I'm currently working on an HTML executor and would like users to be able to put javascript in their code if they wish to do so. Currently I have their input sent to an iframe via document.body.innerHTML. The problem, though, is that user submitted javascript doesn't work (with the exception of anything placed in the onload attribute of an image). Any suggestions?
Hi I have a code which allows a set few images to be used in a slide-show type style for switching the documents background image which displays a set few images which are declared in an object array. Basicly I have it all working perfectly with a "Timer" object value so you can set your own display length per picture but what I can't seem to do is make a cross-browser image fade transaction which works for background images, Here is the code I wrote and how its used, if anyone can help with links or examples that would be a very big help. ORIGINSlide.js Code: /*******************************************
* *
* ORIGIN Background Image SlideShow *
* Build 1.090.350.09 *
* *
* @Author: CMBSystems (Chris Bearcroft) *
* @Copyright: CMBSystems *
* @Created: 11/6/2010,1:24 AM (GMT) *
* *
*******************************************/
(function($){
$.ORIGIN = { // Starting The ORIGIN Class
Background: { // Starting The Background Sub-Class
Default: 0, // Default Array Key ID
Element: [], // Creating The Object For The Background Element
Slide: function() { // Starting The Slide Function
// Setting-Up The Element For Use In Update
$.ORIGIN.Background.Element = arguments[0];
// Updating The Document Body Background Image
setInterval('ORIGIN.Background.Update()',$.ORIGIN.Background.Element.Timer);
},
Preload: function(img) { // Starting The Preload Function
// Preload The Given Image Ready For Displaying
var loadIMG=new Image();
// Setting The Source For The Given Image
loadIMG.src=img;
},
Update: function() { // Starting The Update Function
if($.ORIGIN.Background.Element.Images !== undefined) {
if($.ORIGIN.Background.Default == $.ORIGIN.Background.Element.Images.length - 1) {
// Set Default Value As 0
$.ORIGIN.Background.Default = 0;
// Preload Next Image
$.ORIGIN.Background.Preload($.ORIGIN.Background.Element.Images[$.ORIGIN.Background.Default + 1]);
} else {
// Set Default Value As Current Array Key ID
$.ORIGIN.Background.Default = parseInt($.ORIGIN.Background.Default + 1);
// Preload Next Image
$.ORIGIN.Background.Preload($.ORIGIN.Background.Element.Images[$.ORIGIN.Background.Default + 1]);
}
// Set Document Body Background As The New Image
document.body.style.backgroundImage = "url("+$.ORIGIN.Background.Element.Images[$.ORIGIN.Background.Default]+")";
}
}
}
};
})(window);
Hoe to use:- Code: <!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
body {
background: #000000 url(images/1.jpg) bottom fixed no-repeat;
}
</style>
<script src="ORIGINSlide.js" type="text/javascript"></script>
<script type="text/javascript">
ORIGIN.Background.Slide({
"Timer":5000,
"Images": [
"images/1.jpg", // !IMPORTANT - Same image as the default background image.
"images/2.jpg",
"images/3.jpg"
]
});
</script>
</head>
<body>
</body>
</html>
If anyone can help me please do, Thank You DJCMBear ♫♫ Hello, I was wondering why my code is perfectly working in Firefox, but does not work in Internet Explorer at all: Code: <script language="javascript">
<!--
document.body.onload=document.body.appendChild(document.getElementById('testdiv'));
-->
</script>
I don't get any error messages, the div is just not showing how it is supposed to show with body as parent. Any suggestions? Thanks Hey this is my java script it works fine in FF , but in IE it shows type mismatch error .It shows my innerhtml page and also runs my script but i want to remove the type mismatch error would really appreciate your help.Thank you . Here is my javascript function function submitForm(){ // create request var xmlhttp = null; var serverhttp=null; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); serverhttp=new XMLHttpRequest(); if ( typeof xmlhttp.overrideMimeType != 'undefined') { xmlhttp.overrideMimeType('text/xml'); serverhttp.overrideMimeType('text/xml'); } } else if (window.ActiveXObject) { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); serverhttp = new ActiveXObject("Microsoft.XMLHTTP"); } else { alert('Perhaps your browser does not support xmlhttprequests?'); return; } // submit in JSON notation var email = document.customer.elements[0].value; var companyName = document.customer.elements[1].value var input = '{email:"'+email+'",company_name:"'+companyName+'"}'; var url = "URL"; var cgi = "URL/script.cgi"; xmlhttp.open('POST',url,true); //serverhttp.open('POST',url,true); // show feedback xmlhttp.onreadystatechange = function (aEvt) { var newDiv = document.createElement("div"); newDiv.innerHTML = "<b>Thank You!</b>"; //type mismatch occures over here document.body.replaceChild(newDiv,document.customer); serverhttp.open('POST',cgi,true); serverhttp.send(companyName); } xmlhttp.send(input); } Hey this is my java script it works fine in FF , but in IE it shows type mismatch error .It shows my innerhtml page and also runs my script but i want to remove the type mismatch error would really appreciate your help.Thank you . Here is my javascript function function submitForm(){ // create request var xmlhttp = null; var serverhttp=null; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); serverhttp=new XMLHttpRequest(); if ( typeof xmlhttp.overrideMimeType != 'undefined') { xmlhttp.overrideMimeType('text/xml'); serverhttp.overrideMimeType('text/xml'); } } else if (window.ActiveXObject) { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); serverhttp = new ActiveXObject("Microsoft.XMLHTTP"); } else { alert('Perhaps your browser does not support xmlhttprequests?'); return; } // submit in JSON notation var email = document.customer.elements[0].value; var companyName = document.customer.elements[1].value var input = '{email:"'+email+'",company_name:"'+companyName+'"}'; var url = "URL"; var cgi = "URL/script.cgi"; xmlhttp.open('POST',url,true); //serverhttp.open('POST',url,true); // show feedback xmlhttp.onreadystatechange = function (aEvt) { var newDiv = document.createElement("div"); newDiv.innerHTML = "<b>Thank You!</b>"; //type mismatch occures over here document.body.replaceChild(newDiv,document.customer); serverhttp.open('POST',cgi,true); serverhttp.send(companyName); } xmlhttp.send(input); } 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 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 ... My code is here and it works ... However, I would like my dynamic table to show on the same page as my body and not on a new blank page. I have created a DIV and try playing around with the document.getElementById('monTab').innerHTML but it's not working out for me ... What am i missing ? Regards, Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>new Script - Javascript Cours 11</TITLE>
<META content="text/html"; charset="UTF-8" http-equiv="content-type">
<SCRIPT type="text/javascript">
function createTable(){
var Etudiant = new Array(Number(prompt("How many Students will you put in ?","")));
document.write("<table border=\"1\">");
for (var i=0; i<Etudiant.length; i++) {
Etudiant[i] = window.prompt("S'il vous plait entrez le nom d'un etudiant " + (i+1) + ".","")
alert("Nice to see you "+Etudiant[i]);
document.write("<td>"+Etudiant[i]+"</td>");
j = parseInt(prompt("Combien de notes voulez vous calculez ?"));
for (h=0;h<j;h++){
notes[h] = parseInt(prompt("S'il vous plait entrez la "+(h+1)+" note de "+Etudiant[i]));
document.write("<td>"+notes[h]+"</td>");
}
document.write("<tr>");
}
document.write("</tr>");
document.write("</table>");
document.getElementById('monTab').innerHTML=Etudiant;
}
</script>
<BODY>
<H1>Combien de note voulez vous cumulez ?</H1>
<br>
<br>
<input type="button" name="btnSubmit" value="TRY IT" onclick="createTable()">
<div id="monTab" size="10"> Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ... </div>
</BODY>
</HTML>
I 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! 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, 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 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? |
|||||||