Cotonti / Open Source PHP Content Management FrameworkContent Management Framework

Tutorial: MarkitUp introducing fonts

Documentation / Plugins / Tutorial: MarkitUp introducing fonts

Add Font selection in the editor

I wrote this for everyone who uses MarkItUp BBcodes, and who wants to introduce font selections in the editor


find plugins/markitup/style.css
Note: This is the style for presenting your menu items in the different font styles

Add these lines:

.markItUp .mFonts1 a	{
.markItUp .fn01 a	{background-image:none; font-family: Arial, Helvetica, sans-serif; padding-left:5px;}
.markItUp .fn02 a	{background-image:none; font-family: 'Arial Black', Gadget, sans-serif; padding-left:5px;}
.markItUp .fn03 a	{background-image:none; font-family: 'Bookman Old Style', serif; padding-left:5px;}
.markItUp .fn04 a	{background-image:none; font-family: 'Comic Sans MS', cursive; padding-left:5px;}
.markItUp .fn05 a	{background-image:none; font-family: Courier, monospace; padding-left:5px;}
.markItUp .fn06 a	{background-image:none; font-family: 'Courier New', Courier, monospace; padding-left:5px;}
.markItUp .fn07 a	{background-image:none; font-family: Garamond, serif; padding-left:5px;}
.markItUp .fn08 a	{background-image:none; font-family: Georgia, serif; padding-left:5px;}
.markItUp .fn09 a	{background-image:none; font-family: Impact, Charcoal, sans-serif; padding-left:5px;}
.markItUp .fn10 a	{background-image:none; font-family: 'Lucida Console', Monaco, monospace; padding-left:5px;}
.markItUp .fn11 a	{background-image:none; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; padding-left:5px;}
.markItUp .fn12 a	{background-image:none; font-family: 'MS Sans Serif', Geneva, sans-serif; padding-left:5px;}
.markItUp .fn13 a	{background-image:none; font-family: 'MS Serif', 'New York', sans-serif; padding-left:5px;}
.markItUp .fn14 a	{background-image:none; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; padding-left:5px;}
.markItUp .fn15 a	{background-image:none; font-family: Tahoma, Geneva, sans-serif; padding-left:5px;}
.markItUp .fn16 a	{background-image:none; font-family: 'Times New Roman', Times, serif; padding-left:5px;}
.markItUp .fn17 a	{background-image:none; font-family: 'Trebuchet MS', Helvetica, sans-serif; padding-left:5px;}
.markItUp .fn18 a	{background-image:none; font-family: Verdana, Geneva, sans-serif; padding-left:5px;}



find markitup/lang/xx.lang.js (xx can be any language, change all languages if you use multiple langs)
Note: these are your menu texts...


var L = {
	fn01:	'01: Arial',
	fn02:	'02: Arial Black',
	fn03:	'03: Bookman Old Style',
	fn04:	'04: Comic Sans MS',
	fn05:	'05: Courier',
	fn06:	'06: Courier New',
	fn07:	'07: Garamond',
	fn08:	'08: Georgia',
	fn09:	'09: Impact',
	fn10:	'10: Lucida Console',
	fn11:	'11: Lucida Sans Unicode',
	fn12:	'12: MS Sans Serif',
	fn13:	'13: MS Serif',
	fn14:	'14: Palatino Linotype',
	fn15:	'15: Tahoma',
	fn16:	'16: Times New Roman',
	fn17:	'17: Trebuchet MS',
	fn18:	'18: Verdana',
	youtube:	'Youtube',
	align:		'Lijn uit',
	black:		'Zwart',

Step 3:

find marktiup/js/set.js
Note: These are the general editor settings, we are going to add our new font selection menu here :)
See Step1 for the css off these menu items..

	markupSet: [
		{name: L.bold, className:'mBold', key:'B', openWith:'[b]', closeWith:'[/b]'},
		{name: L.italic, className:'mItalic', key:'I', openWith:'[i]', closeWith:'[/i]'},
		{name: L.underline, className: 'mUnderline', key:'U', openWith:'[u]', closeWith:'[/u]'},
		{name: L.strike, className: 'mStrike', key:'S', openWith:'[s]', closeWith: '[/s]'},
		{separator:'---------------' },
		{name: L.font, className: 'mFonts1',
		dropMenu :[
			{name: L.fn01, className: 'fn01', openWith:'[font01]', closeWith:'[/font01]' },
			{name: L.fn02, className: 'fn02', openWith:'[font02]', closeWith:'[/font02]' },
			{name: L.fn03, className: 'fn03', openWith:'[font03]', closeWith:'[/font03]' },
			{name: L.fn04, className: 'fn04', openWith:'[font04]', closeWith:'[/font04]' },
			{name: L.fn05, className: 'fn05', openWith:'[font05]', closeWith:'[/font05]' },
			{name: L.fn06, className: 'fn06', openWith:'[font06]', closeWith:'[/font06]' },
			{name: L.fn07, className: 'fn07', openWith:'[font07]', closeWith:'[/font07]' },
			{name: L.fn08, className: 'fn08', openWith:'[font08]', closeWith:'[/font08]' },
			{name: L.fn09, className: 'fn09', openWith:'[font09]', closeWith:'[/font09]' },
			{name: L.fn10, className: 'fn10', openWith:'[font10]', closeWith:'[/font10]' },
			{name: L.fn11, className: 'fn11', openWith:'[font11]', closeWith:'[/font11]' },
			{name: L.fn12, className: 'fn12', openWith:'[font12]', closeWith:'[/font12]' },
			{name: L.fn13, className: 'fn13', openWith:'[font13]', closeWith:'[/font13]' },
			{name: L.fn14, className: 'fn14', openWith:'[font14]', closeWith:'[/font14]' },
			{name: L.fn15, className: 'fn15', openWith:'[font15]', closeWith:'[/font15]' },
			{name: L.fn16, className: 'fn16', openWith:'[font16]', closeWith:'[/font16]' },
			{name: L.fn17, className: 'fn17', openWith:'[font17]', closeWith:'[/font17]' },
			{name: L.fn18, className: 'fn18', openWith:'[font18]', closeWith:'[/font18]' }
		{name: L.font, className: 'mFonts',.....

Step 4:

This step is to increase the 'regular' fixed menu width... we need to increase the width a little to fit the font texts:

Find: plugins/markitup/skins/markitup/style.css

.markItUpHeader ul ul a {
    padding:5px 5px 5px 25px;
    background-position:2px 50%;


Hang on... we are almost there... Now we have the menu, we have implemented in the markitup editor.
So now we must add ways to use it..

Step 5:

This step adds the eventual font classes to you main CSS.
The main css is your main css files which you can find under the skins prob:  skins\<skinname>\<skinname.css>

.bbfont01	{font-family: Arial, Helvetica, sans-serif;}
.bbfont02	{font-family: 'Arial Black', Gadget, sans-serif;}
.bbfont03	{font-family: 'Bookman Old Style', serif;}
.bbfont04	{font-family: 'Comic Sans MS', cursive;}
.bbfont05	{font-family: Courier, monospace;}
.bbfont06	{font-family: 'Courier New', Courier, monospace;}
.bbfont07	{font-family: Garamond, serif;}
.bbfont08	{font-family: Georgia, serif;}
.bbfont09	{font-family: Impact, Charcoal, sans-serif;}
.bbfont10	{font-family: 'Lucida Console', Monaco, monospace;}
.bbfont11	{font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;}
.bbfont12	{font-family: 'MS Sans Serif', Geneva, sans-serif;}
.bbfont13	{font-family: 'MS Serif', 'New York', sans-serif;}
.bbfont14	{font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;}
.bbfont15	{font-family: Tahoma, Geneva, sans-serif;}
.bbfont16	{font-family: 'Times New Roman', Times, serif;}
.bbfont17	{font-family: 'Trebuchet MS', Helvetica, sans-serif;}
.bbfont18	{font-family: Verdana, Geneva, sans-serif;}


Step 7:

Adding the font icon for your menu
In step 1 i used images/font.png
You should use your own icon.. place that image in plugins\markitup\images
use a 16 x 16 icon


Step 8:

The final step... adding the BBCODE's
Note: We dont use a container because you might use a font tag inside an other font tag

Name: fonttype
type: PCRE
container: NO
structure: \[font(\d{2})\]
replacement: <span class="bbfont$1">

Name: fonttype
type: PCRE
container: NO
structure: \[/font\d{2}\]
replacement: </span>


Off course delete the fonts that you dont want from the list...

Have fun with the fonts,







No comments yet
Only registered users can post new comments