Adding CKEditor Plugins to Wygwam

Question

I'm attempting to add a CKEditor plugin to Wygwam, but the plugin is not showing in the config or editor even after adding it to the extraPlugins config and I have uploaded the CKEditor plugin to the themes/third_party/wygwam/lib/ckeditor/plugins folder. I am wondering if there is another step, or special configuration to enable CKEditor plugins within Wygwam that I am missing.

Answer 1

I had the same issue with the save button which Wygwam removed recently too. It was a bit of a battle but i have it back working now.( the pixel and tonic documentation leaves a lot to be desired on this area)

Ok first of all you need to download the add on from the ckeditor site , in my case it was a save button and I called the folder saveicon with the plugin within in a folder called save ( see the paths below).

Put the folder into /var/www/themes/third_party/ Then create a folder in /var/www/system/expressionengine/third_party/ , in my case I called it save. my ext.save.php file is below which you put in the folder you create in third party.

( change it to your own name eg ext.*.php )

In the code below change were I have "save" to your own plugin name and your own file paths

<?php if (! defined('BASEPATH')) exit('No direct script access allowed');

class **save**_ext
{
    var $name           = 'Your extension name';
    var $version        = '1.0';
    var $description    = 'discription';
    var $docs_url       = 'URL';
    var $settings_exist = 'n';


    private static $_included_resources = FALSE;

    // Begin calling button functionality and icon
    private $_hooks = array(
        'wygwam_config',
        'wygwam_tb_groups',
    );

    public function activate_extension()
    {
        foreach ($this->_hooks as $hook)
        {
            ee()->db->insert('extensions', array(
                'class'    => get_class($this),
                'method'   => $hook,
                'hook'     => $hook,
                'settings' => '',
                'priority' => 10,
                'version'  => $this->version,
                'enabled'  => 'y'
            ));
        }
    }

    public function update_extension($current = NULL)
    {
        return FALSE;
    }

    public function disable_extension()
    {
        ee()->db->where('class', get_class($this))->delete('extensions');
    }

    public function wygwam_config($config, $settings)
    {
        if (($last_call = ee()->extensions->last_call) !== FALSE)
        {
            $config = $last_call;
        }

        // Check if our toolbar button has been added
        $include_btn = FALSE;

        foreach ($config['toolbar'] as $tbgroup)
        {
            if (in_array('Save', $tbgroup))
            {
                $include_btn = TRUE;
                break;
            }
        }

        if ($include_btn)
        {
            // Add our plugin to CKEditor
            if (!empty($config['extraPlugins']))
            {
                $config['extraPlugins'] .= ',';
            }

            $config['extraPlugins'] .= 'save'; 
            $this->_include_resources();

        }

        return $config;
    }


    public function wygwam_tb_groups($tb_groups)
    {
        if (($last_call = ee()->extensions->last_call) !== FALSE)
        {
            $tb_groups = $last_call;
        }

        $tb_groups[] = array('Save');

        // Is this the toolbar editor?
        if (ee()->input->get('M') == 'show_module_cp')
        {
            // Give our toolbar button an icon
            $icon_url = URL_THIRD_THEMES.'saveicon/save/icons/icon.png';
            ee()->cp->add_to_head('<style type="text/css">.cke_button__save_icon { background-image: url('.$icon_url.'); }</style>');
        }

        return $tb_groups;
    }

    private function _include_resources()
    {
        // Is this the first time we've been called?
        if (!self::$_included_resources)
        {
            // Tell CKEditor where to find our plugin
            $plugin_url = URL_THIRD_THEMES.'saveicon/save/';
            ee()->cp->add_to_foot('<script type="text/javascript">CKEDITOR.plugins.addExternal("save", "'.$plugin_url.'");</script>');

            // Don't do that again
            self::$_included_resources = TRUE;
        }
    }
}

Just be aware that caps matters so use a capital letter for you plugin name where I used it.If this is working properly you should see your extension in the extensions list and you just need to enable it and the icon should appear in the wygwam editor configurations and you can pull it into your toolbar.

( note for some reason when you enable the extension it still shows as disabled in the my list but it is enabled.)