CKEditor Plugin Shows In Wygwam Configurator But Is Hidden From Publish Page

Question

Using Wygwam 3.3.2 and ExpressionEngine 2.9.0

I'm trying to get the Enhanced Image plugin (http://ckeditor.com/addon/image2) for ckeditor added to our Wygwam installation.

I have followed the instructions for adding ckeditor plugins to Wygwam to a tee: http://docs.pixelandtonic.com/wygwam/developers/ckeditor_plugins.html. I have also made sure I've installed all of the proper dependencies for this particular plugin. For all plugins, I installed the latest versions that are compatible with ckeditor 4.3, which is what is still packaged with Wygwam.

In the Wygwam configurator I can see the plugin just fine and I can add it to my configuration. However, on the Publish page I am getting this error:

Uncaught TypeError: undefined is not a function plugin.js?t=E49C:3200
(anonymous function) plugin.js?t=E49C:3200
(anonymous function) plugin.js?t=E49C:3359
(anonymous function) plugin.js?t=E49C:3368

I can see the following code being output to the page correctly:

<script type="text/javascript">CKEDITOR.plugins.addExternal("clipboard", "http://gsp.kixo.co/themes/third_party/ckeditor_clipboard/");</script>
<script type="text/javascript">CKEDITOR.plugins.addExternal("dialogui", "http://gsp.kixo.co/themes/third_party/ckeditor_dialogui/");</script>
<script type="text/javascript">CKEDITOR.plugins.addExternal("dialog", "http://gsp.kixo.co/themes/third_party/ckeditor_dialog/");</script>
<script type="text/javascript">CKEDITOR.plugins.addExternal("image2", "http://gsp.kixo.co/themes/third_party/ckeditor_enhanced_image/");</script>
<script type="text/javascript">CKEDITOR.plugins.addExternal("lineutils", "http://gsp.kixo.co/themes/third_party/ckeditor_lineutils/");</script>
<script type="text/javascript">CKEDITOR.plugins.addExternal("widget", "http://gsp.kixo.co/themes/third_party/ckeditor_widget/");</script>
<script type="text/javascript">
    Wygwam.configs["3"] = {
        "skin": "wygwam3",
        "toolbarCanCollapse": false,
        "dialog_backgroundCoverOpacity": 0,
        "entities_processNumerical": true,
        "forcePasteAsPlainText": true,
        "toolbar": [["Bold","Italic","Underline"],["NumberedList","BulletedList"],["Subscript","Superscript"],["Link","Unlink"],["Image2"],["HorizontalRule"],["Styles"],["Source"],["Maximize"]],
        "height": "200",
        "resize_enabled": true,
        "contentsCss": ["\/assets\/css\/ckeditor.css"],
        "language": "en",
        "autoGrow_minHeight": "200",
        "extraPlugins": "wygwam,readmore,stylesheetparser,clipboard,dialogui,dialog,image2,lineutils,widget",
        "filebrowserBrowseFunc": function(params) { Wygwam.loadAssetsSheet(params, "ee:9", "any"); },
        "filebrowserImageBrowseFunc": function(params) { Wygwam.loadAssetsSheet(params, "ee:9", "image"); },
        "filebrowserFlashBrowseFunc": function(params) { Wygwam.loadAssetsSheet(params, "ee:9", "flash"); },
        "link_types": {"Site Page":[{"label":"Albums",          "url":"http:\/\/gsp.kixo.co\/albums"},{"label":"Engagement",            "url":"http:\/\/gsp.kixo.co\/portfolio\/engagement"},{"label":"Home",           "url":"http:\/\/gsp.kixo.co\/"},{"label":"Photo",           "url":"http:\/\/gsp.kixo.co\/photo"},{"label":"Portfolio",          "url":"http:\/\/gsp.kixo.co\/portfolio"},{"label":"Video",          "url":"http:\/\/gsp.kixo.co\/portfolio\/video"},{"label":"Wedding",             "url":"http:\/\/gsp.kixo.co\/portfolio\/wedding"}]}
    };
</script>

You can see that image2 (the Enhanced Plugin that we're trying to get working) is being loaded and is present in the extraPlugins configuration array and is also present in the toolbar configuration array. I'm really not sure what could be going wrong.

Why does my plugin show up in the Wygwam configurator but not on the Publish page?

Answer 1

The plugin lists Widget, Line Utilities, Dialog, and Clipboard as dependencies, but it looks like lineutils and widget are both getting added after image2. I’m betting that’s your problem. If you click on the filename next to the error in your browser’s console, it should take you to the line in the file that is causing the JS error, which might provide additional context (assuming it’s not compressed).