WYSIWYG szövegszerkesztő és a Drupal - TinyMCE

Sokan megjegyzik, hogy a Drupal egyik legnagyobb gyengesége, hogy nincs beleintegrált WYSIWYG szövegszerkesztő. Ez várhatóan a Drupal hetes verziójával meg fog változni, de addig is nézzük meg mit tehetünk. A sablon válasz részemről az szokott lenni, hogy használj BUEditort, de van amikor az általam oly nagyon kedvelt és használt szerkesztő kevés. Valami más kellene, valami olyasmi amit egy egyszerű felhasználó is könnyedén használ. Ebben a kis írásban megpróbálom összefoglalni mivel kellet megküzdenem a TinyMCE integrálása során.

Miért pont TinyMCE

Valamikor a múlt egy homályos bizonytalan pontján, megjelent az iframe DOM elem designMode tulajdonsága, melyet ON állapotba kapcsolva lehetővé vált, hogy a felhasználó kedve szerint szerkessze az iframe tartalmát. Megnyílt az út tehát a WYSIWYG editorok előtt. Egy ilyen editor a következőképpen működik: Fogja a textarea tartalmát és beletolja egy éppen létrehozott iframe elembe, majd ráül ennek az elemnek a különböző eseményeire, lehetővé téve a szerkesztést. Mivel mindegyik böngésző és azok verziói különböző eseményeket és manipulációs függvényeket implementálnak a DOM modellben, nagy fába vágja a fejszéjét aki egy ilyennek nekilát. Nem beszélve arról, hogy nem lehet úgy elkészíteni, hogy minden böngészőben mindig működjön. Következésképpen nem lehet olyan WYSIWYG editort készíteni ami webes környezetben használható lenne. Azonban egy szűk csoport számára, ahol megkövetelhetem bizonyos böngészők meglétét kivitelezhető a feladat még ha nem is egy leányálom.
Ebben a bizonytalan korban több, még fejlesztői állapotú szerkesztőt kipróbáltam. Volt olyan amitől a gép is lehalt, volt amelyiktől csak a böngésző omlott magára de volt egy amit viszonylag jól lehetett használni ez volt a TinyMCE. Ezért van az, hogy én általában azt használom. Nemrég Tolmi és Boobaa a figyelmemet az FCKEditor felé irányította és meggyőztek. Valamikor mindenképpen ki fogom próbálni, mivel nagyon ígéretesnek tűnik a programozói felülete.

Hogyan készült?

Magához a TinyMCE-hez létezik egy modul ami nagyszerű, de olyan sok mindent lehet benne beállítani, hogy egy kisebb pilótavizsga kell a használatához. Ráadásul a legtöbb beállítás nem is érthető anélkül, hogy a TinyMCE szerkesztőt igazán ismernénk. Vannak olyan beállítások amik nem elérhetőek és vannak olyanok, amiket a modul segítségképpen mindig hozzáad a rendszerünkhöz. Ezért aztán nekiálltam és írtam egy kis modult, amellyel minden beállítást a kezemben tartok. A modul viszonylag egyszerű. Semmi mást nem csinál, mint mindig betölti a tinymce.js fájt, ha egy űrlapban van többsoros szövegmező, és hozzáadja az általunk beállított paramétereket. Van benne tehát egy beállító felület, ahol ezeket a paramétereket állíthatjuk be. Itt elő is jött az első nehézség, ugyanis a beállító mezőre is rárakja magát a TinyMCE így lehetetlenné téve a beállítást. Ezért aztán mindig kell tartalmaznia a következő sort a beállításoknak:

  1. editor_deselector : "mceNoEditor", //please not remove this line

A második nehézség nem váratott magára sokat. A hatos Drupalban ugyanis a összefoglalót/bevezetőt könnyedén el tudjuk választani a szöveg többi részétől egy kis ügyes JavaScriptes programocska segítséggel. Igen ám, de nekünk már nem szöveges beviteli mezőnk van, hanem egy iframe-ünk. Tehát az elválasztó gomb megnyomásakor nekünk szimulálni kéne az egész folyamatot.

  1. A kurzornál szétválasztani a szöveget.
  2. Visszakapcsolni a textarea-t.
  3. Beindítani az alap folyamatot.
  4. A két szövegdobozba beletenni a szöveget
  5. Bekapcsolni rájuk a szövegszerkesztőt.

Természetesen ez a folyamat visszafordítható. Létezik egy másik gomb, amivel össze tudjuk vonni az összefoglalót/bevezetőt és a szövegtörzset. Ekkor hasonlóképpen kéne eljárnunk.
Mivel egy kis praktikus modul létrehozása volt a célom, ezért talán érthető, hogy erről letettem és inkább a könnyebbik utat választottam és ezt a lehetőséget kikapcsoltam.
Ekkor már egy használható valamit kaptam, ami egyetlen egy gyermekbetegséggel rendelkezik. A Drupalban ugyanis a szövegdobozokat át lehet méretezni de itt ugye nincs szövegdobozunk, itt csak ifreame-ünk van. Firefoxban ott van ugyan az átméretező csúszka de használhatatlan, Operában pedig egy kis légypiszok lesz a bal felső sarokban. Ezzel sajnos együtt kel élnünk egyelőre.

