WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 03.02.2023 06:25:52

losttrip
Member

CKEditor - change default width of editor window

I'm sure this was possible in the past.  But no matter what I try in my wb_ckconfig.js file, the editor window remains the full width of it's parent element.  I want to be able to set the maximum width the editor window loads at.

WBCE Version: 1.5.4
PHP Version: 8.0.27
CKEditor Developer Edition Version: 4.20.0

Yes, I am clearing my cache and reloading my browser window.  Other changes I make in the wb_ckconfig.js file are reflected, but not the editor window width.

// The standard height and width of CKEditor in pixels.
    //config.width = 500;     // 500 pixels wide.
    //config.width = '75%';   // CSS unit (percent).
    config.height           = 250;
    config.width            = 500;
    config.toolbarLocation  = 'top';

    // Define possibilities of automatic resizing in pixels. Set config.resize_enabled to false to 
    // deactivate resizing.
    config.resize_enabled   = true;
    config.resize_dir = 'vertical';
    config.resize_minWidth  = 250;
    config.resize_maxWidth  = 750;
    config.resize_minHeight = 250;
    config.resize_maxHeight = 1200;

I have tried many different approaches:

config.width            = 500;
config.width            = '500';
config.width            = '50%';

Nothing works.

This is my complete wb_ckconfig.js file:

[== PHP ==]
/**
 * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see https://ckeditor.com/legal/ckeditor-oss-license
 *
 * WARNING: Clear the cache of your browser cache after you modify this file!
 * If you don't do this, you may notice that your browser is ignoring all your changes.
 *
 * --------------------------------------------------
 *
 * Note: Some CKEditor configs are set in _yourwb_/modules/ckeditor/include.php
 *
 * Example: "$ckeditor->config['toolbar']" is PHP code in include.php. The very same here in the 
 * wb_ckconfig.js would be: "config.toolbar" inside CKEDITOR.editorConfig = function( config ). 
 *
 * Please read "readme-faq.txt" in the wb_config folder for more information about customizing.
 * 
*/

CKEDITOR.on('instanceReady', function (ev) {
    ev.editor.dataProcessor.htmlFilter.addRules( {
        elements: {
            $: function (element) {
                // Output dimensions of images as width and height
                if (element.name == 'img') {
                    var style = element.attributes.style;
                    if (style) {
                        // Get the width from the style.
                        var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec(style),
                            width = match && match[1];
                        // Get the height from the style.
                        match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec(style);
                        var height = match && match[1];
                        if (width) {
                            element.attributes.style = element.attributes.style.replace(/(?:^|\s)width\s*:\s*(\d+)px;?/i, '');
                            element.attributes.width = width;
                        }
                        if (height) {
                            element.attributes.style = element.attributes.style.replace(/(?:^|\s)height\s*:\s*(\d+)px;?/i, '');
                            element.attributes.height = height;
                        }
                    }
                }
                if (!element.attributes.style) {
                    delete element.attributes.style;
                }
                return element;
            }
        }
    });
});

