Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to put a formatted table in a wysiwyg editor as iframe

    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

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Adirondacks
    Posts
    516
    Thanks
    4
    Thanked 4 Times in 4 Posts
    the source of the iframe is a page, why can't that page have a formatted table? I'm misunderstanding something here I think

  • #3
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by FJbrian View Post
    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?

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,495
    Thanks
    3
    Thanked 500 Times in 487 Posts
    this is how I make the IFrame editable

    Code:
     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

    Code:
    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);
     }
    }
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is my code to initialize the iframe to designMode:

    Code:
    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:

    Code:
    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..)

    Code:
    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)

    Code:
    var sel=document.frames("Composition").document.selection;
    var rng=sel.createRange();
    rng.colapse;
    rng.text=code;
    Anyone can help me?

    Many thanks.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •