htmlArea

A directory of browser-based WYSIWYG editors

  MAIN
INDEX
SEARCH
POSTS
WHO'S
ONLINE
LOG
IN

Home: htmlArea 2: htmlArea 2 & 3 archive (read only): htmlArea v2.0:
Word cleanup and <TABLES>


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.

 


jerryw
Novice

Jun 6, 2003, 3:32 AM

Post #1 of 18 (4195 views)
Shortcut
Word cleanup and <TABLES> Can't Post

I've recently implemented Word cleanup based on snippets and suggestions from Redspider, Luis and others here in v2.03 htmlArea and while it's working good I'm not sure how and why the cleanTable(); function is not hooked up? I see that tags are cleaned up around text wrapped in <span>, <p>, etc., and other tags getting cleaned up but the tables created in Word and pasted still retain the Word specific HTML. Why is this? Are tables created and formatted in Word unaffected during rendering in htmlArea or is there some unpredictability we should still be concerned with and if so why did the authors of these cool solutions not hook up cleanTable()?

Also I'm wondering...if someone spends so much time formatting text inside a Word document only to have the formatting stripped in htmlArea why not just use htmlArea to begin with? Or is the idea to paste existing information already contained in Word documents onto websites and this get's us started rather than retyping the text and we just re-add the formatting in htmlArea? Just curious.

Thanks,
Jerry Wares


rickroot
Novice

Jun 6, 2003, 9:21 AM

Post #2 of 18 (4172 views)
Shortcut
Re: [jerryw] Word cleanup and <TABLES> [In reply to] Can't Post

I've noticed that there are just certain things you cannot do in htmlara with regards to tables. You can't set a background color on a table. In fact you have VERY little control over the table.

I'd like to see this functionality enhanced in htmlarea 3.0... a table wizard would be cool, but the ability to click an existing table and edit it's properties would also be cool.


Luis
Veteran

Jun 6, 2003, 11:43 AM

Post #3 of 18 (4165 views)
Shortcut
Re: [jerryw] Word cleanup and <TABLES> [In reply to] Can't Post

It's strange that tables keep Word specific formatting. It should be cleaned as well. It is controlled in this section:

function cleanTable(oElem) {
oElem.style.cssText = '';
var oAttribs = oElem.attributes;
if (oAttribs != null) {for (var j = oAttribs.length - 1; j >=0; j--) {var oAttrib = oAttribs[j];
if (oAttrib.nodeValue != null) {
oAttribs.removeNamedItem('class')
oAttribs.removeNamedItem('style')
}
}
}
var oTR = oElem.rows;
if (oTR != null) {for (var r = oTR.length - 1; r >= 0; r--) {oTR[r].style.cssText = '';}}
var oTD = oElem.cells;
if (oTD != null) {for (var t = oTD.length - 1; t >= 0; t--) {oTD[t].style.cssText = '';}}
}


About your wondering.

Everybody's needs are different. Some people need to clean different tags or attributes. Therefore, the cleaner needs to be customized.

Why to copy and paste from Word instead of creating the pages inside HTMLArea instead? Because those documents are not always created for that purpose as this is my case. For example, I manage a website where all the documents have to be specifically created in Word because they are first intended as faxed Press Releases and as a second option, to be published in the Internet.

Why rather than re-typing the text?, Because HTMLArea as most of programs is intended to make people save time. Why should I make my clients to re-type 50 documents a day if they have them already typed?

Regarding the tables clean up, could you post which tags are not being cleaned? Maybe we are missing something coming from other Word's versions or from specific user's settings.


Don't give up!!
http://webstationone.com/test/htmlarea


jerryw
Novice

Jun 6, 2003, 8:03 PM

Post #4 of 18 (4153 views)
Shortcut
Re: [Luis] Word cleanup and <TABLES> [In reply to] Can't Post

Hello Luis,

Thanks for the reply.

Yes that function - cleanTable( oElem); - is in the script, it is just not called from anywhere. I've searched high and low for a reference to that function but cannot find any.

