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
Step1
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 { background-image:url(images/font.png); } .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;}
Step2:
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...
Add:
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 { display:block; padding-left:0px; text-indent:0; width:150px; 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,
EZ