CKEditor create inner image uploader plugin

I add a new upload plugin to my CKEDITOR that convert image to base64 and attached in the body content of the rich text editor. This is how:

1/in the plugins folder add this Tree

      taswira

        –> image

          –> icon.png
        –> plugin.js

2/ in the plugin.js I added this code:

/*
 * Upload Image
 */
( function() {
	CKEDITOR.plugins
.add(   /* define the plugin name*/
		'taswira',
		{
			requires : [ 'iframedialog' ],
			init : function(editor) {
				var me = this;
				/* define a dialog*/
				CKEDITOR.dialog
					.add(
					'TaswiraDialog',
					function(editor) {
						var lEditor = editor;
						return {
							title : 'Upload Image Dialog',
							minWidth : 550,
							minHeight : 200,
							contents : [ {
								id : 'iframe',
								label : 'Embed Image',
								expand : true,
								elements : [ {
									type : 'html',
									id : 'pageTaswiraEmbed',
									label : 'Embed Image',
									style : 'width : 100%;',
									/* filebrowserImageBrowseLinkUrl is the variable to be set in the config.js, it refer your web image uploader page (servlet or other) that convert your image to Base64 adter submiting form*/
									/* filebrowserImageBrowseLinkUrl (example : uri/imageuploader.html )*/
									html : ''
								} ]
							} ],
							/* when user click on Ok button*/
							onOk : function() {
								for ( var i = 0; i < window.frames.length; i++) {
									if (window.frames[i].name == 'iframeImgEmbed') {
										var content = window.frames[i].document
												.getElementById("taswiraId");
										break;
									}
								}
								/* get the src bas64 value after upload */
								/* <img id="taswiraId" src="data:image/${imageUploadForm.imageType};base64,${sessionScope.imageUploadForm.base64String}"/>*/
								var tmpLink = content.getAttribute('src');
								
								/* give a random id to the uploaded image and update src*/
								var strContent = '<img id="img_id'+ Math.floor(1000 * (Math.random() % 1)) + '" src="'+tmpLink+'"/>';
								var final_html ='MediaEmbedInsertData|---' + escape(strContent) + '---|MediaEmbedInsertData';
								var imgHtml = CKEDITOR.dom.element.createFromHtml(strContent);
								lEditor.insertHtml(strContent);
								var updated_editor_data = editor.getData();
								var clean_editor_data = updated_editor_data.replace(final_html,'<div class="media_embed">'+strContent+'</div>');
								editor.setData(clean_editor_data);

							}
						};
							});

			editor
					.addCommand('taswira',
							new CKEDITOR.dialogCommand(
									'TaswiraDialog'));

			editor.ui.addButton('taswiraBtn', {
				label : 'Embed Image',
				command : 'taswira',
				icon :  this.path + 'image/icon.png'
			});
			}
		});
})();

3 / and then i configure the plugin inside config.js:

...
CKEDITOR.editorConfig = function( config ) {
	config.filebrowserImageBrowseLinkUrl= ckeditorBasePath +'uploadimage.do';
	config.toolbar = [
	              	...
					/* add the button*/
					{ name: 'others', items: [ 'taswiraBtn'] }
	              ];

	              // Toolbar groups configuration.
	              config.toolbarGroups = [
	              	...
					{ name: 'others' }
	              ];
	              config.scayt_autoStartup = false;
				  /* add the plugin*/
	              config.extraPlugins ='iframedialog,taswira';
	             ...

};
...

4/ Voila, everything works fine. i developed an upload servlet/page that convert uploaded image to Base64 string and the plugin reattached to the active ckeditor.

Hope this Help

Advertisements
About

A java Developer interested in Big Data,NoSQL, Functionnal and Dynamic programming

Posted in Java_corner

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

%d bloggers like this: