Item9662: Table borders look odd when you first insert a table using TinyMCE

When you create a table using the "insert table" button in TinyMCE, the properties are set as follows:

• Cellpadding - not set
• Cellspacing - not set
• Border - 0

This results in sort of odd looking table borders, and, in certain browsers and at certain display resolutions, can even make it hard to see where the cells actually are.

After you save the topic, and edit it again the borders look good, and if you click the table and the table insert/properties button you'll see the properties are now:

• Cellpadding - 0
• Cellspacing - 1
• Border - 1

My proposal is to set the default properties for TinyMCE tables so that tables look the same when you first insert them as they will after you save and re-edit. This would involve adding the following initialization parameters in TinyMCEPlugin.pm

table_default_cellpadding : 0,
table_default_cellspacing : 1,
table_default_border : 1,

The related plugin documentation would also need to be updated.

As a new developer in this project, I thought this task might be a nice simple one for me to start off with

-- LeilaPearson - 13 Sep 2010

Are these the table attributes when editing or after saving (so when viewing)?

-- ArthurClemens - 13 Sep 2010

These are the initial table attributes that are used during editing - not viewing. You see these when you insert a table in the WYSIWYG editor before you save the topic. It doesn't seem to use the attributes when viewing the table - only in the edit window. In view mode it preserves whatever my TABLE attributes are set to.

-- LeilaPearson - 13 Sep 2010

Makes sense, but note that an empty table should still have visible cells, so a visual check is needed to see if the logical thing to do is also the best.

-- ArthurClemens - 13 Sep 2010

Hi Leila, if you have a special interest in WYSIWYG feel free to join/review WysiwygTaskTeam.

This change is really needed, and we would appreciate a fix.

I'd really prefer not to hack any files shipped with the TinyMCE product itself - we try to avoid any customisations to keep our maintenance overhead low, so here are two suggestions:

1. Style these ghost tables in pub/System/TinyMCEPlugin/wysiwyg_src.css
2. Foswiki ships with three plugins: foswiki, foswikibuttons, foswikiimage. The foswiki plugin is purely for overriding default TinyMCE behaviour that can't be configured any other way. So if you need to "hack" the TinyMCE editor itself, try to do this in there.

Remember, commit on both trunk and Release01x01 branches

Also as a general rule, it's worth testing out a "vanilla" TMCE setup using tinymce.moxiecode.com's demo to compare whether we have a Foswiki integration bug or something that's shipping with vanilla TMCE.

Have fun

-- PaulHarvey - 13 Sep 2010

Thanks Paul. I've added myself to the WYSIWYG task team. I think a smooth experience with WYSIWYG is really important to users. I personally still edit in wiki text mode for the most part because of the few places where it isn't so smooth - and would love to see it get to the point where - even as an administrator/advanced user, WYSIWYG is the editor of choice.

I've already tested the above fix on my 1.0.9 site here - but not on my dev/trunk-derived site yet (next thing to check). It didn't require any change to TinyMCE itself. Just a minor change to TinyMCEPlugin.pm seemed to do the trick. I'll try the vanilla setup you mentioned too.

-- LeilaPearson - 14 Sep 2010

Any status update on this task?

-- GeorgeClark - 13 Mar 2011

Hi George. Sorry, I didn't get to it yet. It is a small change though. I should be able to get to it soon.

-- LeilaPearson - 31 Mar 2011

In the version of the TinyMCEPlugin shipped with 1.1.5, this is now a setting change rather than a code change. Override following the instructions in System/TinyMCEPlugin#TINYMCEPLUGIN_INIT_TOPIC

I agree that the initial table looks strange, and setting the defaults doesn't seem to impact anything else. Checking this in.

-- GeorgeClark - 27 Apr 2012

Thanks for checking this change in George. I tried it out on this site, and it looks great.

-- LeilaPearson - 27 Oct 2012

Commenting is disabled while not logged in