I’ve been working on this plugin for couple days, and finally got a solution to replace default image tool for CKEditor.
how to use this plugin :
download custimage.zip at http://ckeditor.com/addon/custimage
extract and put it inside plugin folder
find config.js at ckeditor
CKEDITOR.editorConfig = function( config ) {
// add these line
config.extraPlugins = 'custimage'; //enable custimage tool button
config.removePlugins= 'image'; //disable default image tool button
}
to replace current dialog with whatever page you want, open this file :
custimage/dialogs/custimage.js
replace this code with your own page :
ckeditor/plugins/custimage/dialogs/dialogtest.html
and don’t forget to add this function (provided at dialogtest.html) :
function onClose(){
//change this with your desired image url from your image upload tool
var imgUrl = "https://ilmubarokah.wordpress.com/wp-content/uploads/2014/02/myblog2.png?w=360";
var result="<img src="+imgUrl+" style='width:auto;heigth:auto;'>";
var element = window.opener.CKEDITOR.dom.element.createFromHtml( result );
var CKEDITOR = window.opener.CKEDITOR;
for ( var i in CKEDITOR.instances ){
var currentInstance = i;
break;
}
var oEditor = window.opener.CKEDITOR.instances[currentInstance];
oEditor.insertElement(element);
window.close();
}
done. GL. please let me know if it works for you 🙂
Ilmu, Kunci Sukses Dunia dan Akhirat 
Hi,
nice plugin!
How to show dialog test.html in dialog window? Right now, browsers will block opening new window.
Hi Vladimirjus, thanks,
Unfortunately there’s no way to open new window without permission from browser so you need to let user know that your site needs permission for popup window.
other than this solution, you can keep using standard image plugin, but you need to replace browse server button to your own site/html at config.js
Hi Firdaus,
Thanks for promt replay!
If I use standard image plugin, is there a way to insert just url as it is, without
Best,
V.
only url? you can modify my plugin btw, wait a moment, ill give a link to you asap.
Thanks again.
I know how to modify your plugin. What I’m trying to do now is to avoid popup block…
let’s see if this satisfy your needs https://www.mediafire.com/?06ax0b81t27c61w
if i see well this is version without onShow fn, which is crucial for your plugin.
Your plugin works great, beside this popup issue.
ok got it, I’ll work on that later, there must be a way to overcome this issue. thanks for your feedback.
hi Vladimirijus, have you figured out this popup issue?
i have solution for it, right now, im using jquery and jquery ui to load the dialog, (not using window.open, here the example :
onShow:function(){ CKEDITOR.dialog.getCurrent().hide(); var $myDlg= $('<div></div>').load('backstage/ckeimage/imgform.jsp'); //change load parameter with html (which has form on it, and use ajax upload and json data to get get the image url back) $myDlg.dialog({ modal:true, width:640, height:480, open:function(event,ui) { //$('.dpc').datepicker(); }, close:function() { // The context of this function is the dialog object itself. // http://docs.ckeditor.com/#!/api/CKEDITOR.dialog var dialog = this; // Creates a new <img> element. var custimage = editor.document.createElement( 'img' ); // Set element attribute and text, by getting the defined field values. custimage.setAttribute( 'src', 'abc' ); custimage.setAttribute( 'alt', 'def' ); //custimage.setText( dialog.getValueOf( 'tab-basic', 'alt' ) ); // Finally, inserts the element at the editor caret position. editor.insertElement( custimage ); $myDlg.remove(); } }); },Hi Firdaus,
I will take a look at it and let you know as soon as I test it.
Hi, is there a way to pass a variable to you plugin? I need to set the url and a login_id such as …asp?login_id=variable. If I can do this, this will definitely work for me.
sure, you just need to modify litle things for it, this plugin supposed be able to pass anything. just explain me briefly, ill try to help
Firdaus,
Hi. Here is the data from the page that I am attempting to send:
CKEDITOR.replace(‘rich_text’, { customValues: { name: ‘login_id’} , extraPlugins: ‘custimage’ } );
The custom image control needs to be able to read that login_id for this url:
window.open(“http://p1.example.com/rte/pop_select_image.asp?login_id=login_id”…
Thanks for looking into this for me.
you can save your login_id value to a hidden element (text, or something else) give it id with temp_var
and then before onShow function calling window.open, you can get the temp variable with this simple command
var temp_var=document.getElementById(“temp_var”);
window.open(‘http://p1.example.com/rte/pop_select_image.asp?login_id=’+temp_var;
this one should works for you. GL
I would tend to think that I need to add my variable in the ckeditor.js code where the call to custimage resides:
CKEDITOR.plugins.add(“custimage”,{icons:”custimage”,init:function(a){ a.addCommand(“custimage”,new CKEDITOR.dialogCommand(“custimageDialog”));a.ui.addButton(“custimage”,{label:a.lang.common.image,command:”custimage”,toolbar:”insert”});CKEDITOR.dialog.add(“custimageDialog”,this.path+”dialogs/custimage.js”); }});
I haven’t figured out how to add it here without breaking the code.
I was able to resolve my issue with this. Just had my quotes incorrectly placed. Thanks again for your help.
Great. Sorry for didn’t reply to your last message. Was busy with something else. Good luck with your work
Any thoughts how to add image setup dialog? 😉
And thank you very much for your plugin.
please explain me briefly, what did you mean with image setup
Standard Image plugin allows to right-click on image in editor area and adjust image width, height, align etc.
why do you need to right click for resizing while we can do it by dragging?
does this also work with CKEditor 4.4
it works very well
main thanks for reply.
I understand passing in an array of image url. My imaging are stored on parse.com so I can fetch these names prior to ckeditor. You mention a way of updating these images dynamically in your code however I don’t follow where to put this code or whether it can be called by a function of mine
thanks