Jak dodać nowy przycisk do edytora?

Łukasz | Tagi: ,

Jak ułatwić korzystanie z dodatkowego MyCode? Trzeba dodać nowy przycisk w edytorze.

Na samym początku przygotuj sobie grafikę bez tła o rozmiarze 16 x 16 pikseli, która będzie ikonką w edytorze. Przygotowaną ikonkę umieść w katalogu jscripts/editor_themes/default/images oraz jscripts/editor_themes/Office_2007/images. Jeżeli posiadasz jeszcze jakiś edytor, ikonkę umieść także w katalogu jscripts/editor_themes/Twój_edytor/images.

Za pomocą klienta FTP pobierz plik jscripts/editor.js, otwórz ten plik (wcześniej robiąc kopie bezpieczeństwa).

Dodatkowy przycisk z pierwszej linii

Aby dodatkowy przycisk wyświetlał się w pierwszej linii, obok przycisku wyboru koloru, znajdź kod

205
{type: 'button', name: 'color', insert: 'color', dropdown: true, color_select: true, image: 'color.gif', draw_option: this.drawColorOption, options: this.colors}

a następnie po tym kodzie dodaj kod nowego przycisku

 , {type: 'button', name: 'mycode', sprite: 'mycode', insert: 'mycode', title: 'nazwa MyCode'}

Gdzie jako mycode wstaw Twoje wyrażenie regularne. Przykładowo, jeżeli Twoje wyrażenie regularne jest takie \[flash\](.*?)\[/flash\], zamiast mycode wpisujesz flash. Jako nazwa MyCode wpisz jakąś nazwę np. dodaj flash. Jeżeli chcesz dodać kolejny przycisk, to po prostu dodaj kod nowego przycisku jeszcze raz i dostosuj kod do swojego MyCode.

Dodatkowy przycisk w dodatkowej linii

Jeżeli chcesz stworzyć nową linię z przyciskami pod „pogrubienie”, „kursywa”, itp. musisz w pliku editor.js znaleźć kod

236
237
238
	{type: 'button', name: 'align_justify', sprite: 'align_justify', insert: 'align', extra: 'justify', title: this.options.lang.title_justify}
			]
		});

a następnie po tym kodzie dodaj

 this.createToolbar('mytoolbar', {
    container: 'bottom',
    items: [
    {type: 'button', name: 'mycode', sprite: 'mycode', insert: 'mycode', title: 'nazwa MyCode'}
    ]
});

Kod dostosuj tak jak opisane powyżej.

Jeżeli chcesz dodać kolejny przycisk w nowej linii, po fragmencie wcześniej dodanego kodu

{type: 'button', name: 'mycode', sprite: 'mycode', insert: 'mycode', title: 'nazwa MyCode'}

dodaj kod

 , {type: 'button', name: 'mycode', sprite: 'mycode', insert: 'mycode', title: 'nazwa MyCode'}

Dodawanie ikonki nowego przycisku

Do plików CSS: jscripts/editor_themes/default/stylesheet.css oraz jscripts/editor_themes/Office_2007/stylesheet.css dodaj kod

 .messageEditor .toolbar_button .toolbar_sprite_mycode {
    background: url(images/grafika.gif) no-repeat;
}

Zamiast mycode wstaw swoje wyrażenie regularne (opisane powyżej). Natomiast zamiast grafika.gif podaj nazwę swojej ikonki. Jeżeli dodałeś kilka przycisków musisz dodać kilka razy kod CSS.
Jeżeli posiadasz jeszcze jakiś edytor, kod dodaj także do jscripts/editor_themes/Twój_edytor/stylesheet.css







1 Komentarz »
  1. wolf (16 czerwca 2014, 20:40 ) #

    Jest błąd w kodzie , {type: 'button', name: 'mycode', sprite: 'mycode', insert: 'mycode', title: 'nazwa MyCode'}
    przecienk powinien być na końcu kodu nie na początku
    {type: 'button', name: 'mycode', sprite: 'mycode', insert: 'mycode', title: 'nazwa MyCode'},

Dodaj komentarz

XHTML: Możesz użyć tagów: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Prosimy nie zgłaszać swoich problemów poprzez komentarze! W przypadku problemów zapraszamy nasze forum.

Serwis MyBBsite.pl wykorzystuje cookies. Korzystanie z witryny oznacza zgodę na ich zapis lub wykorzystanie, więcej informacji w polityce prywatności
Akceptuję politykę prywatność, zamknij informację