JSFiddle - React, Tailwind, and code Playground

by rastrano

JavaScript

var apiKey = 'YOU NEED TO GET API KEY FROM console.developers.google.com';

(function(factory) {
	if (typeof define === 'function' && define.amd) {
		define(['jquery'], factory);
	} else {
		factory(window.jQuery);
	}
}(function($) {
	
	var tmpl    = $.summernote.renderer.getTemplate();
	var editor  = $.summernote.eventHandler.getEditor();
	
	$select = false;
	var gFonts  = [];
	
	var checkGoogleFont = function(value) {
		if ($.inArray(value, gFonts) == -1) {
			gFonts.push(value);
			$('#summernoteGoogleFonts').attr('href', 'http://fonts.googleapis.com/css?family=' + gFonts.join('|'));
		}
	}
	// add plugin
	$.summernote.addPlugin({
		name: 'googleFonts',
		buttons: {
			googleFonts: function() {
				$.getJSON('https://www.googleapis.com/webfonts/v1/webfonts?key='+apiKey, function(fonts) {
					var fontObj = [];
					$select = $('<select class="gFontSelect"></select>');
					$.each(fonts.items, function(index, font) {
						var fontCategory = font.category.toUpperCase();
						if (fontCategory in fontObj) {
							fontObj[fontCategory].push(font.family);
							$select.find('optgroup[label="' + fontCategory + ' (Google Font)"]').append('<option value="' + font.family + '" data-event="selectFont" data-value="' + font.family + '" data-variants="' + font.variants.join(',') + '">' + font.family + '</option>');
						} else {
							fontObj[fontCategory] = [];
							$select.append('<optgroup label="' + fontCategory + ' (Google Font)"></optgroup>');
						}
					});
				});
				return tmpl.iconButton('fa fa-google', {
					title: 'Google Fonts',
					dropdown: '<ul id="googleFontsDropdown" class="dropdown-menu"></ul>',
					event: 'googleFonts',
					hide: true
				});
			}
		},
		events: {
			googleFonts: function(event, editor, layoutInfo) {
				$dropdown = $(event.target).parent().find('.dropdown-menu');
				
				if($('#summernoteGoogleFonts').length == 0)
					$('head').append('<link rel="stylesheet" type="text/css" id="summernoteGoogleFonts"...