CODEWITHSUNDEEP
javascriptckeditorckeditor4
Tomas Korinek
Tomas Korinek

Reputation: 300

Allowing only one style attribute in CKEditor 4 (and disallowing others)

In CKEditor 4 with the automatic mode, I would like to allow only one style attribute for the elements, namely float for the <img> tags. All the other styles in the code should be disallowed.

For managing images I use Enhanced Image plugin (image2). With no specific ACF applied, the float attribute works just fine. The problem is that all the other styles are kept in the code too.

So I tried to disallow all the styles using *{*} with extra allowing img{float}, but apparently it does not work this way, since the float attribute is removed too, despite of extraAllowedContent settings.

Do you know why this does not work? Or do you have another idea how to achieve that, please?

This is my editor settings:

CKEDITOR.replace( 'editor', {
    toolbar: [
        { name: 'styles', items: [ 'Format' ] },
        { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline' ] },
        { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
        { name: 'indexes', items: [ 'Subscript', 'Superscript' ] },
        { name: 'paragraph', items : [ 'NumberedList', 'BulletedList' ] },
        { name: 'media', items: [ 'Image' ] },
        { name: 'iframe', items : [ 'Iframe'] },
        { name: 'tools', items : [ 'Find'] },
        { name: 'document', items: [ 'Source'] },
    ],
    format_tags: 'h2;h3;p',
    width: 820,
    height: 500,
    entities_latin: false,
    removePlugins: 'image, exportpdf',
    extraPlugins: 'image2, find',
    tabSpaces: 6,
    disallowedContent: '*{*}',
    extraAllowedContent: 'img{float}',
});

Upvotes: 3

Views: 220

Answers (1)

K Scandrett
K Scandrett

Reputation: 16540

If you want to ignore all styles except float then make sure you don't include anything that sets styles in the CKEditor4's menu. HTML elements & styles that are not menu options are stripped out automatically. Image2 overrides that default behavior for float settings on img tags.

Using https://cdn.ckeditor.com/4.13.1/full-all/ckeditor.js, the following settings:

CKEDITOR.replace('editor1', {
  extraPlugins: 'image2,uploadimage',

  toolbar: [{
      name: 'clipboard',
      items: ['Undo', 'Redo']
    },
    /* {       -- don't include menu entries like this --
      name: 'styles',
      items: ['Styles', 'Format']
    }, */
    {
      name: 'basicstyles',
      items: ['Bold', 'Italic', 'Strike', '-', 'RemoveFormat']
    },
    {
      name: 'paragraph',
      items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote']
    },
    {
      name: 'links',
      items: ['Link', 'Unlink']
    },
    {
      name: 'insert',
      items: ['Image', 'Table']
    },
    {
      name: 'tools',
      items: ['Maximize', 'Source']
    },
    {
      name: 'editing',
      items: ['Scayt']
    }
  ],

  // Configure your file manager integration. This example uses CKFinder 3 for PHP.
  filebrowserBrowseUrl: '/apps/ckfinder/3.4.5/ckfinder.html',
  filebrowserImageBrowseUrl: '/apps/ckfinder/3.4.5/ckfinder.html?type=Images',
  filebrowserUploadUrl: '/apps/ckfinder/3.4.5/core/connector/php/connector.php?command=QuickUpload&type=Files',
  filebrowserImageUploadUrl: '/apps/ckfinder/3.4.5/core/connector/php/connector.php?command=QuickUpload&type=Images',

  // Upload dropped or pasted images to the CKFinder connector (note that the response type is set to JSON).
  uploadUrl: '/apps/ckfinder/3.4.5/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json',

  // Reduce the list of block elements listed in the Format drop-down to the most commonly used.
  format_tags: 'p;h1;h2;h3;pre',
  // Simplify the Image and Link dialog windows. The "Advanced" tab is not needed in most cases.
  removeDialogTabs: 'image:advanced;link:advanced',

  height: 450,
  removeButtons: 'PasteFromWord'
});

Starting with:

<p><div style="background:#eeeeee; border:1px solid #cccccc; padding:5px 10px">Foo</div></p>

<p><img alt="goo" height="200" src="https://www.google.com/logos/doodles/2023/seasonal-holidays-2023-6753651837110165.2-6752733080612634-cst.gif" 
        style="float:left; border:1px solid #f00;" width="500" /></p>
<p>Bar</p>

Results in:

<p>&nbsp;</p>
<p>Foo</p>
<p>&nbsp;</p>
<p><img alt="goo" height="200" src="https://www.google.com/logos/doodles/2023/seasonal-holidays-2023-6753651837110165.2-6752733080612634-cst.gif" 
        style="float:left" width="500" /></p>
<p>Bar</p>

Upvotes: 1

Related Questions