Web Fonts in tinyMCE4

jesse.glaves · July 18, 2014 1:40pm

Just curious; does anyone have a solution for getting web fonts (specifically Typekit) to work in the tinyMCE editor window? I've spent as much time as I can stand researching this issue today, and none of the methods I've tried, which relied heavily upon injecting js into tinyMCE's iframe, seem to work for me. This isn't a priority, but it would be nice if the editor was truly WYSIWYG for my team.

timbuckingham · July 18, 2014 1:47pm

Talked to some of the developers here and they said they accomplished it by replicating /core/admin/layouts/_html-field-loader.php into /custom/admin/layouts/_html-field-loader.php and adding the TypeKit scripts below the TinyMCE initializers. Then you'd use the "content_css" attribute to set your CSS file that uses the TypeKit fonts.

jesse.glaves · July 18, 2014 2:33pm

Yeah, that's what I have been trying to do, albeit, not in the custom/admin/layouts directory. I've tried embedding the Typekit async code in every place/method I can think of, and it keeps breaking the editor. I've been trying to do something similar to this in _html-field-loader.php:

tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",

// Setup function
setup: function(ed) {

// Add TypeKit script to the iframe header
ed.onPreInit.add(function(ed) {

// Get the DOM document object for the IFRAME
var doc = ed.getDoc();

// Create the script we will add to the header asynchronously
var jscript = "var TypekitConfig = {\n\
kitId: 'abcdefghijk'\n\
};\n\
(function() {\n\
var tk = document.createElement('script');\n\
tk.src = '//use.typekit.com/' + TypekitConfig.kitId + '.js';\n\
tk.type = 'text/javascript';\n\
tk.async = 'true';\n\
tk.onload = tk.onreadystatechange = function() {\n\
var rs = this.readyState;\n\
if (rs && rs != 'complete' && rs != 'loaded') return;\n\
try { Typekit.load(TypekitConfig); } catch (e) {}\n\
};\n\
var s = document.getElementsByTagName('script')[0];\n\
s.parentNode.insertBefore(tk, s);\n\
})();";

// Create a script element and insert the TypeKit code into it
var script = doc.createElement("script");
script.type = "text/javascript";
script.appendChild(doc.createTextNode(jscript));

// Add the script to the header
doc.getElementsByTagName("head")[0].appendChild(script);

});

}
});

Any chance your developers would be willing to share their code?

timbuckingham · July 18, 2014 2:38pm

From one of our sites running BigTree 4.0 (should be pretty similar in 4.1, there's just a bunch more code to switch between TinyMCE 3 and 4). Obviously this is running in TinyMCE 3, so there's a chance it may not function in 4.1. From what they said it sounds like TinyMCE's iframe will have access to the fonts of the parent since it's an empty iframe. I haven't tested beyond Firefox, but the site this comes from does seem to be loading the fonts into the WYSIWYG.

<?
	$content_css = $cms->getSetting("tinymce-content-css");
?>
<script type="text/javascript">
	$(document).ready(function() {
  tinyMCE.init({
  		<? if ($content_css) { ?>content_css: "<?=$content_css?>",<? } ?>
  		skin : "BigTree",
  		inlinepopups_skin: "BigTreeModal",
		theme: "advanced",
		mode: "exact",
		elements: "<?=implode(",",$bigtree["html_fields"])?>",
		file_browser_callback: "BigTreeFileManager.tinyMCEOpen",
		plugins: "advimage,inlinepopups,paste,spellchecker,table,template",
		theme_advanced_blockformats: "p,h2,h3,h4",
		theme_advanced_buttons1: "undo,redo,separator,bold,italic,underline,strikethrough,separator,formatselect,styleselect,justifyleft,justifycenter,justifyright,justifyfull,separator,bullist,numlist,outdent,indent,separator,template,spellchecker,code",
		theme_advanced_buttons2: 'link,unlink,anchor,image,separator,hr,removeformat,visualaid,separator,table,row_after,delete_row,col_after,delete_col,separator,pasteword',
		theme_advanced_buttons3: '',
		theme_advanced_disable: 'cleanup,charmap',
	 	theme_advanced_toolbar_location: "top",
		theme_advanced_toolbar_align: "left",
		theme_advanced_statusbar_location : "bottom",
		theme_advanced_resizing: true,
		theme_advanced_resize_horizontal: false,
		theme_advanced_resize_vertial: true,
		theme_advanced_styles : "Align Left=block_left;Align Right=block_right;Button Link=button_link",
		paste_remove_spans: true,
		paste_remove_styles: true,
		paste_strip_class_attributes: true,
		paste_auto_cleanup_on_paste: true,
		relative_urls: false,
		remove_script_host: false,
		gecko_spellcheck: true,
		extended_valid_elements : "object[classid|codebase|width|height|align|style],param[name|value],embed[quality|type|pluginspage|width|height|src|align|style],iframe[src|class|width|height|name|align|style],figure[class],figcaption,cite,header[class|id],article[class|id]",
		template_external_list_url: "<?=$www_root?>admin/js/tiny_mce/lists/template_list.php",
		content_css : "<?=$www_root?>css/wysiwyg.css",
		style_formats : [
			{title : 'Introductory Paragraph', block : 'p', classes : 'introduction' }
		]
		<? if (isset($mce_width)) { ?>,width: "<?=$mce_width?>"<? } ?>
		<? if (isset($mce_height)) { ?>,height: "<?=$mce_height?>"<? } ?>
	});
	});
</script>
<script type="text/javascript" src="http://fast.fonts.com/jsapi/7b3d6d6a-6a38-4aec-a7ba-8c835427a3bd.js"></script>
<script type="text/javascript" src="//use.typekit.net/imt7hoj.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

jesse.glaves · July 18, 2014 2:53pm

Bummer, I did try that method as well. This doesn't appear to work with tinyMCE4.

Discussion Forum

BigTree CMS Discussion Forum

#1 July 18, 2014 1:40pm

Web Fonts in tinyMCE4

#2 July 18, 2014 1:47pm

Re: Web Fonts in tinyMCE4

#3 July 18, 2014 2:33pm

Re: Web Fonts in tinyMCE4

#4 July 18, 2014 2:38pm

Re: Web Fonts in tinyMCE4

#5 July 18, 2014 2:53pm

Re: Web Fonts in tinyMCE4

Board footer