markItUp!
7 September 2008
Comments
markItUp! to edytor textarea dla różnych systemów znaczników (BBCode, textile, markdown, XHTML, wiki) napisany w JavaScript z wykorzystaniem biblioteki jQuery. Dodaje on do pola textarea pasek narzędziowy, oraz kilka innych poręcznych dodatków. Działające przykłady znajdziemy na stronie:
Obsługiwane przeglądarki to IE7, Safari 3.1, Firefox 2, Firefox 3. IE6 i Opera 9+.
Instalacja
- Dołączamy pliki jQuery i markitup:
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="markitup/jquery.markitup.js"></script>
- Dołączamy plik JS z ustawieniami, np:
<script type="text/javascript" src="markitup/sets/default/set.js"></script>
- Dołączamy pliki CSS danego edytora i stylu:
<link rel="stylesheet" type="text/css" href="markitup/skins/markitup/style.css" /> <link rel="stylesheet" type="text/css" href="markitup/sets/default/style.css" />
- I podłączamy edytor do określonego po ID taga textarea:
<script type="text/javascript" > $(document).ready(function() { $("#markItUp").markItUp(mySettings); }); </script> ... <textarea id="markItUp"></textarea>
Konfiguracja i dopasowanie
markItUp! składa się z dwóch katalogów - sets i skins. Ten drugi odpowiada za wygląd całego edytora, natomiast sets zawiera podkatalogi dla każdego systemu znaczników. W każdym z nich znajdziemy plik set.js z konfiguracją np:myBbcodeSettings = {
nameSpace: "bbcode", // Useful to prevent multi-instances CSS conflict
previewParserPath: "/forum/bbcode/",
markupSet: [
{name:'Bold', key:'B', openWith:'[b]', closeWith:'[/b]'},
{name:'Italic', key:'I', openWith:'[i]', closeWith:'[/i]'},
{name:'Underline', key:'U', openWith:'[u]', closeWith:'[/u]'},
{separator:'---------------' },
{name:'Picture', key:'P', replaceWith:'[img][![Url]!][/img]'},
{name:'Link', key:'L', openWith:'[url=[![Url]!]]', closeWith:'[/url]', placeHolder:'Your text to link here...'},
{separator:'---------------' },
{name:'Quotes', openWith:'[quote]', closeWith:'[/quote]'},
{name:'Code', openWith:'[code]', closeWith:'[/code]'},
{name:'Python', openWith:'[python]', closeWith:'[/python]'},
{separator:'---------------' },
{name:'Clean', className:"clean", replaceWith:function(h) { return h.selection.replace(/\[(.*?)\]/g, "") } },
{name:'Preview', className:"preview", call:'preview' }
]
}
.bbcode .markItUpButton1 a {
background-image:url(images/bold.png);
}
.bbcode .markItUpButton2 a {
background-image:url(images/italic.png);
}
.bbcode .markItUpButton3 a {
background-image:url(images/underline.png);
}
.bbcode .markItUpButton4 a {
background-image:url(images/picture.png);
}
.bbcode .markItUpButton5 a {
background-image:url(images/link.png);
}
.bbcode .markItUpButton6 a {
background-image:url(images/quotes.png);
}
.bbcode .markItUpButton7 a {
background-image:url(images/code.png);
}
.bbcode .markItUpButton8 a {
background-image:url(images/code.png);
}
.bbcode .markItUpButton9 a {
background-image:url(images/clean.png);
}
.bbcode .preview a {
background-image:url(images/preview.png);
}
RkBlog
Comment article