TinyMCE konfigurálás
Többször lehet szükség arra, hogy egy admin felületen, ne csupán beágyazzuk a wysiwyg szerkesztőt, hanem kicsit testre is szabjuk az elvárásoknak megfelelően. Fokozottan érvényes ez a TinyMCE esetén, amely advanced módban rengeteg, egy átlag felhasználónak túl sok, a simple módban viszont alig kínál pár lehetőséget. Erre jön rá, hogy nem túl előnyős helyen, a beviteli mező alatt középre rendezve jelenik meg alapértelmezetten. Tehát amikre legfőképp szükségünk van:
- Felülre rendezett eszköztár, lehetőleg balra igazítva.
- Egyéni eszköztár a leggyakrabban használt lehetőségekkel.
- Egyéni font méretek.
Persze több kisebb dolog is előjöhet, ezek orvoslását fogjuk megnézni az alábbiakban.
Elsőként nézzük meg, hogy is tudjuk magát a scriptet használni. Elsőként le kell töltenünk a Moxiecode letöltés oldaláról, majd kicsomagolni a kapott zip fájlt. A csomagból csak a tinymce\jscripts helyen lévő fájlok érdekesek nekünk.
Első lépésként ágyazzuk be oldalunkba a scriptet. Ezt a következő kóddal tehetjük meg:
1 2 3 4 5 6 7 | <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> tinyMCE.init({ mode : "textareas", theme : "advanced" }); </script> |
Ezekután jöjjenek a beállítások. Pozicionáljuk felülre és balra az eszköztárat.
1 2 | theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", |
Ha nem minden textarea elemre szeretnénk alkalmazni a szerkesztőt, akkor adjuk meg mely osztályokba sorolt elemekre tegye rá, illetve melyekre ne.
1 2 | editor_selector : "mceEditor", editor_deselector : "mceNoEditor", |
Beillesztéskor automatikusan tisztítsa meg a szövegeket a Word felesleges kódjaitól.
1 | paste_auto_cleanup_on_paste : true, |
Hozzuk létre az egyéni eszköztárainkat:
1 2 3 | theme_advanced_buttons1 : "fontsizeselect,separator,bold,italic,underline,separator,forecolor,backcolor,separator,justifyleft,justifycenter,justifyright, justifyfull,separator,outdent,indent,blockquote,separator,bullist,numlist", theme_advanced_buttons2 : "cut,copy,paste,pasteword,separator,table,separator,sub,sup,separator,charmap,separator,link,unlink,separator,undo,redo", theme_advanced_buttons3 : "", |
Hogy minden eszköztár gombunk megjelenjen és működjön töltsük be az ezekhez szükséges pluginokat.
1 | plugins : "table,paste", |
Alapértelmezetten 11px-es betűnagyságban jelennek meg a beviteli mezőbe gépelt szövegek, ezen segíthetünk, ha egy egyedi CSS-t alkalmazunk:
1 | content_css : "../_tiny_mce/themes/advanced/skins/default/mycontent.css", |
A CSS fájl tartalma:
1 2 3 4 5 6 7 | body, td, pre { font-size: 12px; } .fontsize1 { font-size: 14px; } |
Ne engedjük ékezetes karaktereinket entitásokra cserélni.
1 | entities : "", |
És a végén az egyéni fontméretek beállítása:
1 2 3 | convert_fonts_to_spans : true, theme_advanced_font_sizes : '14 pt=1,16 pt=2,18 pt=3', font_size_style_values : "14px,16px,18px", |
Magyaríthatjuk is a szkriptünket, ehhez az inicializáláshoz helyezzük el az alábbi kódot.
1 | language : "hu", |
És másoljuk be a magyarított fájlokat (a letöltés úgy megy, hogy bepipáljuk a magyar nyelvi fájl előtti rubrikát és lent a Download gombra bökünk) a megfelelő helyekre.
Szia!
Egy kis segítségre lenne szükségem!
A cél: TinyMCE használatával megírni a híreimet és azt egy php file-ba mentse.
Azt a PHP file-t szeretném a kezdőlapba include-olni.
Nem tudom, hol és hogy állítom be, hogy a híreket egy php-file-ba mentse!
Segíts kérlek
Köszi
Ahhoz a TinyMCE-nek nem sok koze van, hogy hogyan es hova mented az adataid. Mondjuk celszerubb lenne adatbazisba, mint fajlba menteni. De hol akadtal el?
Őszinte leszek!
Most kezdtem el tanulni a webszerkesztést… a HTML+CSS megy de a PHP még nem!
Tanulom szorgalmasan és előbb utóbb biztos nem fogok fárasztani senkit ilyen kérdésekkel, de sajna ezt meg kellene oldanom hamar! Nekem az adatbázisba mentés is frankó megoldás lenne… Csak nem tudom ez mennyire összetett és bonyolult…Hogy induljak neki?
Köszönöm a segítségedet
Egy komment keretét bőven meghaladóan bonyolult. Javaslom, hogy nézz körül a TinyMCE oldalán, illetve valami php-mysql tutorialt olvass el, esetleg többet is, utánna már magadtól is menni fog.
Egy olyan kérdésem lenne, hogy a az egyéni eszköztár gombjaihoz tartozó angol szavakat hol találom meg atinymce-hoz?
http://wiki.moxiecode.com/index.php/TinyMCE:Control_reference – nem magyar, de totozni lehet!
theme_advanced_buttons2 : “”,
theme_advanced_buttons3 : “”,
ha ide be van rakva még két készlet, akkor a kezelő felületből hogyan tudok váltani köztük?
közben megértettem.
ezek a buttons-ok sorok, vagyis egy-egy sor azt jelenti, hogy hány gomb kerül bele.
http://tinymce.moxiecode.com/examples/full.php – nem tudom, hogy ez-e a teljes lista, de itt sok minden bent van.
plugins : “table,paste”, – hova kell betenni? Mert szeretném az advanced image buttont szeretném betenni, de úgy tűnik, hogy enélkül nem engedi.
Oda, ahova ezt a részt teszsed. <script type="text/javascript" src="/tiny_mce/tiny_mce.js”>
tinyMCE.init({
mode : “textareas”,
theme : “advanced”
});
Ott is bármelyik “theme_advanced_buttons” sorba
Köszi a cikket! Írtam egy e-mail küldő scriptet, sablont az artister2-vel készítettem (html-css) Minden jónak tűnt Firefox és Chrome alatt rendben működik! Az IE-7 viszont az általad leírt beállításokkal nem jeleníti meg a Tiny_mce-t(a többi böngésző igen)! A fejlesztői oldalról leszedett beállításokkal az IE-7 is megjeleníti de összetörik a sablon! (Csak az IE-ben!) Mi lehet az ok?
A választ előre is köszi.
Sziasztok!
Én szeretném magyarítani a scriptet. Addig el is jutottam, hogy letöltöttem a hu.xml fájlt, a tinyMCE.init({-hez felvettem a language : “hu”-t, de hova másolom a hu.xml fájlt?
Próbálkoztam a tiny_mce\langs\ mappával a plugins mappákkal, de egyik esetben sem jöbb be semmi a textarea-hoz.
Előre is köszönöm.
Sziasztok!
Egy olyan problémába ütköztem, egy irodalmi weboldalon vagyok afféle mindenes programozó… és a felhasználóim reklamálnak, miszerint megváltozott a szövegszerkesztő(tinyMCE) eddig ugyanis a worben elkészített jól megformázott írásokat tényleg hűen felmásolták. beleértve a gondolatjelet a bekezdések első sorának behúzását stb.
Most viszont bajuk van vele. rájöttem, hogy a tinyMCE ctrl+c ctrl+v esetén simán kicseréli az entereket break tag-ekre ettől fogva az egész egy bekezdés lesz.
Hogyan tudnám rávenni a tiny-t, hogy ne csináljon semmit a beillesztendő szöveggel?