5 August 2023

The allowedContent configuration option in CKEditor is used to define what HTML elements and attributes are allowed to be used in the editor's content. This feature helps maintain consistent and safe content creation by restricting the types of elements and attributes that users can add to the editor. "a[!href,*]"lets you enable link button in toolbar.

Source code viewer
  1. CKEDITOR.plugins.add( 'simplebox', {
  2.     requires: 'widget',
  3.     init: function( editor ) {
  4.         editor.widgets.add( 'simplebox', {
  5.             template:
  6.                 '<div class="simplebox">' +
  7.                     '<h2 class="simplebox-title">Title</h2>' +
  8.                     '<div class="simplebox-content"><p>Content...</p></div>' +
  9.                 '</div>',
  10.             editables: {
  11.                 title: {
  12.                     selector: '.simplebox-title',
  13.                     // Enable link button.
  14.                     allowedContent: 'a[!href, *]',
  15.                 },
  16.             },
  17.             upcast: function( element ) {
  18.                 return element.name == 'div' && element.hasClass( 'simplebox' );
  19.             }
  20.         } );
  21.     }
  22. } );
Programming Language: Javascript