CKEditor widget block - new

by radek

HTML

<script src="https://cdn.ckeditor.com/4.19.1/full-all/ckeditor.js"></script>

<textarea id="editor">
    <p>Some text.</p>
    <p>And there's the widget <span class="tagSpecialClass">birthYear</span></p>
    <p>Some text <span class="tagSpecialClass">{{birthYear}}</span>.</p>
</textarea>

JavaScript

// Some CSS for the widget to make it more visible.
CKEDITOR.addCss( '.nonEditableBlock { background: lightgreen; padding: 3px; color: black } ' );
CKEDITOR.addCss( '.editableBlock { background: lightgray; padding: 3px; color: black } ' );

CKEDITOR.plugins.add( 'nonEditableBlock', {
    requires: 'widget',
   // icons: 'simplebox',
    init: function( editor ) {
            editor.widgets.add( 'nonEditableBlock', {
              button: 'Insert a nonEditableBlock',
              template:
                '<div class="nonEditableBlock">' +
                //'<h2 class="simplebox-title">Title</h2>' +
               '<div class="simplebox-content"><p>nonEditableBlock</p></div>' +
               '</div>',
            } );
        
     
            
     },
} );
CKEDITOR.plugins.add( 'editableBlock', {
    requires: 'widget',
    icons: 'close',
    init: function( editor ) {
            editor.widgets.add( 'editableBlock', {
              button: 'Insert a editableBlock',
              template:
                '<div class="editableBlock">' +
                //'<h2 class="simplebox-title">Title</h2>' +
                  '<div class="simplebox-content">editableBlock</div>' +
                '</div>',
              editables: {
                content: {
                  selector: '.simplebox-content'
                }
              }
            } );
     },
} );


CKEDITOR.replace( 'editor', {
    // A clean-up in the toolbar to focus on essentials.
    readOnly : false,
toolbarGroups: [ 
        { name: 'document', groups: [ 'mode' ] },
 //       { name: 'basicstyles' },
        { name: 'insert' }
        ],
       
  //      toolbar : [ { name: 'document', items: [ 'Source'] },
  //       { name: 'insert'},
  //       { name: 'editing', items: ['Undo', 'Redo', 'editableBlock' ]},
  //       ],    
               
    removeButtons: 'Image,Table,HorizontalRule,SpecialChar',
    removePlugins: 'exportpdf',
    extraPlugins: 'nonEditableBlock,editableBlock',
} );