Monday, 16-May-16 21:29:00 CEST

Porting my blog for the second time, editing part 6

This is post #51 of my series about how I port this blog from Blogengine.NET 2.5 ASPX on a Windows Server 2003 to a Linux Ubuntu server, Apache2, MySQL and PHP. A so called LAMP. The introduction to this project can be found in this blog post https://www.malmgren.nl/post/Porting-my-blog-for-the-second-time-Project-can-start.aspx.

Now it is time to take control of that business of CKEditor automatically base64 encoding a pasted image into the blog post instead of as an uploaded image.

I found this solution: http://www.isummation.com/blog/block-drag-drop-image-or-direct-image-paste-into-ckeditor-using-firefox/

There are other solutions that automatically uploads the pasted image but I could not find out how to get them installed and it looked like they are not compatible with the CKEditor version I am using so think I go for the less elegant blocking method.

The implication of this is that it will be less convenient to make for example screenshots and paste these into the blog posts but I think that in the future I will do less of blogging involving screenshots so that is not a big issue. When I blog about art or photography etc then I will upload images rather than pasting images. If I occasionally paste an image then it is fine to have that action blocked. So let's block the pasting of images in CKEditor.

Bummer. The isummation.com site actual link to the plugin is giving 404s. I left a comment about it just for the sake of it but I don't expect any reply soon.

Then I found someone at stackoverflow.com talking about the isummation.com solution: http://stackoverflow.com/questions/6582559/ckeditor-preventing-users-from-pasting-images

This is turning a bit into an research to get to the source of things. That is fine.

So before starting let's summarize what I am up to. I am reconstructing the isummation.com solution putting little bits and pieces together to block images. I have no clue what I am doing here. But I start with the instruction here: http://www.isummation.com/blog/block-drag-drop-image-or-direct-image-paste-into-ckeditor-using-firefox/

I create a new empty folder in the plugins directory. But I don't put anything there because isummation.com had a broken link to the zip archive. Then I insert these two lines into config.js.

// Jens added on 2016-05-16
config.extraPlugins='blockimagepaste';

Then I continue with this instruction: http://stackoverflow.com/questions/6582559/ckeditor-preventing-users-from-pasting-images

I do like Nis says. I create a plugin.js file in the blockimagepaste directory.

But I don't insert the source as Nis said but I go for the solution by haram lerma. That is totally not working. I don't understand how it is supposed to work, it is a mess. So I backed up and took Nis solution and pasted it into the plugin.js file and then I moved the 'blockimagepaste' configuration to the php hosting the editor itself:

≺script type = "text/javascript"≻
	CKEDITOR.replace( 'myEditor', {
			uiColor: '#9AB8F3',
			height: 160,
			filebrowserBrowseUrl: '/imgbrowse.php?type=Files',
			filebrowserUploadUrl: '/iaupload.php?type=Files',
			extraPlugins: 'devtools',
			extraPlugins: 'blockimagepaste'
	});
≺/script≻

That worked before. So I try this and VOALA!

Mission completed.

Jigsaw puzzle came together. Thanks Nis.