CKEditor 4
Fri, 05/31/2013 - 14:39
#1
jennica
jennica's picture
Joined: 31/05/2013
Posts: 1

Custom plugin not working when upgrading ckeditor to v 4

Hello,

Due to IE10 issues I've had to upgrade my CKEditor to the latest version. I have a custom made plugin which fetches internal links in the cms system on the site, this plugin will still be needed in the new editor as well, but I can't seem to get it to work. I downloaded the full version of CKEditor 4.1.1 and replaced the files in the ckeditor folder in my project. Testing the editor, it works great! To add the old plugin i've followed the steps in this tutorial (I was not the one who built the custom plugin in the first place so I don't know exactly how it's done), instead of creating a new folder for the plugin I added the folder that I had, no code changed yet. 

plugin.js

CKEDITOR.plugins.add('internalLink', {
    requires: ['iframedialog'],
    init: function(a) {
        CKEDITOR.dialog.addIframe('internalLink_dialog', 'Internal link', this.path + 'dialogs/link.aspx', 500, 600, function() { });
        var cmd = a.addCommand('internalLink', { exec: internalLink_onclick });
        cmd.modes = { wysiwyg: 1, source: 1 };
        cmd.canUndo = false;
        a.ui.addButton('internalLink', { label: 'Internal links', command: 'internalLink', icon: this.path + 'images/link.jpg' });
    }
});

function internalLink_onclick(e) {
    CKEDITOR.currentInstance.openDialog('internalLink_dialog');
}

The folder I added also contains "/images/link.jpg" and "/dialogs/link.aspx".

In my view I then altered the existing code so it looks like this:

CKEDITOR.replace('<%=EditText.FindControl("txtText").ClientID %>',
{
    extraPlugins: 'internalLink',
    toolbar: [
	{ name: 'basic', items: ['Source', 'Save', 'PasteText', '-', 'Undo', 'Redo', '-','Maximize', 'RemoveFormat'] },
        { name: 'justify', items: ['JustifyLeft','JustifyCenter','JustifyRight', '-', 'Indent', 'Outdent'] },
 	{ name: 'style', items: [ 'Bold', 'Italic', '-','NumberedList','BulletedList', '-','internalLink','Link','Unlink','-','Image','Table','HorizontalRule'] },
 	{ name: 'format', items: [ 'Format', 'FontSize', 'TextColor' ] }
	]
});

What's "special" here is that I added the extraPlugins and linked in my plugin, I also added it in the toolbar. I've tested both this way to add the extraPlugins and this way:

CKEDITOR.config.extraPlugins = 'internalLink';

Both code samples seems to work the same way.

So according to the tutorial I should see the button now but instead of a button the whole editor is gone and I get the following javascript error:

GET http://localhost:64841/Javascript/ckeditor/plugins/iframedialog/plugin.js?t=D3NA 404 (Not Found) ckeditor.js:72
Uncaught [CKEDITOR.resourceManager.load] Resource name "iframedialog" was not found at "http://localhost:64841/Javascript/ckeditor/plugins/iframedialog/plugin.js?t=D3NA". 

Hmm, iframedialog? The plugincode says it requires it in the CKEditor build-config.js there is no 'iframedialog', only 'iframe', perhaps it's a name connected to the old version that was used before. I change my plugin code to require just 'iframe' instead.

Aaargh!!