Also am wondering about something else. In the script that I'm using there is a context menu after a right click inside a table that provides table modification commands like those on the toolbar. But if you click outside a table you get the standard context menu from this: editorWin.event.returnValue = true; If you use the Paste command from this context menu it doesn't trigger (cmdID='Paste') and the tag cleaning routines are not run. There are 3 other Paste actions: The Paste button on the toolbar, CTL+V and SHIFT+INS but none of those get referenced obviously by choosing Paste from the right click context menu provided by: editorWin.event.returnValue. I would think that the right click Paste method from the context menu would be an often used action along with CTL+V, etc. There doesn't appear to be any handling of the Paste command from the context menu. Do you or anyone have a solution for this? In the context of where I use htmlArea many user's paste Word content and predictably many use the right click method for pasting and their content is not getting parsed upon pasting.

Thanks in advance,

Jerry Wares


jerryw
Novice

Jun 7, 2003, 2:33 AM

Post #5 of 18 (4137 views)
Shortcut
Re: [jerryw] Word cleanup and <TABLES> [In reply to] Can't Post

Hi Luis, Having just read more thoroughly all threads involving cleanup and Paste I've just now realised that you are still working on the Context menu/Paste option.

-Jerry


Luis
Veteran

Jun 7, 2003, 3:16 PM

Post #6 of 18 (4120 views)
Shortcut
Re: [jerryw] Word cleanup and <TABLES> [In reply to] Can't Post

Hi Jerryw:

You are right:

The call for the Clean Table function was not included anywhere. Here it goes:

Append the code lines below to the call for the other tags:

oTags = editdoc.all.tags("TABLE");
if (oTags != null) {
for (var i = oTags.length - 1; i >= 0; i--) {
cleanTable(oTags);
}
}

oTags = editdoc.all.tags("TR");
if (oTags != null) {
for (var i = oTags.length - 1; i >= 0; i--) {
cleanTable(oTags);
}
}

oTags = editdoc.all.tags("TD");
if (oTags != null) {
for (var i = oTags.length - 1; i >= 0; i--) {
cleanTable(oTags);
}
}


Regarding context menus, I've been pulling my hair for hours, trying make them work with not much success.

I have two conclusions:

1.- The positioning method is not adequate and makes context menus misbehave. They work better when the editor is in pages with no scrolling.

2.- When you use the context menu, the cursor focuses at the beginning of the editor, no matter what. For example, Try to insert a new table nested in an existing table. You can do it right using the buttons. If you do the same operation from context menus, the new table is created above the existing one, not nested. As the cursor focuses at the beginning of the editor, it doesn't catch the selection range, therefore you cannot apply any of the functions requiring a selection range (Cut, Copy, Undo, Redo, Delete, Insert link, etc, etc). I've been able to add some other functions. Paste, insert image, for example, but again, everything goes to the beginning of the editor ...and same effects due to positioning. If you are too down in the editor, the context menu doesn't work.

Against all my customs, the only working solution I've found to avoid pasting without applying the code clean-up in my live sites, is to disable the default context menu.

At the end of the Tables context menus change:

