简体   繁体   中英

Tiny-MCE plugin for setting column width in table

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?

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

Another choice is the styleprops (edit Css Style) , not sure how this works completely, 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.net/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, eg

<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.com/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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM