ToggleBorders (show borders of tables in WYSIWYG editor)

Hi all,

I have nearly finished the WYSIWYG editor... but I would like to be able to see an outline of the table in my window..

ie: I have a button to create a table.. this is fine... but when you select "borders=0" nothing is shown..the table is there, and can be used, but you just dont know where the borders are...

anyone got any ideas?!

cheers!

Try setting your "border=0" to: border="1"...

Is that what you're trying to do? Have a border show up when a table is inserted?

kinda...I have got a popup window that asks for the table properties and you can set the border width there... but if you set it to "0" then you cannot see anything on the screen...

what I want to be able to do is like in Dreamweaver or a similar WYSIWYG editor... that when you insert a table it shows a dotted line to show you the outlines... even though border is set to "0".

I have no idea where to start with it!

did anyone ever find out how to do this?

-------
Nevermind, I figured it out. If anyone's reading this and wants to know how I did it, feel free to email me: URL

I check my yahoo account sparingly, but I'll get back to you when I can.

Has anyone solved this problem? It might be nice to add this to the forum.

The explanation makes for a lengthy post, and previously I didn't have the time to spell out how I did it. That's why I decided to just respond to emails as they came in. But I've gotten a couple emails and I have some time now, so I guess I'll just go ahead and post it:

----------------------------------------------------------------------------

Ok, first off I have to give credit to fakker for the original table code, as this is what I used when creating my html editor.

See URL to see what I'm referring to if you didn't use his code.

Basically my idea was if a value of 0 was entered for the border attribute, two things would happen:

1. When the table code is applied to the iframe, the border value of 0 would actually be changed to 1.

2. Another variable would be created, in this case I called it originalBorder. This way I could distinguish between a 0 changed into a 1 or just a plain 1.

Then, an "if" statement would set originalBorder to equal 0 if the border value was originally 0, otherwise originalBorder would be set to equal 1 if the border value was originally greater than 0.

originalBorder would then be passed back to the opener window, along with the "border=1" attribute. I chose to make the "guide" border a bright red color, and I included a note so the user would know that it was for temporary visual purposes only.

Then in the opener window, after the form is processed, I would do a search and replace for "border=1" attributes if originalBorder=0 and change any occurances in the iframe text to "border=0". Otherwise I'd leave the iframe text alone.

Here is the javascript statement that processes the border value and sets the variable originalBorder:

----------------------------

if (border == 0) {
border = 1 borderColor="#FF0000"
HTMLTable = "<Table width='" + width + "' border=" + border + " bordercolor=" + borderColor + " cellpadding=" + padding + " align=" + align + " cellspacing=" + spacing + bgcolor + style + ">"
var originalBorder = 0

} else {

HTMLTable = "<Table width='" + width + "' border=" + border + " cellpadding=" + padding + " align=" + align + " cellspacing=" + spacing + bgcolor + style + ">"
var originalBorder = 1

}

----------------------------

Then, directly under the line: HTMLTable = HTMLTable + "</table>", I inserted the following code in order to pass originalBorder back to the opener window:

----------------------------

opener.document.frmNews.borderSet.value = originalBorder

----------------------------

borderSet is a hidden form field that you must create in your wysiwyg html editor form (frmNews) in order for the opener window to process originalBorder properly:

----------------------------

<input type="hidden" name="boderSet" value="">

----------------------------

This takes the javascript variable and stores it in the hidden form field "borderSet".

Then, after the wysiwyg form is processed, I had to do the search and replace function that I mentioned earlier. This ensures that the border value is set back to 0, and also that the bordercolor attribute is removed. The following example is in ColdFusion:

----------------------------

<cfif borderSet EQ 0>
<cfset htmlEntry=Replace(Replace(htmltext,"TABLE borderColor=##FF0000","TABLE","ALL"),"border=1","border=0")>
<cfelse>
<cfset htmlEntry=htmltext>
</cfif>

----------------------------

I'm not sure how familiar you are with ColdFusion, but the syntax for the Replace() funtion is:

----------------------------

Replace(string,substring1,substring2,[scope])

----------------------------

Also, the extra pound sign in front of the bordercolor is there because ColdFusion delimiters are # signs, so the extra one tells CF to ignore it as a CF delimiter and process it as a normal #.

htmlEntry is then the final variable that I would write to the database.

I hope this mess of an explanation makes sense. I did the best I could Please feel free to let me know if you run into any other problems or if there are any inconsistancies or missing elements in my explanation, and I'll do my best to correct them.

- LS