Ckeditoral készített oldal

Szia!

A probléma alapja az, hogy a CKEditor alapvetően iframe-et használ az oldalon belül, ami lényegében egy különálló oldal egy másikba beágyazva, és ehhez a különálló oldalhoz nem ugyanazokat a stylesheeteket (CSS-fájlokat) használja fel a CKEditor alapértelmezésben, mint amiket azon az oldalon használsz, amibe be van ágyazva a szerkesztőfelület. Ebből következően tehát a szerkesztett szöveg kicsit másképp fog kinézni, mint ahogyan a node ténylegesen megjelenik. Ezért is lesz jó az új inline CKEditor a Drupal 8 core-ban, mert annál ez a probléma nem fog előfordulni.

Én erre kerülő megoldást alkalmaztam, szintén a CKEditort felhasználva, ami nálam be is vált: a megfelelő CKEditor-profil(ok)nál be kell állítani, hogy egy saját stylesheetet használjon fel; ebben a stylesheetben pedig @import segítségével majd importáljuk a szükséges stylesheeteket.
Most leírom részletesebben:

1. Például vegyük azt, hogy az "Advanced" profilt szeretnéd módosítani, azt szeretnéd, hogy annál legyen beszúrva a saját stílusod.
   elnavigálsz ide:
   admin/config/content/ckeditor/edit/Advanced
2. ezután ki kell nyitni az alapból összecsukott CSS fieldsetet
3. az
   Editor CSS
   mezőnél kiválasztani ezt:
   Define CSS
4. ezután a CSS file path mezőnél meg kell adni egy olyan útvonalat, ahol a saját stylesheeted lesz (erről a következő pontban mindjárt), amiben majd importálod a megfelelő stílusfájlokat.
   Ez az aktuális sminked CSS-könyvtára legyen! (Általában simán css, bár egy-két sminknél sajnos a főkönyvtárba vannak behányva a fájlok.) Oda fogjuk berakni ezt a még létrehozandó fájlt.

   Ilyen legyen:
   %hsites/all/themes/SAJÁTSMINKEDNEVE/css/all-in-one-import.css

   SAJÁTSMINKEDNEVE értelemszerűen behelyettesítendő.

   Itt a %h az a hostnévhez tartozó placeholder (lásd a súgót: Available placeholders: %h – host name (/), %t – path to theme (/themes/seven/).). Szándékosan van "egyben" a sites-szal!! (%hsites).

   (Azért nem a %t-t használom fel, mert ha az admin-smink jelenik meg a szerkesztéshez, én az iframe-ben akkor is azt a stílust szeretném látni, ami a végleges megjelenésnél lesz látható, tehát az ahhoz a sminkhez tartozó könyvtárba pakolom a fájlt.)

5. Most nyisd meg a kedvenc szövegszerkesztődet (például Notepad++, vagy akármi egyszerű is megteszi).
   Létrehozzuk a fájlt, amiben importálva vannak a stylesheetek. Ehhez meg kellene nézned, hogy amikor megnyitod az oldaladat, akkor milyen CSS-fájlok vannak include-olva a sminkből, csak egy példa, ha megnézed az oldalad forráskódját:

   @import url("http://example.hu/sites/all/themes/SAJÁTSMINKEDNEVE/css/pages.css?mfsfk5");
   (aggregált CSS-nél nyilván ez más lesz, <link> taggel include-olva)

   A fájl tartalma pedig valami ilyesmi lesz (én Zen alsminket használok, az arra jellemző stílusfájlok elérési útjai szerepelnek itt):

   /* This is used for CKEditor */
   @import url("./normalize.css");
   @import url("./layouts/fixed-width.css");
   @import url("./tabs.css");
   @import url("./pages.css");
   @import url("./blocks.css");
   @import url("./navigation.css");
   @import url("./views-styles.css");
   @import url("./nodes.css");
   @import url("./comments.css");
   @import url("./forms.css");
   @import url("./fields.css");
   @import url("./print.css");
   /* az alabbi nem a Zenhez tartozik, valtoztasd meg a sajatodra */
   @import url("./SAJATSTILUSFAJL.css");
   /* egy resze a pages.css-ben, hogy egyezo hatteruk legyen, mint a #main-nek! */
   body.cke_show_borders {
     background-image: none;
   }
    
   body.cke_ltr, body.cke_panel_frame, body.cke_browser_webkit {
     background-color: white;
     background-image: none;
   }

   Az elérési utakat (pl. SAJATSTILUSFAJL.css itt azért szerepel, mert az nem a Zen alsmink egyik alapértelmezett fontos stylesheetje) és az utóbbi pár sort is változtasd meg úgy, ahogy nálad vannak a CSS-fájlok. Ahogy itt látható, mindig az adott könyvtárhoz képest relatív útvonalakat adok meg.

6. Mentsd el a fájlt all-in-one-import.css néven.

Remélem sikerül, ha valami nem érthető, nyugodtan kérdezz rá.