htmlArea

A directory of browser-based WYSIWYG editors

  MAIN
INDEX
SEARCH
POSTS
WHO'S
ONLINE
LOG
IN

Home: htmlArea 3 (beta): htmlArea 2 & 3 archive (read only): htmlArea v3.0 - Discussion:
Show table borders when 0


The htmlArea 2 & 3 editors have been discontinued.

We've made these forums available as a read-only reference and knowledge-base for people using or developing editors based on htmlArea 2 or 3.

Anyone who is interested in taking over version 2 or 3 is free to do so. All we ask is that you choose a new name that doesn't have "htmlarea" in it to avoid confusion with this site. We'll even give you a link in the directory to make it easier for people to find you. If you are developing or hosting an htmlArea based-editor under a new name, please submit it to our directory.

 


mvw
New User

Feb 27, 2004, 3:46 AM

Post #1 of 15 (6278 views)
Shortcut
Show table borders when 0 Can't Post

Hi All,

I would like to display the table borders (gray dotted line?) when the border is set to zero and this with htmlarea3 as many of our users are with Mac machines/Mozilla.

I think it is possible with htmlarea2 but I need it for 3 version...

Your help will be appreciated Wink
Thanks in advance.
Mvw - Brussels, Belgium


sleemanj
User

Feb 27, 2004, 2:33 PM

Post #2 of 15 (6260 views)
Shortcut
Re: [mvw] Show table borders when 0 [In reply to] Can't Post

First add a style to htmlarea.js when it makes the editing iframe (search for <style in htmlarea.js and you'll see where this can go)


Code
    html += "<style title=\"table borders\">" 
+ ".htmtableborders, .htmtableborders td, .htmtableborders th {border : 1px dashed lightgrey ! important;} \n"
+ "</style>\n";


then in a new file called toggleBorders.js


Code
HTMLArea.prototype._toggleBorders = function() 
{
tables = this._doc.getElementsByTagName('TABLE');
if(tables.length != 0){
if(!this.borders){
name = "bordered";
this.borders = true;
}
else{
name = "";
this.borders = false;
}
for (var ix=0;ix < tables.length;ix++){
if(this.borders)
{
this._addClasses(tables[ix], 'htmtableborders');
}
else
{
this._removeClasses(tables[ix], 'htmtableborders');
}
}
}
return true;
}

HTMLArea.prototype._removeClasses = function(el, classes)
{
if(el != null)
{
var thiers = el.className.trim().split(' ');
var new_thiers = [ ];
var ours = classes.split(' ');
for(var x = 0; x < thiers.length; x++)
{
var exists = false;
for(var i = 0; exists == false && i < ours.length; i++)
{
if(ours == thiers[x])
{
exists = true;
}
}
if(exists == false)
{
new_thiers[new_thiers.length] = thiers[x];
}
}

if(new_thiers.length == 0 && el._stylist_usedToBe && el._stylist_usedToBe.length > 0 && el._stylist_usedToBe[el._stylist_usedToBe.length - 1].className != null)
{
// Revert back to what we were IF the classes are identical
var last_el = el._stylist_usedToBe[el._stylist_usedToBe.length - 1];
var last_classes = HTMLArea.arrayFilter(last_el.className.trim().split(' '), function(c) { if (c == null || c.trim() == '') { return false;} return true; });

if(
(new_thiers.length == 0)
||
(
HTMLArea.arrayContainsArray(new_thiers, last_classes)
&& HTMLArea.arrayContainsArray(last_classes, new_thiers)
)
)
{
el = this.switchElementTag(el, last_el.tagName);
new_thiers = last_classes;
}
else
{
// We can't rely on the remembered tags any more
el._stylist_usedToBe = [ ];
}
}

if( new_thiers.length > 0
|| el.tagName.toLowerCase() != 'span'
|| (el.id && el.id != '')
)
{
el.className = new_thiers.join(' ').trim();
}
else
{
// Must be a span with no classes and no id, so we can splice it out
var prnt = el.parentNode;
var childs = el.childNodes;
for(var x = 0; x < childs.length; x++)
{
prnt.insertBefore(childs[x], el);
}
prnt.removeChild(el);
}
}
}

HTMLArea.prototype._addClasses = function(el, classes)
{
if(el != null)
{
var thiers = el.className.trim().split(' ');
var ours = classes.split(' ');
for(var x = 0; x < ours.length; x++)
{
var exists = false;
for(var i = 0; exists == false && i < thiers.length; i++)
{
if(thiers == ours[x])
{
exists = true;
}
}
if(exists == false)
{
thiers[thiers.length] = ours[x];
}
}
el.className = thiers.join(' ').trim();
}
}


which you load up after htmlarea.js


Code
 <script src="tableBorders.js" language="Javascript"></script>


and then register the new button to display/undisplay borders (where myHtmlArea is the htmlArea object you have made, before you do myHtmlArea.generate())


Code
myHtmlArea.registerButton 
('toggleborders', 'ToggleBorders', '...path_to...htmlarea/images/toggleborders.gif', true, function(editor){editor._toggleBorders()});


and the just add the button to your toolbar however you want.

It's not perfect, but it does the job.

--


James Sleeman
PHP Programmer


dragon
New User

Mar 5, 2004, 9:13 AM

Post #3 of 15 (6186 views)
Shortcut
Re: [sleemanj] Show table borders when 0 [In reply to] Can't Post

it don't seems to work... i did all you said but nothing happend.

Is your code really working ??


novocaine
Novice

Mar 5, 2004, 9:38 AM

Post #4 of 15 (6184 views)
Shortcut
Re: [dragon] Show table borders when 0 [In reply to] Can't Post

It works like a charm! Thanks sleemanj! Smile
The only thing sleemanj forgot to mention is that you have to add this line:

case "toggleborders": this._toggleBorders(); break;

(you may find the line case "createlink": this._createLink(); break; and insert it after that)

regards

novocaine


dragon
New User

Mar 5, 2004, 10:00 AM

Post #5 of 15 (6182 views)
Shortcut
Re: [novocaine] Show table borders when 0 [In reply to] Can't Post

registerbutton don't seem to work too... so i put the button in the config :


Quote


toggleborders: [ "ToggleBorders", this.imgURL+"borders.gif", false, function(e) {e.execCommand("toggleborders");} ],



and i put all the code like sleemanj and novocaine says but javascript error :


Quote
el.className.trim is not a function



is there others missing code ??


(This post was edited by dragon on Mar 5, 2004, 10:03 AM)


novocaine
Novice

Mar 5, 2004, 10:15 AM

Post #6 of 15 (6179 views)
Shortcut
Re: [dragon] Show table borders when 0 [In reply to] Can't Post

You don't necessarily have to put the toggleBorders-Code into a separate .js file.
I've placed the code directly into htmlarea.js before the "HTMLArea.prototype._insertTable = function() {". And then added the line
case "toggleborders": this._toggleBorders(); break; directly after
case "createlink": this._createLink(); break;
Registered the button - worked Smile

Good luck though - no ideas anymore

regards

novocaine


dragon
New User

Mar 5, 2004, 11:04 AM

Post #7 of 15 (6173 views)
Shortcut
Re: [novocaine] Show table borders when 0 [In reply to] Can't Post

still not working Unsure
i tried a lot of code...

can someone put a file which works ??


novocaine
Novice

Mar 5, 2004, 11:50 AM

Post #8 of 15 (6169 views)
Shortcut
Re: [dragon] Show table borders when 0 [In reply to] Can't Post

So, here goes the zip of the complete rc1.
in /examples you'll find table-borders.html - check it out.

I've built in sleemanj's code and registered the button in htmlarea.js.
Anyway, if you'd prefer to have the function in a separate file, it's added in /

Forgot to say: I worked it around, not calling the function with "function(editor){editor._toggleBorders()});" but "function(e) {e.execCommand("toggleborders");}"

Here the lines, that I changed in htmlarea.js:

Line 132 (added button to toolbar)
Line 210 (function call)
Lines 1531 to 1650 (sleemanj's toggleBorders function itself)
Line 1723 (switch the mode for toggleBorders)

That was it.

regards

novocaine
Attachments: HTMLArea-3.0-rc1_toggleBorders.zip (210 KB)


dragon
New User

Mar 5, 2004, 3:36 PM

Post #9 of 15 (6160 views)
Shortcut
Re: [novocaine] Show table borders when 0 [In reply to] Can't Post

thanks a lot i will try that on monday ;)

I will tell you if I got it to work or not !

Thanks again


kimss
User

Mar 7, 2004, 3:43 PM

Post #10 of 15 (6095 views)
Shortcut
Re: [dragon] Show table borders when 0 [In reply to] Can't Post

Thanks for posting the ZIP file, made it alot easier.

I would like to mention however, that it doesnt work when the full page plugin is loaded, so if you are pulling your hair with winmerge... Turn it off and reload!

Thanks!

Kim Steinhaug
kim-at-steinhaug-dot-com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
www.steinhaug.com - www.easywebshop.no - www.webkitpro.com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Norwegian office : +47 88 00 92 45, Swedish office : +46 31 704 43 40
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


klex
Novice

Mar 9, 2004, 9:16 AM

Post #11 of 15 (6024 views)
Shortcut
Re: [novocaine] Show table borders when 0 [In reply to] Can't Post

your code works fine but I found one more bug. maybe one of you has a solution for this problem.

if i try to apply a css style on an invisible or visible, table IE shows "error in line 1372 unknown error"

is there already a solution

best wishes

klex


kinnley
New User

Mar 10, 2004, 8:03 AM

Post #12 of 15 (5984 views)
Shortcut
Re: [novocaine] Show table borders when 0 [In reply to] Can't Post

Ok. Switching the tableborder on and off by pressing the button works fine.

Is is possible to run toggleBorders when the editor starts (onload etc?)



Thanks!


kinnley
New User

Mar 11, 2004, 5:06 AM

Post #13 of 15 (5935 views)
Shortcut
Re: [kinnley] Show table borders when 0 [In reply to] Can't Post

i found it.

I just added the line

Code
 editor.execCommand("toggleborders")



in function initIframe()
just before

Code
 editor.execCommand("toggleborders")


I think its not the solution at all, but it works fine.


Daiz13
Novice

Apr 3, 2004, 6:26 AM

Post #14 of 15 (5701 views)
Shortcut
Re: [kinnley] Show table borders when 0 [In reply to] Can't Post

It doesn't work for me - "toggleborders" doesn't work correctly if there are some tables with assigned css classes (it just overwrites them).

So, I have found another very simple way to solve this problem.
In the stylesheet for HtmlArea add:


Code
table { 
border : 1px dashed lightgrey;
}


And then in the css for your site add:

Code
table { 
border : none;
}



richard.york
New User

Dec 21, 2004, 1:10 PM

Post #15 of 15 (3686 views)
Shortcut
Re: [dragon] Show table borders when 0 [In reply to] Can't Post


In Reply To
it don't seems to work... i did all you said but nothing happend.

Is your code really working ??


WFM, though in his post there were two places where ours and thiers were arrays, but because of forum code, the \[i\] was converted to html, e.g. ours\[i\] and thiers\[i\].

 
 
 


Search for (options)