...

View Full Version : How to put a formatted table in a wysiwyg editor as iframe



baluba
02-14-2007, 05:02 PM
Hi,
I'm italian guy and my english is not very good... :) I hope that you can understand me...
I'm developing a personal wysiwyg editor as a IFRAME.
At the moment I have developed all the basic features (as bold, italic, underline, etc..), but I don't know how can I put a formatted table in the IFRAME at the position of the cursor and how can I add a row or a column at this one.

Can anyone help me?

Thank..

Baluba

FJbrian
02-14-2007, 05:04 PM
the source of the iframe is a page, why can't that page have a formatted table? I'm misunderstanding something here I think

baluba
02-15-2007, 09:48 AM
the source of the iframe is a page, why can't that page have a formatted table? I'm misunderstanding something here I think

how can I know the position of the cursor in the iframe?

vwphillips
02-15-2007, 10:21 AM
this is how I make the IFrame editable


var zxcdoc=zxcifr.contentWindow.document;
var zxcsource=document.getElementById(zxcCurrentID);
zxcdoc.open();
if (zxcsource.tagName.toUpperCase()=='TEXTAREA'){ zxcdoc.write(zxcsource.value); }
if (zxcsource.tagName.toUpperCase()=='DIV'){ zxcdoc.write(zxcsource.innerHTML); }
zxcdoc.close();
zxcdoc.body.contentEditable=true;
zxcdoc.designMode='on';


this is how I insert HTML Code for an element
I create the element using the DOM then extract the HTML Code by appending the element to a DIV and read the innerHTML of the DIV


function zxcInsertHTML(zxchtml){
if (zxcIE){ zxcIFObj.contentWindow.document.selection.createRange().pasteHTML(zxchtml); }
else {
var zxcdiv=zxcIFObj.contentWindow.document.createElement('DIV');
zxcdiv.title='zxcdummy';
zxcdiv.innerHTML=zxchtml;
var zxcsel=zxcIFObj.contentWindow.getSelection();
if (!zxcsel){ return; }
var zxcrng=zxcsel.getRangeAt(0);
zxcsel.removeAllRanges();
zxcrng.deleteContents();
var zxccont=zxcrng.startContainer;
var zxcpos=zxcrng.startOffset;
zxcrng=document.createRange();
var zxcafternode;
if (zxccont.nodeType==3) {
var zxctxtnode=zxccont;
zxccont=zxctxtnode.parentNode;
var zxctxt=zxctxtnode.nodeValue;
var textBefore=zxctxt.substr(0,zxcpos);
var zxctxtafter=zxctxt.substr(zxcpos);
var zxcbeforenode=document.createTextNode(textBefore);
zxcafternode=document.createTextNode(zxctxtafter);
zxccont.insertBefore(zxcafternode,zxctxtnode);
zxccont.insertBefore(zxcdiv,zxcafternode);
zxccont.insertBefore(zxcbeforenode,zxcdiv);
zxccont.removeChild(zxctxtnode);
}
else {
zxcafternode=zxccont.childNodes[zxcpos];
zxccont.insertBefore(zxcdiv,zxcafternode);
}
zxcrng.setEnd(zxcafternode, 0);
zxcrng.setStart(zxcafternode, 0);
zxcsel.addRange(zxcrng);
}
}

baluba
02-15-2007, 04:24 PM
This is my code to initialize the iframe to designMode:



var bHtmlMode = false;
var str_iFrameDoc = (document.all) ? "document.frames(\"Composition\").document\;" : "document.getElementById(\"Composition\").contentDocument\;";

function initialize() {
iFrameDoc = eval(str_iFrameDoc);
iFrameDoc.open();
iFrameDoc.write("<html><body monospace style='font:10pt Verdana, Arial, sans-serif'></body></html>");
iFrameDoc.close();
iFrameDoc.designMode = "On";
}


This is the function to get the focus at the iframe:



function setFocus() {
if (document.all)
document.frames("Composition").focus();
else
document.getElementById('Composition').contentWindow.focus()
return;
}


This is the function to get the styles (bold, italic, etc..) to the elements:
(the variable "what" can get the value "bold" or "italic" etc..)



function formatC(what,opt) {
if (!validateMode()) return;

iFrameDoc = eval(str_iFrameDoc);
iFrameDoc.execCommand(what,false,opt);

setFocus();
}


How can I make the same with table html tag?

I can use innerHTML to put the html text into the iframe, but I don't know how can I get the position of the cursor...it has inserted at the end of the content.

I have tried with this code, but it insert text in the frame and not formatted html text.

(code is a variable that contains html code)



var sel=document.frames("Composition").document.selection;
var rng=sel.createRange();
rng.colapse;
rng.text=code;


Anyone can help me?

Many thanks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum