We are using Tiny-MCE in our CMS, and our users would like to have the ability to change the width of a column in a table. Now, I know that from an HTML point, there is no such entity "column", but in the Moodle editor, HTMLAREA, there is a plugin that does that - allows to set a width (only in percents) to a column:

Sorry it's in Hebrew, I couldn't find a version in English...

does anyone know of a plugin to Tiny-MCE that could do that? Or have an idea how I would go about writing such a plugin?

We are using Tiny-MCE in our CMS, and our users would like to have the ability to change the width of a column in a table. Now, I know that from an HTML point, there is no such entity "column", but in the Moodle editor, HTMLAREA, there is a plugin that does that - allows to set a width (only in percents) to a column:

Sorry it's in Hebrew, I couldn't find a version in English...

does anyone know of a plugin to Tiny-MCE that could do that? Or have an idea how I would go about writing such a plugin?

• javascript
• html
• tinymce

Share Improve this question Follow asked Mar 17, 2011 at 13:29 Lea CohenLea Cohen 8,2001818 gold badges7575 silver badges9999 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2 +50

Isn't that what the HTML option is for? :)

Another choice is the styleprops (edit Css Style), not sure how this works pletely, but there is an option on the box tab that will let you set a width. I have removed it to avoid shenanigans!

Alternatively you could create several styles which have a width defined and then with the cursor focused on the cell by choosing the style width20percent the box goes 20%.

@Lea Cohen: I found this plugin for TinyMCE -- http://sourceforge/tracker/?func=detail&aid=2800315&group_id=103281&atid=738747 -- which sounds like it should do what you wish, perhaps even in a more "user friendly" way than making the user enter widths manually:

Adds the ability to resize a tables' cell borders by dragging the mouse ..

The way I see it working is resizing the first cells acting as the "column" headings which should see subsequent cells in that column inheriting the width settings, e.g.

<table>
    <tr>
        <td width="300">Col 1</td>
        <td width="200">Col 2</td>
    </tr>
    <tr>
        <td>Width 300</td>
        <td>Width 200</td>
    </tr>
</table>

Update

If that plugin doesn't work for you, you should also have a look at the Table plugin which seems to have options for controlling rows/cells as well: http://tinymce.moxiecode./wiki.php/Plugin:table

I found the answer I was looking for. It's an enhancement of the cell dialog box, that adds an option in the select box on the bottom:

The only thing is that you have to make sure you're in the top most cell in the column, as the JS updates only the next cells in the column, and not the previous ones. But other than that - it's just what we needed.