markItUp!

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' }
   ]
}
Określone są po kolei "przyciski" edytora z ich nazwą, a także działaniem jakie ma zostać wykonane. "previewParserPath" to ścieżka do skryptu podglądu. Podany skrypt będzie wywoływany Ajaxem, który w zmiennej POST o nazwie "data" prześle surowe dane, które należy przerobić na wynikowy kod HTML (np. zamienić znaczniki BBCode na odpowiadający kod HTML). Plik style.css określa wygląd każdego z przycisków:
.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);
}
Przyciski z konfiguracji numerowane są od "1" i dla każdego podawana jest ikonka.
RkBlog

Komponenty i dodatki, 7 September 2008

Comment article
Comment article RkBlog main page Search RSS Contact