0
votes

How do I disable some tags in ckeditor while allowing some other tags. For eg: I want to disable div tags but want to allow image tags. I am using as below. If I disable the allowedContent using //, then the full editor shows up. I want to allow most tags including font-color, font-name, font-size, images but want to disable div.

CKEDITOR.replace( "xeditor", {
allowedContent: {'img[!src] a[!href] b i u s sup sub ul ol li p[*] table tbody tr td h1 h2 h3 h4 h5 h6 hr pre': true},} );

If I uncomment the allowedContent filter above it stops unwanted tags but I can't seem to let images/font-* to showup!

Thanks

2

2 Answers

0
votes

Link Include div in this

     CKEDITOR.config.removeFormatTags = 'b,big,code,del,dfn,em,font,i,ins,kbd,q,s,samp,small,span,strike,strong,sub,sup,tt,u,var';

or

config.extraAllowedContent = 'p(*){*}[*]';
0
votes

If all you care about is the toolbar, you can just edit it directly, there is a config option for that; see http://docs.ckeditor.com/#!/guide/dev_toolbar

Although I would also keep editing that ACF configuration to find why images and fonts don't work. As for the images, I think you need to give it a little more room to work than just img[!src]. As for the fonts, you are not allowing span, that might disable the font styles. The styles like spans a lot. Here's an edited version very similar to what I use, edited to fit your situation a little better.

// No other tags are allowed the ones defined.
// http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules-section-3
// [*] allows all attributes
// (*) allows all classes
// {*} allows all styles
CKEDITOR.replace('textarea_id', {
    allowedContent: 
        // Allow these without any style, class or attribute
        'b i u s sup sub ul ol li tr td h1 h2 h3 h4 h5 h6 hr pre; ' +

        // Allow any attribute and certain styles for TD and TH
        'td th [*]{width,height,text-align,vertical-align,white-space,border-color,background-color}; ' +

        // Allow any attribute but only height and width style for table
        'table [*]{height, width};' + 

        // Allow any attribute and style - this is a little too loose
        'p span img a tr thead tbody a caption *[*]{*}; ' + 

        // Allow any class for any element
        '*(*)' 
});

I don't recommend simply just copying it from here, but rather trying to understand it and choose the correct tags for you. The important bit I think is to add more freedom for IMG and adding SPAN, but if you Grok the ACF it'll help working with CKEditor in the future.