Forum

Thread tagged as: Problem, CKEditor

ckeditor - config.allowedContent = true; function not working

I recently upgraded a client's Runway site to the newest version.

I updated to the newest addons and then went and updated the config.js file in the addons/plugins/editors/ckeditor/ckeditor-4 and added the line:

config.allowedContent = true;

I know this isn't an ideal option, but trying to keep customer happy and not strip away the bootstrap code or other classed in tags. This command worked with no issues on runway 2.

Any help on this is appreciated.

Linda Keele

Linda Keele 0 points

  • 3 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

I don't really know anything about CKEditor. What does that option do? What are you trying to achieve with Runway?

It's supposed to leave the tags in it. So if a person copies and pastes like tables and other styles using Bootstrap or certain styles, that command will leave all the tags in place. It worked great in Runway 2. When the ckeditor was updated is when it quit working.

Drew McLellan

Drew McLellan 2638 points
Perch Support

Can you show us your template tag?

Here's the config file that I added to the CKEDITOR config.js file:

/**
 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {

    // Define changes to default configuration here.
    // For complete reference see:
    // https://docs.ckeditor.com/#!/api/CKEDITOR.config

    // The toolbar groups arrangement, optimized for two toolbar rows.
    config.toolbarGroups = [
        { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
        { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
        { name: 'links' },
        { name: 'insert' },
        { name: 'forms' },
        { name: 'tools' },
        { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'others' },
        '/',
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
        { name: 'styles' },
        { name: 'colors' },
        { name: 'about' }
    ];

    // Remove some buttons provided by the standard plugins, which are
    // not needed in the Standard(s) toolbar.
    config.removeButtons = 'Underline,Subscript,Superscript';

    // Set the most common block elements.
    config.format_tags = 'p;h1;h2;h3;pre';

    // Simplify the dialog windows.
    config.removeDialogTabs = 'image:advanced;link:advanced';

    //Allows style tags to not be removed.
    config.allowedContent = true;   

Here's some sample styles that I'm referring to:

<div class="col-md-6">
<p class="button"><a class="btn btn-primary" href="/financial-aid/financial-aid-explained/apply-for-financial-aid" role="button">APPLY FOR FINANCIAL AID</a></p>
</div>

After saving the section, and opening the source on the CKEditor, the classes "col-md-6" in the DIV tag and "button" class in the P tag are removed and look like this:

<div>
<p><a class="btn btn-primary" href="/financial-aid/financial-aid-explained/apply-for-financial-aid">APPLY FOR FINANCIAL AID</a></p>
</div>

So the next save, the style won't be retained.

That command added to the config.js file is suppose to keep keep styles in and worked fine on prevous version.

Rachel Andrew

Rachel Andrew 394 points
Perch Support

Can you show us your template tag?

I made no changes to the template tag. It's worked fine on previous versions of Runway.

<perch:content id="text" type="textarea" label="Content" editor="ckeditor" html="true" imagewidth="640" imageheight="480" bucket="financial-aid" help="Main Page Content" />
Drew McLellan

Drew McLellan 2638 points
Perch Support

The html="true" should be enough to stop Perch encoding any HTML input from CKEditor.

Well it's not functioning correctly then. As it's stripping away html classes. It functioned in the past. So any idea how this can be fixed?

Drew McLellan

Drew McLellan 2638 points
Perch Support

Have you tried with one of the supplied editors? That would identify if it's a CKEditor issue or an issue with Perch.

When using both the ones supplied, the code stays in, but the problem is neither one of these function as both a WYSIWYG and Code Editors. My client doesn't know HTML code, so they need to see the WYSIWYG, but when styles are needed, then I go in with the source side and add the styles if needed. It's the main reason to use ckeditor versus the two supplied.

Whatever changed on the upgrade to Perch Runway 3.0 is when it stopped working properly.

Drew McLellan

Drew McLellan 2638 points
Perch Support

If the code stays in then that indicates that this is a probably as issue with CKEditor rather than with Perch.

I got it working by putting both of these statements in:

config.allowedContent = true;
config.extraAllowedContent = '*(*)';