Ckeditor Custom Image Dialog Plugin

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.files.wordpress.com/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 🙂

Advertisements

24 thoughts on “Ckeditor Custom Image Dialog Plugin

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

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

  2. if i see well this is version without onShow fn, which is crucial for your plugin.
    Your plugin works great, beside this popup issue.

    1. 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();
      				}
      
      			});
      		},
      
  3. 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.

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

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

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

      1. Standard Image plugin allows to right-click on image in editor area and adjust image width, height, align etc.

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s