Dodawanie nowych szablonów do FckEditor part 2

Zasadniczo cała konfiguracja dodatkowych css-ów widocznych na liście rozwijanej wykonujemy na pliku javascript: default.js

Jak owy plik może wyglądać możemy podejrzeć w pliku z samplami znajdującym się w głównym katalogu fckeditor „_source”

Poniżej przykładowa konfiguracja defaultowa:

{code type=javascript}

/*
Copyright (c) 2003-2010, CKSource – Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.stylesSet.add( ‚default’,
[
/* Block Styles */

// These styles are already available in the „Format” combo, so they are
// not needed here by default. You may enable them to avoid placing the
// „Format” combo in the toolbar, maintaining the same features.
/*
{ name : ‚Paragraph’        , element : ‚p’ },
{ name : ‚Heading 1’        , element : ‚h1’ },
{ name : ‚Heading 2’        , element : ‚h2’ },
{ name : ‚Heading 3’        , element : ‚h3’ },
{ name : ‚Heading 4’        , element : ‚h4’ },
{ name : ‚Heading 5’        , element : ‚h5’ },
{ name : ‚Heading 6’        , element : ‚h6’ },
{ name : ‚Preformatted Text’, element : ‚pre’ },
{ name : ‚Address’            , element : ‚address’ },
*/

{ name : ‚Blue Title’        , element : ‚h3’, styles : { ‚color’ : ‚Blue’ } },
{ name : ‚Red Title’        , element : ‚h3’, styles : { ‚color’ : ‚Red’ } },

/* Inline Styles */

// These are core styles available as toolbar buttons. You may opt enabling
// some of them in the Styles combo, removing them from the toolbar.
/*
{ name : ‚Strong’            , element : ‚strong’, overrides : ‚b’ },
{ name : ‚Emphasis’            , element : ’em’    , overrides : ‚i’ },
{ name : ‚Underline’        , element : ‚u’ },
{ name : ‚Strikethrough’    , element : ‚strike’ },
{ name : ‚Subscript’        , element : ‚sub’ },
{ name : ‚Superscript’        , element : ‚sup’ },
*/

{ name : ‚Marker: Yellow’    , element : ‚span’, styles : { ‚background-color’ : ‚Yellow’ } },
{ name : ‚Marker: Green’    , element : ‚span’, styles : { ‚background-color’ : ‚Lime’ } },

{ name : ‚Big’                , element : ‚big’ },
{ name : ‚Small’            , element : ‚small’ },
{ name : ‚Typewriter’        , element : ‚tt’ },

{ name : ‚Computer Code’    , element : ‚code’ },
{ name : ‚Keyboard Phrase’    , element : ‚kbd’ },
{ name : ‚Sample Text’        , element : ‚samp’ },
{ name : ‚Variable’            , element : ‚var’ },

{ name : ‚Deleted Text’        , element : ‚del’ },
{ name : ‚Inserted Text’    , element : ‚ins’ },

{ name : ‚Cited Work’        , element : ‚cite’ },
{ name : ‚Inline Quotation’    , element : ‚q’ },

{ name : ‚Language: RTL’    , element : ‚span’, attributes : { ‚dir’ : ‚rtl’ } },
{ name : ‚Language: LTR’    , element : ‚span’, attributes : { ‚dir’ : ‚ltr’ } },

/* Object Styles */

{
name : ‚Image on Left’,
element : ‚img’,
attributes :
{
‚style’ : ‚padding: 5px; margin-right: 5px’,
‚border’ : ‚2’,
‚align’ : ‚left’
}
},

{
name : ‚Image on Right’,
element : ‚img’,
attributes :
{
‚style’ : ‚padding: 5px; margin-left: 5px’,
‚border’ : ‚2’,
‚align’ : ‚right’
}
},

