Jonathan Snook.ca

 

ShowBorders property for MSHTML

For anybody who has developed a WYSIWYG editor using the DEC and has wanted to switch over to the MSHTML has had to deal with "missing" functionality. A guy asked me to get showBorders working in MSHTML. At first I thought no problem but in doing a little research, there doesn't appear to be a property anywhere to be able to set that. So, I made my own!

First, in the onload event of the editor I set the initial property of showborders to either true or false. I have a function that actually changes the state between true or false:

function ShowTableBorders()	{
    idContent.SHOWBORDER = !idContent.SHOWBORDER;
    checkState();
}

checkState is a function that runs every time something happens in the editor so that I can check the state of all my buttons. The checkState function will run the tableBorders function detailed below.

What it does is cycle through all the tables in the editor and changes the runtimeStyle to display borders. The reason I used runtimeStyle and not style was to ensure that the underlying HTML wasn't affected when it's time to save the code.

UPDATE March 13, 2003

A user pointed out to me that the the original code wass problematic in that it may update styles on tables that already have a border. While this would have only affected the display of the tables in the editor, the final HTML code would still be intact. So, I did a little research and came up with a new version of the tableBorders function:

function tableBorders() {
    var aTables = idContent.document.getElementsByTagName("TABLE");
    for (i=0;i<aTables.length;i++){
        if(idContent.SHOWBORDER && (aTables[i].border == 0)){
            aTables[i].runtimeStyle.borderWidth = 1;
            aTables[i].runtimeStyle.borderColor = "#BCBCBC";
            aTables[i].runtimeStyle.borderStyle = "dotted";
            aTables[i].runtimeStyle.borderCollapse = "collapse";
        }
        if(!idContent.SHOWBORDER && (aTables[i].border == 0)){
            aTables[i].runtimeStyle.cssText = '';
        }
    }
}

What this function does is grab all the tables that happen to be in the editor. As it loops through the array, it runs two IF statements. The first checks to see if the SHOWBORDER property is enabled and if the table does not have a border. If it meets these conditions then it will create a dotted border on the table using the runtimeStyle. The second IF checks if the SHOWBORDER property is disabled and if the table does not have a border. Then I remove all runtimeStyles by setting the cssText property to nothing.

Any tables that already have a border will remain untouched. Tables without a border can now be set to be "visible" while editing them in the MSHTML editor.