else {
// reset to the default browser contextmenu
editorWin.event.returnValue = true;
return;

with:

else {
// reset to the default browser contextmenu
editorWin.event.returnValue = false;
return;

I'm convinced that the whole context menus function needs to be re-done, but honestly, every time I try to workaround something, I got lost in the code. Wish somebody comes with a solution soon.


Don't give up!!
http://webstationone.com/test/htmlarea


(This post was edited by Luis on Jun 7, 2003, 3:26 PM)


jerryw
Novice

Jun 7, 2003, 8:09 PM

Post #7 of 18 (4115 views)
Shortcut
Re: [Luis] Word cleanup and <TABLES> [In reply to] Can't Post

Hello Luis,

Thank-you for the prompt, thorough response. Appreciate the cleanTable( ); explanation, that makes sense now.

And the context menu, I've done a bit of work on it myself and it's not that simple. I spent considerable time trying to get it to display disabled menu items if the edit area was, say, empty then there is no need for Cut or Copy menu items to be selectable, etc. You said this:"As the cursor focuses at the beginning of the editor, it doesn't catch the selection range, therefore you cannot apply any of the functions requiring a selection range (Cut, Copy, Undo, Redo, Delete, Insert link, etc, etc)." ... I ran into this same thing. At this point I've decided to simply alert user's prominently that to Paste Word content use the button or other keyboard actions. I think this issue needs to be addressed with this editor as the context menu is much more intuitive than keyboard strokes for many user's.

Another question that I cannot resolve is why when Word content is pasted in the editor that it get's parsed but then a second, unparsed copy of it from the clipboard is also entered on it own? I saw a post here to this effect somewhere but cannot re-locate it through the search. Are you able to address this?

Also while the Show 0 Borders is pretty cool, it's confusing to some novice user's and after testing it extensively myself I find it just a little buggy in some formatting and saving configurations. Is there any other use for this other than as a visual aid in formatting? I don't understand why it is saveable? I'm wanting to disable it for now but it seems very interlaced in the script, can you suggest the easiest way to disable it? OR a suggestion for making the default = off in all cases?

I've also got a background color solution that I've implemented and while it's a bit of a hack I've found no other method in this forum. The only drawback is that it requires that the hex color value be saved immediately and then the value later retrieved from the db when publishing the page and plugged into <body bgcolor="#xxxxxx">. I will clean up the scriptlet for this with a suggested db saving method and post it here. Ben did help me with this and Interactive Tools might have a better solution incorporated in version 3, but for now this seems to work okay.

Anyhow if you could address the aforementioned issues I would be most appreciative. Thanks again for your prompt repsonse.

Jerry Wares


Luis
Veteran

Jun 7, 2003, 10:44 PM

Post #8 of 18 (4111 views)
Shortcut
Re: [jerryw] Word cleanup and <TABLES> [In reply to] Can't Post

Hi Jerry:

I don't get this very well:

Another question that I cannot resolve is why when Word content is pasted in the editor that it get's parsed but then a second, unparsed copy of it from the clipboard is also entered on it own? I saw a post here to this effect somewhere but cannot re-locate it through the search. Are you able to address this?

Could you give me more details? Have yo tested it in my editor?
http://webstationone.com/test/htmlarea

Regarding 0 borders, the default option is configurable in editor.js:

this.showborders = true; //change to true or false

To avoid the border of being saved when you submit the form, in
function editor_filterOutput(objname) search for:

// match tags and call filterTag
RegExp.lastIndex = 0;
var matchTag = /<\/?(\w+)((?:[^'">]*|'[^']*'|"[^"]*")*)>/g; // this will match tags, but still doesn't handle container tags (textarea, comments, etc)
contents = contents.replace(matchTag, filterTag);
contents = contents.replace(/style=\"BORDER-RIGHT: #c0c0c0 1px dotted; BORDER-TOP: #c0c0c0 1px dotted; BORDER-LEFT: #c0c0c0 1px dotted; BORDER-BOTTOM: #c0c0c0 1px dotted\" /gi, '');
// remove nextlines from output (if requested)


and add the code in red. Warning: must be a single line (no wrapping).

Greetings.


Don't give up!!
http://webstationone.com/test/htmlarea


(This post was edited by Luis on Jun 7, 2003, 10:46 PM)


jerryw
Novice

Jun 8, 2003, 8:36 PM

Post #9 of 18 (4083 views)
Shortcut
Re: [Luis] Word cleanup and <TABLES> [In reply to] Can't Post

Hi Luis, Thanks for the response.

I've actually taken the MS Word script from your available download and it works locally now the right way, the same way it works on your webstationone site.

One thing I notice though even in your online version is that if there is any other content in the editing area and then you ENTER down a couple lines past the existing content and then paste the word content (CTL+V), some of the pasted Word content doesn't get parsed and cleaned up. Can you try this yourself?

Thanks,

Jerry


jerryw
Novice

Jun 9, 2003, 9:42 AM

Post #10 of 18 (4062 views)
Shortcut
Re: [Luis] Word cleanup and <TABLES> [In reply to] Can't Post

Hi Luis,

This line is already in the script but it still saves when I submit the form...is this all there is to it? Thx, Jerry

contents = contents.replace(/style=\"BORDER-RIGHT: #c0c0c0 1px dotted; BORDER-TOP: #c0c0c0 1px dotted; BORDER-LEFT: #c0c0c0 1px dotted; BORDER-BOTTOM: #c0c0c0 1px dotted\" /gi, '');


Luis
Veteran

Jun 9, 2003, 11:13 AM

Post #11 of 18 (4058 views)
Shortcut
Re: [jerryw] Word cleanup and <TABLES> [In reply to] Can't Post

Hi Jerryw:
Try adding an extra switching between modes in all places (Paste, CTRL+v and SHIFT+INS):

else if (cmdID == 'Paste') {

editdoc.execCommand('Paste');
myclean(editdoc);
editor_setmode(objname, '');
editor_setmode(objname, 'init');
editor_setmode(objname, '');
editor_setmode(objname, 'init');
}


Don't give up!!
http://webstationone.com/test/htmlarea


(This post was edited by Luis on Jun 9, 2003, 11:14 AM)


jerryw
Novice

Jun 9, 2003, 11:20 AM

Post #12 of 18 (4055 views)
Shortcut
Re: [Luis] Word cleanup and <TABLES> [In reply to] Can't Post

Sorry Luis, but I don't think I understand what you mean by adding the "switching" in your reply, can you elaborate just a bit more.

Regards,

Jerry


Luis
Veteran

Jun 9, 2003, 11:33 AM

Post #13 of 18 (4054 views)
Shortcut
Re: [jerryw] Word cleanup and <TABLES> [In reply to] Can't Post

Currently, your paste function must have this lines once:

editor_setmode(objname, '');
editor_setmode(objname, 'init');

Repeat them one more time below the current ones. I think that will do the the work.


Don't give up!!
http://webstationone.com/test/htmlarea


Luis
Veteran

Jun 12, 2003, 12:00 AM

Post #14 of 18 (4003 views)
Shortcut
Re: [jerryw] Word cleanup and <TABLES> [In reply to] Can't Post

Hi jerryw!

Did you get it work? you could try also changing the two lines mentioned in the post above with this one:

editor_updateOutput(objname);

Let me know what happened.


Don't give up!!
http://webstationone.com/test/htmlarea


jerryw
Novice

Jun 12, 2003, 12:15 AM

Post #15 of 18 (4000 views)
Shortcut
Re: [Luis] Word cleanup and <TABLES> [In reply to] Can't Post

Hello Luis,

My apologies for not posting back some feedback. I've been sidetracked on an urgent implementation of a payment gateway and haven't been able to integrate the script mod's. I'm anxious to add/test your suggestions and will do so as soon as I can get back to it. Thank-you for following up and I'll let you know what happens within a couple of days.

Regards,

Jerry W.


ingvark
New User

Jun 25, 2003, 7:01 PM

Post #16 of 18 (3866 views)
Shortcut
Re: [Luis] Word cleanup and <TABLES> [In reply to] Can't Post

Hi Luis, I have the same problem with the dotted borders, they are always saved along. I tried to add this line to the function but that didnīt work. This seems to be alright in your editor.js but Iīm no expert in programming, so I canīt figure this out.
I also have the problem with tables, the text in them are always displayed as 12pt but any other text in 10pt.

Thanks,
Ingvar K


Luis
Veteran

Jun 26, 2003, 1:33 AM

Post #17 of 18 (3860 views)
Shortcut
Re: [ingvark] Word cleanup and <TABLES> [In reply to] Can't Post

Hi Ingvark:

Regarding Table borders, the approach in post #8 is correct, It should work. All other suggestions in the subsequent postings are not directly related with 0 borders although they are correct for cleaning up code and at certain point are reinforcing the first one.

If nothing of this works I could only suggest to make the replacement on server side.

Regarding Font size in tables is easy to configure:

In editor.js, search for:
function editor_defaultConfig(objname)

and insert:
this.TDStyle = 'font-family: "Verdana"; font-size: x-small;';

(you can change the face and size to fit your styles)

then search for:
html += 'body {' +config.bodyStyle+ '} \n';

and just below insert:
html += 'TD {' +config.TDStyle+ '} \n';

then search in the Preview section for:
doc.writeln('body {' +config.bodyStyle+ '}');

and just below insert:
doc.writeln('TD {' +config.TDStyle+ '}');


Don't give up!!
http://webstationone.com/test/htmlarea


ingvark
New User

Jun 26, 2003, 1:32 PM

Post #18 of 18 (3828 views)
Shortcut
Re: [Luis] Word cleanup and <TABLES> [In reply to] Can't Post

Hi again, and thanks. This solved my problem with the text size in tables.

I could not get the dotted lines out with the approach in post #8 but I did it another way by using part of code from another post. Here is what I did and now it works:

// add additional tag filtering here

var re1 = /BORDER-RIGHT: #c0c0c0 1px dotted; BORDER-TOP: #c0c0c0 1px dotted; BORDER-LEFT: #c0c0c0 1px dotted; BORDER-BOTTOM: #c0c0c0 1px dotted/g;
var re2 = / style=""/g;
tagBody = tagBody.replace(re1,"");
tagBody = tagBody.replace(re2,"");


return tagBody;
};

 
 
 


Search for (options)