Miss All Sunday


My world is getting smaller everyday-yea-yea-yea

Summernote custom button


JavaScript

And following the previous entry, heres another tip. This time is for the WYSIWYG editor summernote.

This little plugin will allow you to add an extra button that will basically mimic the default image one but will also insert the needed structured data for it, including the annoying width and height params. Lets post the whole thing at once and explain later 😁 😆

	// Add your button definition
$.extend($.summernote.options,{
	microDataImg:{
		icon:'%3Ci class="note-icon-pencil"/%3E',
		removeEmpty:true
	}
});

// Add your plugin
$.extend($.summernote.plugins,{
	'microDataImg' : function (context) {
		// Set some handy vars
		var self = this,
			ui = $.summernote.ui,
			$note = context.layoutInfo.note,
			$editor = context.layoutInfo.editor,
			$editable = context.layoutInfo.editable,
			options = context.options,
			lang = options.langInfo;

		// Associate your button with your plugin
		context.memo('button.microDataImg',function(){
			var button = ui.button({
				contents: options.microDataImg.icon,
				tooltip: 'microDataImg',
				click: function () {
					context.invoke('microDataImg.show');
				}
			});
			return button.render();
		});

		// Create the dialog box
		this.initialize = function(){
			var $container = options.dialogsInBody ? $(document.body) : $editor,
				body =
			'%3Cdiv class="form-group"%3E' +
			'%3Clabel%3E' + lang.link.url + '%3C/label%3E' +
			'%3Cinput class="note-link-imgUrl form-control" type="text" /%3E%3C/div%3E';
			var footer = '%3Cbutton href="#" class="btn btn-primary note-link-btn"%3E' + lang.link.insert + '%3C/button%3E';

			this.$dialog = ui.dialog({
				className: 'link-dialog',
				title: lang.link.insert,
				fade: options.dialogsFade,
				body: body,
				footer: footer
			}).render().appendTo($container);
		};
		this.destroy = function(){
			ui.hideDialog(this.$dialog);
			this.$dialog.remove();
		};

		// Show your dialog on button click
		this.show = function(){
			ui.showDialog(self.$dialog);
			var $imgUrl = self.$dialog.find('.note-link-imgUrl'),
				$editBtn= self.$dialog.find('.note-link-btn').click(function(e){
					e.preventDefault();
					self.buildImg($imgUrl.val());
					return false;
				});
			ui.onDialogHidden(self.$dialog,function(){
				$editBtn.off('click');
			});
		};

		// Build the final presentation
		this.buildImg = function(imgUrl){
			var imgDom = new Image();
				imgDom.src = imgUrl;
			$(imgDom).load(function(){
				idom = $('%3Cdiv/%3E', {
					class: 'centertext',
					itemprop: 'image',
					itemscope: '',
					itemtype:'https://schema.org/ImageObject'
				}).append('%3Cmeta itemprop="url" content="'+ this.src +'"%3E%3Cmeta itemprop="width" content="'+ this.width +'"%3E%3Cmeta itemprop="height" content="'+ this.height +'"%3E');
				$(this).appendTo(idom);

				$('#summernote').summernote('insertNode', idom.get(0));
			}).attr({
				class: 'img-responsive img-rounded center-block'
			});
			ui.hideDialog(self.$dialog);
		};
	}
});

Nah, I won't bother you with boring details, I'll just go straight to the important stuff.

Set a unique ID for your plugin, in this example I used "microDataImg". This is used to identify your plugin so pick a unique string.

	this.buildImg = function(imgUrl){
		var imgDom = new Image();
			imgDom.src = imgUrl;
		$(imgDom).load(function(){
			idom = $('<div/>', {
				class: 'centertext',
				itemprop: 'image',
				itemscope: '',
				itemtype:'https://schema.org/ImageObject'
			}).append('<meta itemprop="url" content="'+ this.src +'"><meta itemprop="width" content="'+ this.width +'"><meta itemprop="height" content="'+ this.height +'">');
			$(this).appendTo(idom);

			$('#summernote').summernote('insertNode', idom.get(0));
		}).attr({
			class: 'img-responsive img-rounded center-block'
		});
		ui.hideDialog(self.$dialog);
	};

This is the important stuff, this is where the image gets wrapped around whatever you want, on this example it is wrapped inside a div and the needed metatags are also added.

Its a simple prototype with only one param, the image url, this is the url the user typed on the little dialog box.

Perhaps the most important stuff is this bit:

	$('#summernote').summernote('insertNode', idom.get(0));

It is used to insert the resulting HTML back into your editor, this of course assumes you are using the default #summernote ID.

The rest of the code are prototypes used to create and destroy the dialog box as well as a callback to actually call your plugin whenever your custom button is clicked.

Thats pretty much it.
Last edited by Suki reason: typos on 13 Mar 2017, 8:40 am