Basic usage - lokothodida/ckeditor-plugin-template GitHub Wiki

How it works

User wishes to embed content of your plugin's type
User clicks the icon, fills in the required fields and clicks OK to embed the content
Embedded is a <div> with various data- attributes corresponding to the fields that the user filled in
However, the user will see a placeholder image instead of just a <div>, which they can right-click to then edit the properties of the embedded code again
On the final page output, JavaScript is run to catch the embedded <div>s and replace them with the required outputs, using the data- attributes to parameterize the output.

Code to modify

`your-plugin/dialogs/main.js`

The template has been designed so that the code below

    onLoad: function() {
      // add id for easier styling of elements in the dialog
      $(this.getElement()).attr('id', plugin.dialog);
    },

on the file doesn't need to be edited, whilst providing you with the type of placeholders native to CKEditor (e.g. for iframe).

Adding tabs

Modify the contents array and add to it to add more tabs:

    contents: [
      // tabs
      {
        id: 'tab1',
        label: 'text',
        elements: [
          // fields for tab1
        ],
       },
       // more tabs...
    ]

Adding fields

Modify the elements array for a particular tab.

          // fields
          {
            id: 'attribute-1',
            type: 'text',
            label: 'Element 1',
            className: 'attribute-1',
            onLoad: function() {
              // any manipulations needed to the field
            },
            setup: function(element) {
              // pull information from the element
              this.setValue(element.getAttribute('data-attribute-1'));
            },
            commit: function(element) {
              // stick the user input into the element
              element.setAttribute('data-attribute-1', this.getValue());
            }
          },
          // add more fields below