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