CKEditor Custom ACF disabling all plugins

Question

I am trying to set an explicit list of allowed contents in my ck editor, but it seems that I'm not being inclusive enough in my list because almost all my plugins are disabled. If I set the ACF back to auto (delete allowedContent) then all the plugins come back. Here is my allowedConent in the config.js

config.allowedContent = 
{
     h1: true,
     h2: true,
     h3: true,
     'span, p, ul, ol, li,': {
         styles: 'color, margin-left, margin-right, font-size'
     },
     'a[!href,target,name]': true,
     b: true,
     u: true,
     i: true,
}

Yet the only buttons that seem to be enabled are bold, underline, and italics. I'm trying to figure out why my other plugins aren't working. For instance, the link plugin has the following:

var allowed = 'a[!href]',
required = 'a[href]';

// Add the link and unlink buttons.
editor.addCommand( 'link', new CKEDITOR.dialogCommand( 'link', {
    allowedContent: allowed,
    requiredContent: required
} ) );
editor.addCommand( 'anchor', new CKEDITOR.dialogCommand( 'anchor', {
    allowedContent: 'a[!name,id]',
    requiredContent: 'a[name]'
} ) );

As you can see, I have anchor with the necessary properties defined (anchor with an href and name), yet the button doesn't show up! I have verified my syntax is correct by printing out CKEDITOR.instances["editor-1"].filter.allowedContent and it shows the object I'm expecting. I have also tried adding a bunch of common elements like to see if adding one of them brings the plugins back, but it does not. So what am I missing?

Nick M Nick M · Accepted Answer · 2015-03-23T19:17:38

Well it seems that I was mixing my object syntax and my string syntax. Once I corrected this, the anchor and font-size buttons started appearing. The following is what I have so far:

config.allowedContent = 
{
     h1: true,
     h2: true,
     h3: true,
     a: {
        attributes: ['!href','target','name']
     }, 
     b: true,
     u: true,
     i: true,
     // font-size
     span: {
         styles: { 'font-size': '#(size)' },
         overrides: [ { element :'font', attributes: { 'size': null } } ]
     }
}

I still need to figure out the proper definition for font-color and a few others, but that's just a matter of inspecting the plugins' code and seeing what they expect.

CKEditor Custom ACF disabling all plugins

1 Answers