{ name : ‚Borderless Table’, element : ‚table’, styles: { ‚border-style’: ‚hidden’, ‚background-color’ : ‚#E6E6FA’ } },
{ name : ‚Square Bulleted List’, element : ‚ul’, styles : { ‚list-style-type’ : ‚square’ } }
]);

{/code}

Jak widać struktura wygląda bardzo prosto.

Podstawowa konfiguracja wygląda tak:

{code type=javascript}

CKEDITOR.stylesSet.add(‚default’,[{
/*tutaj nasze style*/
}]);

{/code}

Na własne potrzeby stworzyłem podstawowe definicje na których szczególnie zależało klientowi i były to dwie deklaracje kolorów dla nagłówków „h3”, „h4” oraz zwykły paragraf „p”.
definicje te na wszelki wypadek zawarłem również w podstawowej deklaracji css strony, tak na wszelki wypadek.

Dodatkowo zadeklarowałem dwa kolory oraz boldowanie, kalitaliki i styl „italic”.
Jak to wygląda zobaczyć można poniżej:

{code type=javascript}

/*czerwony nagłowej h3*/

{

name:’Czerwony naglowek h3′,
element: ‚h3’,
styles:{
‚color’:’#A40837′,
‚font-size’:’25px’,
‚line-height’:’120%’,
‚margin-bottom’:’18px’,
‚margin-top’:’23px’
}
},

/*niebieski nagłowej h4*/

{
name:’Niebieski naglowek h4′,
element: ‚h4’,
styles:{
‚color’:’#015E7D’,
‚font-size’:’18px’,
‚font-weight’:’bold’
}
},

/*Podstawowa deklaracja paragrafu p*/

{
name:’Zwykły akapit’,
element:’p’,
styles:{
‚color’:’#666666′,
‚font-size’:’14px’,
‚margin-bottom’:’8px’
}
},

/*deklaracja koloru zielonego*/

{
name:’Kolor zielony’,
element: ‚span’,
styles: {
‚color’:’#666666′
}
},

/*deklaracja koloru czerwonego*/

{
name:’Kolor czerwony’,
element: ‚span’,
styles: {
‚color’:’#A40837′
}
},

/*tekst boldowany*/

{
name:’Boldowanie’,
element: ‚span’,
styles: {
‚font-weight’:’bold’
}
},

/*Italic*/

{
name:’Italic’,
element: ‚span’,
styles: {
‚font-style’:’italic’
}
},

/*Kapitaliki*/

{
name:’Kapitalik’,
element: ‚span’,
styles: {
‚text-transform’:’uppercase’
}
}
]);

{/code}

Deklaracja danego pojedynczego stylu wygląda więc tak:

{code type=javasript}

{
name:’Kapitalik’,
element: ‚span’,
styles: {
‚text-transform’:’uppercase’
}
}

{/code}

Gdzie:

  • name -> to nazwa jaka wyświetli się nam na liście
  • element -> typ elementu jaki zostanie przypisany liniowy lub blokowy. W przypadku zadeklarowania h1, h2, p… automatycznie przypisany zostanie do grupy elementów blokowych, w przypadku np. span automatycznie trafi na listę elementów liniowych
  • styles -> deklaracja wyglądu elementów  wykonana przez podanie deklaracji css.
    Należy pamiętać aby deklaracje zawierać w pojedynczych apostrofach, inaczej styl nie trafi na listę lub nawet pojawi się błąd blokujący cały edytor :)

Zastanawiam się jeszcze czy istnieje możliwość deklaracji bardziej skomplikowanych elementów typu:

{code type:css}

div.nazwaklasy

{/code}

lub jeszcze bardziej skomplikowanych typu:

{code type:css}

#jakis_identyfikator .nazwaklasy{}

{/code}

Pożyjemy zobaczymy… Zapewne klient będzie chciał mieć możliwość umieszczenia  niektórych elementów na stronie za pomocą pozycjonowania relatywnego i bezwzględnego… ciekawe jak takie deklaracje będą wyglądać…

Leave a Reply