1

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?

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).

| improve this answer | |
  • Thanks for the quick response! This seems to have done the trick, mostly. Now the plugin is shown in Wygwam, but the icon is missing. I've edited P&T's boilerplate code to ensure .cke_button__image2 has a background image style but for some reason it's failing to apply, I think because of how ckeditor is loaded to the page. – wise_gremlin Sep 28 '14 at 15:43
  • @user1515316 dunno... That's just basic CSS so it should be easy enough to debug. – Brandon Kelly Sep 28 '14 at 16:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.