Hogyan állítsuk be?

Töltsük le a legfrissebb TinyMCE szerkesztőt és másoljuk be a modul könyvtárába. Ekkor a könyvtárban lesz egy tinymce alkönyvtára amibe a szükséges fájlok vannak. Navigáljunk a Webhely beállítások / TinyMCE Light oldalra és állítsuk be kedvünk szerint a szerkesztőt.
Különböző lehetőségeink vannak:
Ügyeljünk arra, hogy minden sor végére kell a vessző kivéve az utolsó sort, mert oda nem kell!
Minden szövegdoboz legyen WYSIWYG

  1. editor_deselector : "mceNoEditor", //please not remove this line
  2. mode : "textareas"

Csak bizonyos id-vel rendelkező szövegdobozok

  1. editor_deselector : "mceNoEditor", //please not remove this line
  2. mode : "exact",
  3. elements: "edit-body,edit-tinymce-light-example"

Kedvenc gombsorom. (az alapértelmezett ugyanis alul van és nem a megfelelő elemeket tartalmazza)

  1. theme : "advanced",
  2. theme_advanced_toolbar_location : "top",
  3. theme_advanced_toolbar_align : "left",
  4. theme_advanced_buttons1 : "cleanup,separator,bold,italic,separator,link,unlink,separator,image,separator,bullist,numlist,separator,undo,redo,separator,pasteword,removeformat",
  5. theme_advanced_buttons2 : "",
  6. theme_advanced_buttons3 : "",

A tisztító ezköznek megmondjuk mit dobáljon ki a szövegből. (Wordből másolás után)
Ennek szinkronban kell lennie a HTML szűrővel. A sortörés átalakítót kapcsoljuk ki.

  1. valid_elements : "a[href],strong/b,em/i,ol,ul,li,img[src],p,br",

Ne cserélgesse le az ékezetes karaktereket mindenféle html entitásokra.

  1. entities : "",

Integráljuk az IMCE modult.

  1. file_browser_callback : function (fid, url, type, win) {win.open(Drupal.settings.basePath + '?q=imce&app=TinyMCE|url@'+ fid, '', 'width=760, height=560, resizable=1')},

Állítsuk be a sminkünk css-ét

  1. content_css : "/themes/garland/style.css"

Ha a Garland sminket használjuk vagy olyan sminket, ahol a body elemnek egy szép kép vagy színes háttér van megadva akkor vegyük fel a következő szabályt a css-be:

  1. <style>
  2. body.mceContentBody {
  3. background: #FFF;
  4. }
  5. </style>

Bár maga a modul rengeteg gyermekbetegséggel rendelkezik, nem gondolom úgy, hogy kevésbé lenne használható, mint az eredeti modul. Fejleszteni van még mit rajta. Többek között nincsenek jogosultságok, tehát bárki hozzáfér a szerkesztőhöz ami esetünkben nem probléma, hisz egy olyan brossúra honlap részére készült, melyben nem várnak semmilyen felhasználói reakciót.

CsatolmányMéret
Package icon tinymce_light.zip9.79 KB

Hozzászólások

Told be d.o CVS-be, hátha akkor talán lesz "valaki", aki például az említett jogosultságkezelést belehakkolja.

Lassan járj tovább érsz.
Éppen most segít Tolmi, hogy hogyan is kell ezt, mert bár le van írva, de a sok leírástól nem tudok kérdezni. Szóval egy icipici türelmet kérek még.

pp

Na igen, ez a CVS... bármit be akarok tolni, elő kell szedni az ősi poros tekercseket, izé, PDF-eket - valahogy a mai SCM-ek egyszerűen használhatóbbak/könnyebben tanulhatóak, mint a CVS. :S Ergo a fejlesztés helyi darcs/git repoban folyik, és csak a kiadás kerül be d.o CVS-be. Ez van.

Tinytinymce modult nézted?

http://drupal.org/project/tinytinymce

Szerintem sokkal jobb irányba indultak el mint a "nagy testvér" tinymce modullal, gyakorlatilag belemásolod a tinymce config javascriptet és működik, IMCE integrációval ami azért érdekes.

Még egy opció amit érdemes bekapcsolni:

paste_auto_cleanup_on_paste : true

Ez automatikusan kiszedi a szöszmöszt ha valaki Wordből másol be.

nézem!

(amint látod én is megoldottam az IMCE integrációt, ami nem egy nagy vasziszpúder ;)

pp

Zseniális ez a cucc. Bár már régóta tudok a létezéséhez, csak most volt alkalmam kipróbálni. Remek, hogy nem függ a szerkesztő verziójától :).

Egy készrevétel (kérdés akart lenni, de közben megtaláltam a megoldást :). A theme_advanced_buttons1 sorban szerepel a pasteword gomb, de az csak akkor működik, ha a configba szerepel az alábbi sor is (ha utolsó sor, akkor nem kell a végére vessző, mint ahogy az a leírásban is szerepel):

plugins : "paste",

Üdv, Pali