CKEDITOR.editorConfig = function( config )
{  
    
  // All content will be pasted as plain text.
	config.forcePasteAsPlainText = false;
  // The standard color of CKEditor. Can be changed in any hexadecimal color you  like. Use the 
  // UIColor Plugin in your CKEditor to pick the right color.
  config.uiColor = '#bcd5eb';

	// Whether to show the browser native context menu when the Ctrl or Meta (Mac) key is pressed on opening the context menu with the right mouse button click or the Menu key.
	config.browserContextMenuOnCtrl = true;
	config.fullPage = false;

  // Both options are for XHTML 1.0 strict compatibility
  // config.indentClasses = [ 'indent1', 'indent2', 'indent3', 'indent4' ];
  // [ Left, Center, Right, Justified ]
  // config.justifyClasses = [ 'left', 'center', 'right', 'justify' ];

  config.templates_replaceContent =   false;
  // Define all extra CKEditor plugins in _yourwb_/modules/ckeditor/ckeditor/plugins here
  
  //config.extraPlugins = 'timestamp';

  // Different Toolbars. Remove, add or move 'SomeButton', with the quotes and following comma 
	config.toolbar_Full =
	[
		{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
		{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
		{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
		{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
		'/',
		{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
		{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
		{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
		{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
		'/',
		{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
		{ name: 'colors', items : [ 'TextColor','BGColor' ] },
		{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
	];
  config.toolbar_WB_Basic = [
			['Source','Preview'],['Cut','Copy','Paste','PasteText','PasteFromWord'],['Image','Flash','Table','HorizontalRule'],['Wbdroplets','Wblink','Unlink','Anchor'],['Undo','Redo','-','SelectAll','RemoveFormat'],['Maximize','ShowBlocks','-','Code','About'],'/',
			['Styles','Format','Font','FontSize'],['TextColor','BGColor'],['Bold','Italic','Underline','Strike'],['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv']];

	// see http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar
	config.toolbar_WB_Full =
	[
		{ name: 'document', items : [ 'Source','-','Save','Print','-','DocProps','Preview','NewPage','-','Templates' ] },
		{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
		{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
		{ name: 'colors', items : [ 'TextColor','BGColor' ] },
		{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','Code','-','About' ] },
		'/',
		{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','Shy','-','RemoveFormat' ] },
		{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
 		{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton','HiddenField' ] },
		'/',
		{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
		{ name: 'links', items : [ 'Link','Unlink','Anchor','Wbdroplets','Wblink' ] },
		{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] }

	];

	config.toolbar_WB_Default =
	[
		{ name: 'mode', items : [ 'Source','autoFormat','CommentSelectedRange','UncommentSelectedRange','CodeMirror' ] },
		{ name: 'document', items : [ 'wbSave' ] },
		{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
		{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
		{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','Syntaxhighlight','-','About' ] },
		'/',
		{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','Shy','-','RemoveFormat' ] },
		{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','-','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock' ] },
		{ name: 'links', items : [ 'Link','Unlink','Wbdroplets','Anchor' ] },
		'/',
		{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','Iframe','ckawesome','wbembed' ] },
		{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
		{ name: 'colors', items : [ 'TextColor','BGColor' ] }
		

	];

    config.toolbar_Basic = [['Bold','Italic','-','NumberedList','BulletedList','-','Link','Unlink','-','Code','About']];
    config.toolbar_WB_Simple = [['Bold','Italic','-','NumberedList','BulletedList','-','Wbdroplets','Wblink','Unlink','-','Scayt','-','Code','About']];

	// The default toolbar. Default: WB_Default
  config.toolbar = 'WB_Default';

  // Explanation: _P: new <p> paragraphs are created; _BR: lines are broken with <br> elements;
  //              _DIV: new <div> blocks are created.
  // Sets the behavior for the ENTER key. Default is _P allowed tags: _P | _BR | _DIV
  config.enterMode = CKEDITOR.ENTER_P;

  // Sets the behavior for the Shift + ENTER keys. allowed tags: _P | _BR | _DIV
  config.shiftEnterMode = CKEDITOR.ENTER_BR;
  
  /* Allows to force CKEditor not to localize the editor to the user language. 
  * Default: Empty (''); Example: ('fr') for French. 
  * Note: Language configuration is based on the backend language of WebsiteBaker. 
  * It's defined in include.php
  * config.language         = ''; */
  // The language to be used if config.language is empty and it's not possible to localize the editor to the user language.
  config.defaultLanguage  = 'en';

  config.docType          = '<!DOCTYPE html>';

	config.image_previewText = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.';

    /* The skin to load. It may be the name of the skin folder inside the editor installation path,
    * or the name and the path separated by a comma. 
    * Available skins: moono*/
    config.skin             = 'moono';

    // The standard height and width of CKEditor in pixels.
    //config.width = 500;     // 500 pixels wide.
    //config.width = '75%';   // CSS unit (percent).
    config.height           = 250;
    config.width            = 500;
    config.toolbarLocation  = 'top';

    // Define possibilities of automatic resizing in pixels. Set config.resize_enabled to false to 
    // deactivate resizing.
    config.resize_enabled   = true;
    config.resize_dir = 'vertical';
    config.resize_minWidth  = 250;
    config.resize_maxWidth  = 1100;
    config.resize_minHeight = 250;
    config.resize_maxHeight = 1200;

    /* Protect PHP code tags (<?...?>) so CKEditor will not break them when switching from Source to WYSIWYG.
    *  Uncommenting this line doesn't mean the user will not be able to type PHP code in the source.
    *  This kind of prevention must be done in the server side, so just leave this line as is. */ 
    config.protectedSource.push(/<\?[\s\S]*?\?>/g); // PHP Code
    
    //disable ckes Advanced Content Filter (ACF) to avoid wblinks to be filtered?
    config.allowedContent = true;
};

CKEDITOR.on( 'instanceReady', function( ev )
{
    var writer = ev.editor.dataProcessor.writer;
    // The character sequence to use for every indentation step.
    writer.indentationChars = '\t';
    // The way to close self closing tags, like <br />.
    writer.selfClosingEnd   = ' />';
    // The character sequence to be used for line breaks.
    writer.lineBreakChars   = '\n';
    // Setting rules for several HTML tags.
    
    var dtd = CKEDITOR.dtd;
    for (var e in CKEDITOR.tools.extend( {}, dtd.$block ))
    {
        writer.setRules( e,
        {
            // Indicates that this tag causes indentation on line breaks inside of it.
            indent : false,
            // Insert a line break before the <h1> tag.
            breakBeforeOpen : true,
            // Insert a line break after the <h1> tag.
            breakAfterOpen : false,
            // Insert a line break before the </h1> closing tag.
            breakBeforeClose : false,
            // Insert a line break after the </h1> closing tag.
            breakAfterClose : true
        });
    };
    writer.setRules( 'p',
    {
        // Indicates that this tag causes indentation on line breaks inside of it.
        indent : false,
        // Insert a line break before the <p> tag.
        breakBeforeOpen : true,
        // Insert a line break after the <p> tag.
        breakAfterOpen : false,
        // Insert a line break before the </p> closing tag.
        breakBeforeClose : false,
        // Insert a line break after the </p> closing tag.
        breakAfterClose : true
    });
    writer.setRules( 'br',
    {
        // Indicates that this tag causes indentation on line breaks inside of it.
        indent : false,
        // Insert a line break before the <br /> tag.
        breakBeforeOpen : false,
        // Insert a line break after the <br /> tag.
        breakAfterOpen : true
    });
    writer.setRules( 'a',
    {
        // Indicates that this tag causes indentation on line breaks inside of it.
        indent : false,
        // Insert a line break before the <a> tag.
        breakBeforeOpen : true,
        // Insert a line break after the <a> tag.
        breakAfterOpen : false,
        // Insert a line break before the </a> closing tag.
        breakBeforeClose : false,
        // Insert a line break after the </a> closing tag.
        breakAfterClose : false
    });
    writer.setRules( 'div',
    {
        // Indicates that this tag causes indentation on line breaks inside of it.
        indent : false,
        // Insert a line break before the <div> tag.
        breakBeforeOpen : true,
        // Insert a line break after the <div> tag.
        breakAfterOpen : false,
        // Insert a line break before the </div> closing tag.
        breakBeforeClose : true,
        // Insert a line break after the </div> closing tag.
        breakAfterClose : false
    });
    writer.setRules( 'img',
    {
        // Indicates that this tag causes indentation on line breaks inside of it.
        indent : false,
        // Insert a line break before the <img> tag.
        breakBeforeOpen : true,
        // Insert a line break after the <img> tag.
        breakAfterOpen : false,
        // Insert a line break before the </img>> closing tag.
        breakBeforeClose : false,
        // Insert a line break after the </img> closing tag.
        breakAfterClose : false
    });
});
	
/* Set default width of table to 100% or blank in this case, instead of 500px. This fits better with a responsive design. */	
CKEDITOR.on('dialogDefinition', function( ev ) {

      var diagName = ev.data.name;
      var diagDefn = ev.data.definition;

      if(diagName === 'table') {
        var infoTab = diagDefn.getContents('info');

        var width = infoTab.get('txtWidth');
        width['default'] = "";
      }
});

I looked in ckeditordev/include.php to see if there was some sort of override happening there... but I can't figure it out.

Line 32 of include.php

    function show_wysiwyg_editor($name, $id, $content, $width = '100%', $height = '350px', $toolbar = false)

I tried changing the  $width = '100%' to different values, but it didn't seem to have any effect.


Maybe I have to hard code a value here?:
Lines 150-151 of include.php

        $ckeditor->config['height'] = $height;
        $ckeditor->config['width']  = $width;

Online

#2 03.02.2023 08:30:03

florian
Administrator

Re: CKEditor - change default width of editor window

I don't think it was ever possible to set the width in the CKE module.
This value is set by the single module which uses the CKE, i.e. WYSIWYG, NWI, OfA... in the "show_wysiwyg_editor(...)" call of the module's modify.php (or modify_item, modify_post etc .php).
Depending on what you want to achieve you either need to change the value there (what will get lost on core / module updates each time), create an own backend theme with reduced editor width or set the body or html width in the editor.css to a fixed value if you only want to avoid too long text lines.


Nicht ärgern. Nur wundern.

Offline

#3 03.02.2023 21:05:22

losttrip
Member

Re: CKEditor - change default width of editor window

Thank you for the clarification.  I must have been confused (time and age seem to be a factor) about these settings having an effect.  I must have been remembering the ability to use the resize settings set to "both" and setting that config.resize_maxWidth:

config.resize_enabled   = true;
    config.resize_dir = 'both';
    config.resize_minWidth  = 250;
    config.resize_maxWidth  = 750;

With this set, when you click on the bottom corner to resize, the editor instantly snaps down to the maxWidth value.

Anyway, it's not important to me to have the actual editor window width set.  Like you suggested, I set a max-width on the body element in my editor.css file.

Thank you for your time and concrete knowledge.

Online

Board footer

up