Trying to add a plugin to CKEditor

Question

I'm trying to add a plugin to set a default URL when adding a link.

I followed the instructions here: https://apostrophecms.org/docs/tutorials/howtos/ckeditor.html

And I ended up with:

// lib/modules/apostrophe-areas/public/js/user.js
apos.define('apostrophe-areas', {
    construct: function(self, options) {

    var superEnableCkeditor = self.enableCkeditor;

    self.enableCkeditor = function() {
    superEnableCkeditor();

    CKEDITOR.plugins.addExternal('defaulturl', '/modules/my-apostrophe-areas/js/ckeditorPlugins/defaulturl/', 'plugin.js');
  };
 }
});

and this is my apostrophe-areas/public/js/ckeditorPlugins/defaulturl/plugin.js

CKEDITOR.on( 'dialogDefinition', function( ev ) {

    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;

    if ( dialogName == 'link' ) {

        var infoTab = dialogDefinition.getContents( 'info' );
        var urlField = infoTab.get( 'url' );

        urlField[ 'default' ] = 'www.example.com';
    }
});

However, this is not working for me, I tried to do what is suggested here: Ckeditor plugin configuration not working

But it doesn't worked.

What I've tried and worked was to append the plugin.js file at the end of the plugin.js of the split plugin at the apostrophe-area folder, but I think this is not the correct way to go

Thanks!

Answer 1

I think you can solve the issue two ways:

1. If you want to keep the external plugin file:

Wrap your code according to the API, see e.g. https://sdk.ckeditor.com/samples/timestamp.html and the plugin it references https://sdk.ckeditor.com/samples/assets/plugins/timestamp/plugin.js for an example. You need to use CKEDITOR.plugins.add( 'defaulturl', { init: ... }) in your plugin.js. Not sure if there is anything special to do otherwise as you want to modify the behavior of a CKEDITOR core plugin. That's why it would go with the next option...

2. If you don't need the extra plugin.js:

You can also replace the CKEDITOR.plugins.addExternal() call with the contents of your plugin.js file. I did this to modify the default link target to be _blank:

// /lib/modules/apostrophe-areas/public/js/user.js
'use strict';

// See https://apostrophecms.org/docs/tutorials/howtos/ckeditor.html and
apos.define('apostrophe-areas', {
  construct: function(self, options) {
    var superEnableCkeditor = self.enableCkeditor;

    self.enableCkeditor = function enableCkeditor() {
      superEnableCkeditor();

      // https://docs.ckeditor.com/ckeditor4/latest/guide/dev_howtos_dialog_windows.html
      CKEDITOR.on('dialogDefinition', function redefineDialog(ev) {
        var dialogName = ev.data.name;
        var dialogDefinition = ev.data.definition;

        if (dialogName === 'link') {
          var targetTab = dialogDefinition.getContents('target');
          var targetField = targetTab.get('linkTargetType');

          targetField.default = '_blank';
        }
      });
    };
  }
});

Good luck!