0

I have the Expresso field-type plugin and I'm using the Embed Media button to add iFrames to the page. I've been trying to add a class to the parent div container however I just can't seem to get it to work.

Expresso uses CKEditor and this is what I've tried so far:

(function() {
    CKEDITOR.plugins.add("mediaembed", {
        init: function(a) {
            CKEDITOR.dialog.add("MediaEmbedDialog", function(a) {
                return {
                    title: "Embed Media",
                    minWidth: 550,
                    minHeight: 200,
                    contents: [{
                        id: "iframe",
                        expand: !0,
                        elements: [{
                            id: "embedArea",
                            type: "textarea",
                            label: "Paste Embed Code Here",
                            autofocus: "autofocus",
                            setup: function() {},
                            commit: function() {}
                        }]
                    }],
                    onOk: function() {
                        var b = a.document.createElement("div");
                        b.setHtml(this.getContentElement("iframe", "embedArea").getValue());
                        b.className = "video-container"; //My addition
                        a.insertElement(b)
                    }
                }
            });
            a.addCommand("MediaEmbed",
                new CKEDITOR.dialogCommand("MediaEmbedDialog", {
                    allowedContent: "iframe[*]"
                }));
            a.ui.addButton("MediaEmbed", {
                label: "Embed Media",
                command: "MediaEmbed",
                toolbar: "mediaembed"
            })
        }
    })
})();

Towards the bottom of the function you will see the onOK function where I have added:

b.className = "video-container";

However when I add the iFrame code the parent div has no class. I have tried swapping the var b = a.document.createElement("div"); to a span and this worked fine (still no class though) so I know it's the correct piece of code.

If anyone has any ideas as to why this isn't working it would make my Friday that ever-bit more awesome.

Thank you.

1
  • Turns out this can be rectified by using b.setAttribute("class", "video-container"); Does anyone know why this works and the className doesn't? Dec 19 '14 at 12:29
0

Just in case anyone stumbles across this. For the onOk function add the following line of code:

b.setAttribute("class", "video-container");

Add this after the var declaration and before the insertElement function.

This should work for any of the CKEditor plugin functions but double check the variable name first.

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.