Dokumentation / Plugins / Tutorial: MarkitUp introducing fonts

Tutorial: MarkitUp introducing fonts

This page is not translated yet. Showing original version of page. You can sign up and help with translating.

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:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.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:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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..
 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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

CSS
1
2
3
4
5
6
7
8
.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>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.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

 

 

 

 

 

Noch keine Kommentare
Nur registrierte Benutzer können Kommentare schreiben