TinyMCE – FAQ
Zauważyłem, że moje wcześniejsze notki dotyczące instalacji i polonizacji TinyMCE jednak się przydały. Chciałbym dzisiaj napisać parę słów na temat najczęściej zadawanych pytań, które zadaliście w komentarzach oraz na Forum PHP.pl.
(pytania zbliżone do oryginałów)
- A na jakiej licencji jest ten edytor? Mozna go wykorzystywac w celach komercyjnych?
Oczywiście, że tak pod warunkiem, iż zachowujesz postanowienia LGPL. Więcej na stronie producenta.
- Co zrobic, by w obszarze objętym TinyMCE (w textarea) wykonywać operacje JavaScript, np. alert po naciśnięciu klawisza?
Na forum TinyMCE zostało już zadane podobne pytanie. Wszystko sprowadza się do dodania zdarzeń nie dla zwykłego <textarea/>, a do sekcji inicjującej edytor:
tinyMCE.init({
mode : ...,
...,
setup : function (ed) {
ed.onKeyPress.add(
function (ed, evt) {
alert("Editor-ID: "+ed.id+"\nEvent: "+evt);
// Do some great things here...
}
);
},
...
});Nazwy zdarzeń są identyczne jak w implementacjach JavaScript z tą różnicą, że zapisywane w składni „wielbłąda” (wielka litera co wyraz). Opis funkcji setup w wiki producenta.
-
Witam. Jak można zmusić ten edytor aby akceptował możliwość przekreślenia i podkreślania tekstu…
Do sekcji inicjującej dodaj własność extended_valid_elements i podaj w niej interesujące Cię tagi, np:
extended_valid_elements: "s[class|dir
Ale lepiej utworzyć swój styl w CSS.
- Mam pytanie jest to okno do komentowania… nie ma opcji aby zatwierdzić (dodać) to co się napisało…
O ile dobrze zrozumiałem pytanie, to chodzi o możliwość zapisania danych z edytora poprzez kliknięcie odpowiedniej opcji na pasku narzędzi. Wystarczy uaktywnić wtyczkę save i problem z głowy.
- Pytanie: nie mam zdefiniowanego id dla textarea w których ma pojawiać się tiny, czyli generealnie przypisywany jest do wszystkich możliwych. Czy istnieje możliwość wyłączenia po id niektórych textarea tak żeby tiny się tam nie wyświetlał?
Oczywiście. Dodaj do <textarea /> klasę mceNoEditor. W skrócie wygląda to tak:
- Czy da się zablokować część treści w edytorze która jest zaimportowana zablokować?
Jeden z przykładów użycia na stronie producenta prezentuje tą funkcjonalność. Wystarczy blokowanym elementom nadać odpowiednią klasę:
Treść edytowalna.
Treść zablokowana.
- Mam problem z formatowaniem kodu przez tinymce, a konkretnie o to,że przy kopiowaniu tekstu z worda kopiowane są również style to powoduje niemożność wyświetlenia strony w ie.
TinyMCE obsługuje możliwość wklejania sformatowanego w Wordzie tekstu. Cóż, czasem to irytuje, powoduje, że w formatowaniu panuje swoisty śmietnik. Przydałaby się opcja na wzór wklej specjalnie, zwykły tekst. Otóż istnieje taka możliwość. Trzeba skorzystać z wtyczki Paste. Jest ona dostępna w standardowej paczce, wystarczy ją tylko włączyć. Jak to zwykle bywa z rozszerzeniami do TinyMCE, wystarczy zmodyfikować funkcję inicjującą edytor:
tinyMCE.init({
theme : "advanced",
mode : "textareas",
plugins : "paste",
theme_advanced_buttons3_add : "pastetext,pasteword,selectall",
paste_auto_cleanup_on_paste : true,
paste_convert_middot_lists : false,
});Oczywiście, to jest tylko przykładowe użycie; powyższy kod należy dostosować do własnych potrzeb.
- Jak zmusić TinyMCE do pracy tylko z wybranym polem <textarea/>?
I edycja, jak wyżej. Zmieniamy wartość mode i dodajemy elements, za wiki:
tinyMCE.init({
...
mode : "exact",
elements : "elm1,elm2"
});W wartości elements podajemy nazwy pól tekstowych po przecinku. Nazwy, to wartości id w <textarea/>, np:
- Jak za pomocą JavaScript włączać/wyłączać edytor?
Aby dodać edytor dla pola edycyjnego:
tinyMCE.execCommand('mceAddControl', false, 'identyfikatorEdytora');
Aby go usunąć:
tinyMCE.execCommand('mceFocus', false, 'identyfikatorEdytora');
tinyMCE.execCommand('mceRemoveControl', false, 'identyfikatorEdytora'); - Jak konfigurować TinyMCE niezależnie dla wielu pól?
Takie rozwiązanie można zobaczyć w akcji na stronie producenta. W skrócie, polega ono na powieleniu komend inicjujących w zależności od potrzeb. Tworzymy przez to "grupy" edytora, które skrypt przypina w zależności od nadanego atrybutu class dla <textarea>. Przykładowo:
- Jak z poziomu TinyMCE wysłać i wstawić obrazek?
Można skorzystać z płatnej wtyczki MCImageManager. Jednak, gdyby ktoś chciał skorzystać z darmowego odpowiednika, może zainteresować się iManagerem.
- Jak załadować/wysłać zawartość edytora przy pomocy AJAX-a?
Dzięki rozbudowanemu API edytora, jest to wręcz bajeczne. Przykład zastosowania.
var ed = tinyMCE.get('content'); //pobieramy uchwyt do pola o id="content"
tresc = ed.getContent(); //pobranie treści z edytora
ed.setContent('ustaw treść edytora'); - Jak podpiąć TinyMCE do jakiegoś systemu forum, aby generował kod bbCode?
Wszystko jest opisane w dokumentacji producenta.
- Jak użyć własnego stylu dla treści w oknie edytora?
Wystarczy stworzyć osobny arkusz CSS i podpiąć go korzystając z własności content_css.
- Jak utworzyć własne formatowanie w liście rozwijanej styl?
Utwórz własny arkusz CSS (tak, jak w poradzie wyżej). Wszystkie selektory klas zawarte w arkuszu zostaną automatycznie dodane do listy.
.selektor1
{color: #000}.selektor2
{font-weight: bold;}
Co sprawi, że na liście będą do wyboru style o nazwach selektor1 i selektor2.
- Jak nakazać TinyMCE zapisywanie polskich znaków bez użycia encji?
Bywa to dość denerwujące, np. zamiast ó edytor zwraca ó. Jednak da się to wyłączyć. Wystarczy do funkcji inicjującej edytor dopisać:
entity_encoding : "raw"
i po problemie.
Mam nadzieję, że wyjaśniłem choć niektóre z wątpliwości z TinyMCE, IMHO, najlepszego edytora WYSIWYG dostępnego w Sieci.
W razie pytań, zostaw komentarz.
Coś się z zaznaczeniem na niebiesko stało.. Chyba, że tak ma być