Uncaught TypeError: Object function (a,b){function c(){var a=l._.focusList;a.sort(function(a,b){return a.tabIndex!=b.tabIndex?b.tabIndex-a.tabIndex:a.focusIndex-b.focusIndex});for(var b=a.length,c=0;c<b;c++)a[c].focusIndex=c}function e(a){var b=l._.focusList,a=a||0;if(!(1>b.length)){var c=l._.currentFocusIndex;try{b[c].getInputElement().$.blur()}catch(f){}for(var d=c=(c+a+b.length)%b.length;a&&!b[d].isFocusable()&&!(d=(d+a+b.length)%b.length,d==c););b[d].focus();"text"==b[d].type&&b[d].select()}}function d(b){if(l==
CKEDITOR.dialog._.currentTop){var c=b.data.getKeystroke(),d="rtl"==a.lang.dir;o=i=0;if(9==c||c==CKEDITOR.SHIFT+9)c=c==CKEDITOR.SHIFT+9,l._.tabBarMode?(c=c?p.call(l):u.call(l),l.selectPage(c),l._.tabs[c][0].focus()):e(c?-1:1),o=1;else if(c==CKEDITOR.ALT+121&&!l._.tabBarMode&&1<l.getPageCount())l._.tabBarMode=!0,l._.tabs[l._.currentTabId][0].focus(),o=1;else if((37==c||39==c)&&l._.tabBarMode)c=c==(d?39:37)?p.call(l):u.call(l),l.selectPage(c),l._.tabs[c][0].focus(),o=1;else if((13==c||32==c)&&l._.tabBarMode)this.selectPage(this._.currentTabId),
this._.tabBarMode=!1,this._.currentFocusIndex=-1,e(1),o=1;else if(13==c){c=b.data.getTarget();if(!c.is("a","button","select","textarea")&&(!c.is("input")||"button"!=c.$.type))(c=this.getButton("ok"))&&CKEDITOR.tools.setTimeout(c.click,0,c),o=1;i=1}else if(27==c)(c=this.getButton("cancel"))?CKEDITOR.tools.setTimeout(c.click,0,c):!1!==this.fire("cancel",{hide:!0}).hide&&this.hide(),i=1;else return;g(b)}}function g(a){o?a.data.preventDefault(1):i&&a.data.stopPropagation()}var f=CKEDITOR.dialog._.dialogDefinitions[b],
k=CKEDITOR.tools.clone(W),m=a.config.dialog_buttonsOrder||"OS",j=a.lang.dir,h={},o,i;("OS"==m&&CKEDITOR.env.mac||"rtl"==m&&"ltr"==j||"ltr"==m&&"rtl"==j)&&k.buttons.reverse();f=CKEDITOR.tools.extend(f(a),k);f=CKEDITOR.tools.clone(f);f=new L(this,f);k=R(a);this._={editor:a,element:k.element,name:b,contentSize:{width:0,height:0},size:{width:0,height:0},contents:{},buttons:{},accessKeyMap:{},tabs:{},tabIdList:[],currentTabId:null,currentTabIndex:null,pageCount:0,lastTab:null,tabBarMode:!1,focusList:[],
currentFocusIndex:0,hasFocus:!1};this.parts=k.parts;CKEDITOR.tools.setTimeout(function(){a.fire("ariaWidget",this.parts.contents)},0,this);k={position:CKEDITOR.env.ie6Compat?"absolute":"fixed",top:0,visibility:"hidden"};k["rtl"==j?"right":"left"]=0;this.parts.dialog.setStyles(k);CKEDITOR.event.call(this);this.definition=f=CKEDITOR.fire("dialogDefinition",{name:b,definition:f},a).definition;if(!("removeDialogTabs"in a._)&&a.config.removeDialogTabs){k=a.config.removeDialogTabs.split(";");for(j=0;j<
k.length;j++)if(m=k[j].split(":"),2==m.length){var n=m[0];h[n]||(h[n]=[]);h[n].push(m[1])}a._.removeDialogTabs=h}if(a._.removeDialogTabs&&(h=a._.removeDialogTabs[b]))for(j=0;j<h.length;j++)f.removeContents(h[j]);if(f.onLoad)this.on("load",f.onLoad);if(f.onShow)this.on("show",f.onShow);if(f.onHide)this.on("hide",f.onHide);if(f.onOk)this.on("ok",function(b){a.fire("saveSnapshot");setTimeout(function(){a.fire("saveSnapshot")},0);!1===f.onOk.call(this,b)&&(b.data.hide=!1)});if(f.onCancel)this.on("cancel",
function(a){!1===f.onCancel.call(this,a)&&(a.data.hide=!1)});var l=this,C=function(a){var b=l._.contents,c=!1,d;for(d in b)for(var f in b[d])if(c=a.call(this,b[d][f]))return};this.on("ok",function(a){C(function(b){if(b.validate){var c=b.validate(this),d="string"==typeof c||!1===c;d&&(a.data.hide=!1,a.stop());P.call(b,!d,"string"==typeof c?c:void 0);return d}})},this,null,0);this.on("cancel",function(b){C(function(c){if(c.isChanged())return confirm(a.lang.common.confirmCancel)||(b.data.hide=!1),!0})},
this,null,0);this.parts.close.on("click",function(a){!1!==this.fire("cancel",{hide:!0}).hide&&this.hide();a.data.preventDefault()},this);this.changeFocus=e;var v=this._.element;a.focusManager.add(v,1);this.on("show",function(){v.on("keydown",d,this);if(CKEDITOR.env.opera||CKEDITOR.env.gecko)v.on("keypress",g,this)});this.on("hide",function(){v.removeListener("keydown",d);(CKEDITOR.env.opera||CKEDITOR.env.gecko)&&v.removeListener("keypress",g);C(function(a){Q.apply(a)})});this.on("iframeAdded",function(a){(new CKEDITOR.dom.document(a.data.iframe.$.contentWindow.document)).on("keydown",
d,this,null,0)});this.on("show",function(){c();if(a.config.dialog_startupFocusTab&&1<l._.pageCount)l._.tabBarMode=!0,l._.tabs[l._.currentTabId][0].focus();else if(!this._.hasFocus)if(this._.currentFocusIndex=-1,f.onFocus){var b=f.onFocus.call(this);b&&b.focus()}else e(1)},this,null,4294967295);if(CKEDITOR.env.ie6Compat)this.on("load",function(){var a=this.getElement(),b=a.getFirst();b.remove();b.appendTo(a)},this);U(this);V(this);(new CKEDITOR.dom.text(f.title,CKEDITOR.document)).appendTo(this.parts.title);
for(j=0;j<f.contents.length;j++)(h=f.contents[j])&&this.addPage(h);this.parts.tabs.on("click",function(a){var b=a.data.getTarget();b.hasClass("cke_dialog_tab")&&(b=b.$.id,this.selectPage(b.substring(4,b.lastIndexOf("_"))),this._.tabBarMode&&(this._.tabBarMode=!1,this._.currentFocusIndex=-1,e(1)),a.data.preventDefault())},this);j=[];h=CKEDITOR.dialog._.uiElementBuilders.hbox.build(this,{type:"hbox",className:"cke_dialog_footer_buttons",widths:[],children:f.buttons},j).getChild();this.parts.footer.setHtml(j.join(""));
for(j=0;j<h.length;j++)this._.buttons[h[j].id]=h[j]} has no method 'addIframe' plugin.js:4
CKEDITOR.plugins.add.init plugin.js:4
(anonymous function) ckeditor.js:221
n ckeditor.js:202
CKEDITOR.scriptLoader.load ckeditor.js:202
(anonymous function) ckeditor.js:220
(anonymous function) ckeditor.js:209
(anonymous function) ckeditor.js:207
n ckeditor.js:202
r ckeditor.js:202
p ckeditor.js:202
(anonymous function)

That's not any better, but okay, object function yada yada... has no method 'addIframe'. Aha, is that also an old function from thr previous version? Hmm, no, the documentation says it's a function. Hmmm..

erm..

eu..

Ah, I am stuck! Does anyone have any ideas about what I'm doing wrong here? 

Top
Twitter Facebook Facebook Instagram Medium Linkedin GitHub Arrow down Phone Menu Close icon Check