WYSIWYG Editor should have better defaults for headings or documentation to configure them

  1. Avatar of Don Jewett

    I use as much semantic markup as possible when editing html and I'd like to encourage my users do this also. However, the default configuration of the editor has tiny headings, so they look nothing like the final version on the page and my users are unlikely to use them as is or notice them in existing copy unless I configure them to look larger in the editor. I don't see any documentation on how to configure these, although I know CKEditor is configurable. I'd like 2 things: 1) better defaults out-of-the-box 2) docs prescribing how to configure the editor css (specific to bettercms) with some kind of assurance my changes won't be overwritten by future releases.

  2. Avatar of Don Jewett

    ugh. can I please have edit capability for my own posts? I already see two typos and I hate making mistakes in public.

  3. Avatar of Simonas

    Hi,

    yes it's possible to config CKEditor. Here is the example, how this is possible:

    (function ($) {
        'use strict';
        function hasStyle(styles, styleName) {
            for (var i = 0, m = null; i < styles.length; ++i) {
                if (styles[i].name == styleName) {
                    return true;
                }
            }
            return false;
        }
        function addCustomStyle(style) {
            if (!hasStyle(CKEDITOR.stylesSet.registered['default'], style.name)) {
                CKEDITOR.stylesSet.registered['default'].push(style);
            }
        }
        $(function () {
            var refreshIntervalId = setInterval(attachToCkEditor, 1000);
            function attachToCkEditor() {
                if (window.CKEDITOR) {
                    CKEDITOR.on('instanceCreated', function (o) {
                        o.editor.on('stylesSet', function () {
                            addCustomStyle({
                                name: 'Blue H1',
                                element: 'h1',
                                styles: { 'color': 'Blue' },
                                attributes: {
                                    'class': 'h1-primary'
                                }
                            });
                        });
                    });
                    /* later */
                    clearInterval(refreshIntervalId);
                }
            }
        });
    }(jQuery));
    
  4. Avatar of Don Jewett

    Thanks Simonas. Will see how far I can get with this.

  5. Avatar of Don Jewett

    Simonas, This worked great for me. I was able to use this to add styles to the dropdown. I added a bit to load the a stylesheet so the editor content looks the same as the site --

    I added this function and called it from the instanceCreated event handler:

    <pre> function loadStyleSheet(){ CKEDITOR.config.contentsCss = '/css/styles.css'; }</pre>

  6. Avatar of Don Jewett

    Apparently, you can load multiple css files like this (haven't tried this yet):

    config.contentsCss = [ '/css/styles.css', '/css/anotherfile.css' ];

* Mandatory
* Mandatory
* Mandatory

Verify that you are human