RkBlog

Hardware, programming and astronomy tutorials and reviews.

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

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, Piotr Maliński

Comment article