Jump to content

CKEditor table default width

Recommended Posts

Does anyone know if its possible to change the default width of tables in Ckeditor, eg to 100%?

I found the following:

And so I added this

CKEDITOR.on( 'dialogDefinition', function( ev ) {
    // Take the dialog name and its definition from the event data.
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;
    // Check if the definition is from the dialog we're
    // interested in (the "Table" dialog).
    if ( dialogName == 'table' ) {
        // Get a reference to the "Table Info" tab.
        var infoTab = dialogDefinition.getContents( 'info' );
        txtWidth = infoTab.get( 'txtWidth' );
        txtWidth['default'] = '100%';

Into /modules/InputfieldCKEditor/config.js

But it had no effect, dialogDefinition does not seem to trigger anything. May be that my wysiwyg is inside a RepeaterMatrix (loaded with ajax)?

Share this post

Link to post
Share on other sites

I would definitely do this via CSS. You can add a CSS file using the module AdminOnSteroids for example or Admin Custom Files.

table {
  min-width: 100%;

Or you can continue using config.js  and try adding this:

var sheet = (function() {
	var style = document.createElement("style");
	return style.sheet;

sheet.insertRule("table { min-width: 100%; }", 0);


Share this post

Link to post
Share on other sites

Hi @tpr, thanks, this would certainly work! However, to clarify, the problem with this is that it would take away control over the width from the user of the CMS (not me). I want the default to be 100%, but I still want someone to be able to set it/edit it later. At the moment I'm essentially doing what you said, by forcibly overriding it on the front-end anyway. But I don't want to do this, I want it to be 100% by default so I don't need to "fix" it with CSS.

Share this post

Link to post
Share on other sites

Maybe this could help:


To force initial 100% you could use CSS:

table:not([style]) {
  min-width: 100%;

Since Table Resize adds an inline style the initial 100% width should go away if the user resizes the table.

  • Like 1

Share this post

Link to post
Share on other sites

I had the same concern as cjx2240. Not the most elegant approach, but since I'm not a JavaScript wizard I directly edited the following files and placed a note in my root development directory to tweak these when updating the CMS.


Tip: Where it says "100%":500:0 change it to "100%":"100%":0

If anyone knows how to achieve this 'non-destructively' from a user's config.js, it would be great to know.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Create New...