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:
Tables with 0 border


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.

 


tajmiester
New User

Dec 16, 2003, 4:38 PM

Post #1 of 8 (1164 views)
Shortcut
Tables with 0 border Can't Post

Hi,

I would really like to display table borders of width 0 as a light or dashed line so that they can still be manipulated. (like in dreamweaver or frontpage) I thought perhaps I could tweek the CSS but I'm not really sure how. Any suggestions?

Thanks


Tajmiester


JSTijn
Novice

Jan 19, 2004, 8:55 AM

Post #2 of 8 (1106 views)
Shortcut
Re: [tajmiester] Tables with 0 border [In reply to] Can't Post

What i did was make a function who gives all the tables without border elements in their tag a class. And i defined the classname in the 'editor.config.pageStyle' stylesheet. That way you can toggle the classname on and off. I havent fully developed it, but it works.


Code
 Plugin.toggleTableBorders = function(editor){   
tables = editor._doc.body.all.tags('TABLE');

if(tables.length != 0){
if(!Plugin.borders){
name = "bordered";
Plugin.borders = true;
}
else{
name = "";
Plugin.borders = false;
}
for (var i=0;i < tables.length;i++){
if(parseInt(tables.border) == 0 || tables.border == ""){
tables.className = name;
td = tables.all.tags('TD');
for (var j=0;j < td.length;j++){
td[j].className = name;
}
}
}
}
}



mindrage
New User

Jan 22, 2004, 5:38 PM

Post #3 of 8 (1067 views)
Shortcut
Re: [JSTijn] Tables with 0 border [In reply to] Can't Post

JSTinjn,

Could you be more specific? I am not sure where exactly and how to use the code you describe. It'll be great if you could give info for non-programmers.

Thanks


JSTijn
Novice

Jan 23, 2004, 3:06 AM

Post #4 of 8 (1055 views)
Shortcut
Re: [mindrage] Tables with 0 border [In reply to] Can't Post

Here i have written it out in a simple way:


Code
    <script type="text/javascript">     
HTMLArea.loadPlugin("TableOperations");

HTMLArea.prototype.toggleTableBorders = 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(parseInt(tables[ix].border) == 0 || tables[ix].border == ""){
tables[ix].className = name;
td = tables[ix].getElementsByTagName('TD');
for (var jx=0;jx < td.length;jx++){
td[jx].className = name;
}
}
}
}
}
function initDocument() {
var editor = new HTMLArea("content");
editor.registerPlugin(TableOperations);
editor.config.pageStyle = "\
table.bordered, table.bordered td{border:dotted black;}\
table.bordered{border-width:1px 0px 0px 1px}\
table.bordered td{border-width:0px 1px 1px 0px}";

editor.config.registerButton({
id : "ToggleBorder",
tooltip : "Toggle the table borders on/off",
image : "ed-bold.gif",
textMode : false,
action : function(editor, id) {
editor.toggleTableBorders();
}
});
editor.config.toolbar.push(["ToggleBorder"]); editor.generate();
}
</script>

The trick is, add some style to the editor with this:

Code
   editor.config.pageStyle = "\    
table.bordered, table.bordered td{border:dotted black;}\
table.bordered{border-width:1px 0px 0px 1px}\
table.bordered td{border-width:0px 1px 1px 0px}";

And then insert the new defined button

Code
  editor.config.toolbar.push(["ToggleBorder"]);


It's not the most beautifull way but it will work until its implemented in htmlArea itself.

(I hate this editor on the forum, it ruins my code.)


(This post was edited by JSTijn on Jan 23, 2004, 3:13 AM)


mindrage
New User

Jan 23, 2004, 5:06 PM

Post #5 of 8 (1033 views)
Shortcut
Re: [JSTijn] Tables with 0 border [In reply to] Can't Post

Hi JSTijn,

Hmm.. I dont suppose you could just ZIP the files up and provide a link? Sorry.. I wish I knew some more programming. I have no idea where to put the styles or functions. Whether to up them in the HTMLarea.js file or whether in the HTML or PHP file.

Some example files would go a long way if possible.

Thanks!


bsutton
Novice

Jan 24, 2004, 8:09 PM

Post #6 of 8 (1023 views)
Shortcut
Re: [JSTijn] Tables with 0 border [In reply to] Can't Post

Hi JSTijn

Thanks for the example. I have also been looking at this but want to incorporate it into htmlarea.js so I can initially set the toggle to active. I don't think the plugins allow for initial state.

I think you can drop these lines -
td = tables[ix].getElementsByTagName('TD');
for (var jx=0;jx < td.length;jx++){
td[jx].className = name;

The styles don't use the TD className.

The attribute 'dashed' displays better in mozilla firebird than 'dotted'.

Bill


lamumba
Novice

Jan 28, 2004, 8:17 AM

Post #7 of 8 (968 views)
Shortcut
Re: [bsutton] Tables with 0 border [In reply to] Can't Post

Well this works fine, but theres a problem, when i have a table, which has already a style attribute like this...


Code
 <table border="0" style="border: 2px solid blue">



When i toggle Borders, this Table switches also to the i.e dashed Mode, and when i switch back, the Table has no borders...

There must be a way, to fix this problem...


Sponge
Novice

Jan 28, 2004, 9:46 AM

Post #8 of 8 (964 views)
Shortcut
Re: [lamumba] Tables with 0 border [In reply to] Can't Post

store the style in a temporary (custom) style property I guess.. :)

 
 
 


Search for (options)