Web Fonts

Setting caret (cursor) position in TinyMCE without using bookmarks

I recently had to automatically implement emoticons in my TinyMCE instance on a website. One of the requirements was to be able to type :) and have it automatically change to the emoticon.This wasn’t a huge task but the issue that followed seem to present a challenge. By default the caret was moving back to the beginning of the text rather than staying in its natural position.

The solution I found to this problem was to add an extra element along with the image that was being inserted. Then I was able to search for that element id and select it which would position the caret in the correct place. Then I would remove the element added as it was no longer required.

var placeholderMarker = $(tinyMCE.activeEditor.getBody()).find('#cursorMarker');
tinyMCE.activeEditor.selection.select(placeholderMarker.get(0) );
placeholderMarker.remove();

Mime Types (especially for Web Fonts)

I am regularly having to go in search of mime types for web fonts, so thought I would put them here so I will know exactly where to go for them.

.eot      application/octet-stream
.woff     application/x-font-woff
.svg      image/svg+xml
.ttf        application/octet-stream

Feel free to add more mime types below that you think would be useful to others.

Google Web Fonts

I thought that Google Web Fonts deserved a post here.

I used it in a website yesterday for the first time. I have done tests previously but haven’t actually used it.
Admittedly there aren’t as many fonts on there as TypeKit or Fonts.com but they still have a decent selection.

It is extremely easy to pick your fonts and integrate them into your website. To integrate them you just reference a CSS file on the Google servers and then use a predefined name in the font-family css tag.

Its definitely worth a try if you haven’t already and best of all, its free!

 Scroll to top