A Drupal 7 a hatodik verzióhoz hasonlóan nem rendelkezik beépített vizuális szerkesztővel.

Felhasználói útmutató: a ckeditor szerkesztő telepítése és konfigurálása Drupal 7-ben. Képek betöltése az Elfinderből.

A Drupal 7-ben, akárcsak a hatodik verzióban, telepítenünk kell egy szerkesztőt. Természetesen nem kell ezt megtennie, és csak a kódot látva szövegeket írnia. De szeretem a vizuális szerkesztőket. Hadd emlékeztesselek arra, hogy a Drupal 6 telepítését és konfigurációját tanulmányoztuk a 2. leckében:

Ma megnézzük a cms és a szerkesztő működő kombinációját.
drupal 7.17
CKEditor - WYSIWYG HTML szerkesztő 7.x-1.11
CKEditor 4.0
elFinder fájl kezelő 7.x-0.7
forgatókönyv elFinder - elfinder-1.2

A Drupal 7-es verziója esetén a teljes telepítési és konfigurációs folyamat sokkal egyszerűbb. Nem kell semmit szerkesztenie a fájlokban, minden művelet elérhető az adminisztrációs panelről (csak bejelöljük a négyzeteket). Létező aktuális verziók a modulok nagyban megkönnyítik az életünket.

A WYSIWYG szerkesztő CKEditor telepítése a CMS Drupal 7.17 legújabb verziójára

A CKEditor rugalmas és kényelmes szerkesztő. A kezelőfelülete a Word-re hasonlít.
Először a szerkesztő szkriptet telepítjük, majd magát a modult. Ez a modul fogja csatlakoztatni a webhelyhez.
Jegyzet.
A konkrét verziókat az íráskor jelezem.

1. Töltse le a modult ]]> https://drupal.org/project/ckeditor ]]>
Csomagolja ki az archívumot egy mappába site/all/modules. Az egész út így néz ki: site/all/modules/ckeditor

2. Töltse le a szerkesztőt CKEditor 4.0]]> https://ckeditor.com/download ]]>
A szerkesztőfájlokhoz létre kell hoznia egy könyvtárak mappát site/all/
Az archívum kicsomagolásának elérési útja a következő lesz: site/all/libraries/ckeditor

A modulok oldalon engedélyezzük, majd konfiguráljuk.
Lépjen a "Konfiguráció - CKEditor - CKEditor globális profil - Szerkesztés" elemre. Itt ellenőriznie kell a bejegyzést a „CKEditor elérési útja” mezőben - annak lennie kell %l/ckeditor. Ez a bejegyzés azt mutatja, hogy a szerkesztő a mappában található könyvtárak.

Minden. Telepítetted a CKEditor programot, és működnie kell. Az ellenőrzéshez próbálja meg megnyitni az oldalt egy új anyag létrehozásához. Most egy nagy beviteli mező helyett a szokásos vizuális szerkesztőt fogja látni.

Ha a szerkesztő nem látható:
Ellenőrizze, hogy a kiválasztott modul-kiadások megfelelnek-e a Drupal verziójának. Próbáljon meg másik kiadásra váltani.

CKEditor szerkesztő profilok beállítása

1 lépés. A Speciális profil beállítása a CKEditor szerkesztőben.
Haladó (haladó, képek betöltésével stb.)
Nyissa meg a „Kezelés > konfiguráció > ckeditor - admin/config/content/ckeditor” menüpontot
Állítsuk be a Speciális profilt, kattintsunk a Speciális profil melletti „módosítás” linkre.
A szerkesztő megjelenése:
Válasszon egy színt.

Húzza át a kívánt gombokat.

Válassza ki az orosz nyelvet.

Fájlböngésző beállításai
Fájlkezelőt választunk kedvünk szerint, lent a szövegben egy Drupal 7 – Elfinder fájlkezelő telepítése és konfigurálása található.

2. lépés. A teljes profil beállítása a ckeditor szerkesztőben
Lépjen a "Kezelés - konfiguráció - ckeditor" elemre - admin/config/content/ckeditor
Hagyja a beállításokat alapértelmezettként, és válassza az orosz lehetőséget.

A legegyszerűbb lehetőség a Full (teljes) és az Advanced (extended) használata – a regisztráltaknál, a te változataidnál is. Létrehozása névtelen felhasználók Sima profil, ahol automata jelölés módosítsd a html-t szöveget egyszerű formátumban.

Egy kicsit a Drupal 7 értékeléséből, egy ilyen mini pozitív értékelés.
Alapértelmezés szerint a hétben van egy mező a képek feltöltésére. Nagyon hasznos funkció. Minden anyaghoz hozzárendelhető egy kép – egyfajta logó. A közleményben ennek a képnek a mérete automatikusan lecsökken.

Milyen problémákkal találkozik a szerkesztővel való munka során?A CKeditor nem jeleníti meg az összes gombot

Ehhez ellenőrizze, hogy melyik verziót töltötte le a https://ckeditor.com/download oldalon

  • Az alapcsomagban kevés gomb található.
  • Standard csomag – több is van belőlük.
  • A teljes készlet a teljes csomagban található – töltse le, ha a legtöbbet szeretné kihozni belőle.
Az Elfinder fájlkezelő telepítése és konfigurálása Drupal 7 rendszerhez

A szerkesztő és a fájlkezelő kombinációja még élvezetesebbé teszi a munkáját. Bárhol beszúrhat képet a szerverről vagy a számítógépéről. Rendelje hozzá a szükséges attribútumokat és egy alternatív leírást. Sajnos azt is telepíteni kell.
A CKEditor fájlkezelő nem csak képeket, hanem egyéb fájlokat is letölt.
A szerkesztőhöz hasonlóan le kell töltenie a modult és a szkriptet.

  • Töltse le a modult ]]> https://drupal.org/project/elfinder ]]>
  • Csomagolja ki az archívumot, és helyezze el a fájlokat a site/all/modules/elfinder mappába

  • Szkript letöltése ]]> ]]>
  • Tól től legújabb verziói feljött elfinder-1.2.
    Ezután csomagolja ki az archívumot, és helyezze el a fájlokat a site/all/libraries/elfinder mappába
    Van itt egy kis funkció, a mappát elfindernek kell nevezni.

  • Beállítása. Erre megyünk admin/config/elfinder– „konfiguráció – modulok – elFinder – konfigurálás.”
  • A „Gyökérkönyvtárban” meghagyjuk a „Rendszer alapbeállítások használata” lehetőséget – ez a Drupal alapértelmezett beállítása.

    Alapértelmezett beállítások admin/config/media/file-system:

    A „Tartalom” oldalon – admin/tartalom – látni fogja Új lap"Fájlok". Most csak kattintson rá, és megjelenik a fájlkezelő felület.

    És az utolsó lépés a szerkesztő kombinálása fájl kezelő egyetlen funkcionális eszközbe.
    Fentebb már leírtam a szerkesztői profilok beállítását.

    Ismétlem:
    Válassza ki Fájlböngésző típusa - elFinder. Ha szükséges, itt módosíthatja a fájlok letöltéséhez szükséges mappát is.

    Most mindennek működnie kell, de egyszerűen nem értem, hogy ez miért nincs a Drupal magban? Ehelyett számos szerkesztő lehetőség áll rendelkezésre, amelyek minden ízlésnek megfelelnek. Ami túl jó. ;)

    Új működő kapcsolat

    drupal 7.21
    CKEditor – WYSIWYG HTML szerkesztő 7.x 1.13
    CKEditor - ckeditor_4.1_standard
    elFinder fájlkezelő 7.x-0.8
    elFinder szkript - elfinder-1.2

    Hiba jelenik meg, és minden szerkesztéskor új üregek () kerülnek hozzáadásra.

    Kiderült, hogy a hiba egy Drupal teaser beillesztésekor jelenik meg. Ha a cikk nem választja el a bejelentést, akkor nincs hiba.

    Ennek az az oka, hogy alapértelmezés szerint a bejelentés mérete már konfigurálva van az anyagtípusban. Ez a bejelentések szétválasztásának kettős használatát eredményezi: kézi és automatikus.

    A hirdetésmegjelenítés beállításának módja:

    Kezdőlap » Adminisztráció » Struktúra » Tartalomtípusok » Cikk » Megjelenítés kezelése

    Tanács. Beállításkor kell kinézet vizuális szerkesztőben távolítsa el a teaser-Drupal gombot mindkét profilból.

    Cikkek a drupal tanulásához:

    Általános fogalmak kezdőknek.

    Hogyan lehet oroszosítani a Drupalt és moduljait.

    Válogatás blog modulokból.

    Gyors útmutató.

    Webhelyemen a BUEditort használtam - egy egyszerű, kényelmes szerkesztő, de nem túl kényelmes a felhasználók számára. Gyakran gondolkoztam a CKEditor telepítésén, de valami szörnyetegnek tűnt számomra, de a valóságban minden nem volt olyan ijesztő.

    Olvassa el a modul telepítését.

    Miután csatlakozott a modulon keresztül, az admin/config/content/ckeditor/edit/profile_assignment oldalon a lapon A SZERKESZTŐ MEGJELENÉSE, Fejezetben Beépülő modulok Megjelenik egy aktiválási jelölőnégyzet. Bekapcsolás, mentés, ellenőrzés.

    3. Hivatkozások beszúrása. A dobozon kívül a linkbeszúró párbeszédpanel egy csomó felesleges és tisztázatlan dolgot tartalmaz. Cseréljük a Simple link pluginnal. A telepítés módját lásd a 2. lépésben. Csatlakozás (lásd az 1. pontot):

    Config.extraPlugins = "SimpleLink";

    Megjelenik egy új plugin ikon (gomb) is.

    4. Képek beszúrása. Itt minden ugyanaz, mint a hivatkozásoknál; telepítheti a Simple Image beépülő modult a képek hivatkozásokon keresztüli beszúrásához.

    Config.extraPlugins = "SimpleImage";

    Vagy töltsön fel képeket a One Click Upload modul segítségével. . Olvass tovább. Én a második módszer mellett döntöttem, bár mindkettőt használtam a BUEditorban.

    Az egyetlen dolog, amit hozzá szeretnék tenni, az az, hogy az Enhanced Image beépülő modulhoz további két Widget és Lineutils bővítmény szükséges.

    Nem értettem, miért nem indul el a plugin, amíg meg nem néztem a naplót

    5. Megjelenés. Alapértelmezés szerint a Moono skint használják, de szerettem volna a megjelenést a BUEditor megjelenésébe hozni.

    így nézett ki a BUEditor

    7. Helyőrző. Helyőrző hozzáadásához telepítse a beépülő modult (lásd a 2. pontot) Configuration Helper. Csatlakozás (lásd az 1. pontot):

    Config.extraPlugins = "confighelper"; config.placeholder = "A mi szövegünk"; // текст нашего placeholder !}

    8. Smiley-k. Az Insert Smiley beépülő modul felelős a mosolyokért a CKEditorban, amely a szabványos csomagban található - Full Package.

    Így néznek ki a smiley-k a dobozból:

    Ha sajátjával szeretné lecserélni őket, meg kell adnia a smiley_path képeket tartalmazó mappa elérési útját a konfigurációban (lásd az 1. lépést):

    Config.smiley_path = "/sites/default/files/smileys/";

    Adja meg a megjeleníteni kívánt fájlok (képek) nevét: smiley_images:

    Config.smiley_images = ["smile_1.png","smile_2.png"];

    És leírás (hover description) smiley_descriptions

    Config.smiley_descriptions = ["leírás-1", "leírás-2"];

    Azt is megadhatja, hogy hány oszlopban jelenjenek meg a smiley-k az (alapértelmezett: 8) smiley_columns-ban

    Config.smiley_columns = 6;

    Íme, amit kaptam

    9. Böngésző helyesírás-ellenőrzése. Ahogy UksusoFF is írta a CKEditorban, a böngésző helyesírás-ellenőrzése le van tiltva. A tiltás letiltásához (kicsit tautológia) a configba be kell írni:

    Config.disableNativeSpellChecker = false;

    10. Helyi menü. A CKEditorban az RMB megnyomására megnyílik helyi menü, nem a böngésző natív menüje

    Ez a cikk bemutatja, hogyan telepíthet vizuális szerkesztőt webhelyére. Ez a szerkesztő nagyon kényelmes hozzáadáshoz és/vagy szerkesztéshez új információ oldalhoz. Például telepítés a fórumra, kommentekkel ellátott blokkban, ami megkönnyíti és bővíti az új komment szövegének szerkesztési lehetőségeit, pl. kiemelheti, aláhúzhatja a szöveget, beszúrhat egy hivatkozást és még sok más, minden attól függ, hogy mennyi hozzáférést ad az olvasónak. És persze nem szabad megfeledkeznünk az adminisztrációs részről sem, ami jelentősen megkönnyítheti a munkát az anyag hozzáadásakor, szerkesztése során.

    Két vizuális szerkesztővel dolgoztam: a Tinymce-vel és a CK Editorral, bár ez a két szerkesztő elég népszerű, megmondom őszintén, a CK Editor jobban tetszett, jobban mondva alkalmasabb volt a feladataimra. Ezért itt megnézzük, hogyan kell telepíteni a CK Editort, és máskor elmondom.

    Először is, mint mindig, le kell töltenünk a szerkesztőt, letöltheti a teljes csomagot, vagy kiválaszthatja az összes szükséges csomagot a hivatalos webhelyen.

    A letöltés befejezése után csomagolja ki a letöltött archívumot például a webhely gyökerében található libs mappába. Az index.html-ben a címkék közé kapcsoljuk a ckeditor.js szerkesztő plugint és természetesen a jquery könyvtárat.

    HTML

    Tehát nincs más hátra, mint létrehozni egy űrlapot egy tesztmezővel, amellyel szerkesztőnk együttműködik.

    HTML

    CKEDITOR.replace("editor1");

    Általában minden a telepítésről szól, az oldal betöltése után a megadott szövegmezőben már meg kell jelennie egy szövegszerkesztőnek. Ez a szerkesztő ízlése szerint testreszabható, módosíthatja a szerkesztő keretének hátterét vagy nyelvét, beállíthatja az ablak szélességét és magasságát. Ehhez használja a config.js fájlt, amely a libs/ckeditor/config.js mappában található. Ebben a fájlban beállíthatjuk a fent felsorolt ​​beállításokat és még sok mást. További részletek a hivatalos weboldalon.

    Például a config.js fájl alább látható módosításaival megváltoztatjuk a szerkesztő nyelvét, keretének színét és magasságát.

    JAVASCRIPT

    CKEDITOR.editorConfig = function(config) ( config.language = "en"; //language config.uiColor = "#AADC6E"; //keret színe config.height = 300; //keret magassága );

    A szerkesztő megjelenését a config.toolbarBasic - minimum vagy Full - maximum szerkesztő funkciók beállításával is módosíthatja. Vagy testreszabhatja a szerkesztőt a config.toolbar_Basic beállítással az alábbi példában látható módon.

    Ha a minimális konfigurációt választja, a szerkesztő képességei korlátozottak lesznek, és csak a következő gombok lesznek elérhetők: félkövér szöveg beállítása, dőlt betűtípus, listák, hivatkozás létrehozása, hivatkozás törlése és hangulatjelek (lásd az alábbi példát).

    JAVASCRIPT

    CKEDITOR.editorConfig = function(config) ( config.width = 1050; //szerkesztő ablak szélessége config.toolbar = "Alap"; //szerkesztő funkciók, Alap-minimum, Teljes maximum config.toolbar_Basic = // testreszabás Alap mód [ ["Bold", "Italic", "-", "NumberedList", "BulletedList", "-", "Link", "Unlink","-", "Smiley"] ]; );

    Lehetőség van a gombok csoportokba csoportosítására, és ehhez ismét egy config.js fájl szükséges.

    JAVASCRIPT

    CKEDITOR.editorConfig = function(config) ( config.toolbarGroups = [ ( név: "dokumentum", csoportok: [ "mode", "document", "doctools" ] ), ( név: "vágólap", csoportok: [ "vágólap" " ", "visszavonás" ]), ( név: "szerkesztés", csoportok: [ "keresés", "kiválasztás", "helyesírás-ellenőrző", "szerkesztés" ]), ( név: "űrlapok", csoportok: [ "űrlapok" ] ), "/", ( név: "alapstílusok", csoportok: [ "alapstílusok", "tisztítás" ] ), ( név: "bekezdés", csoportok: [ "lista", "behúzás", "blokkok", " align ", "bidi", "paragraph" ]), ( név: "linkek", csoportok: [ "linkek" ]), ( név: "beszúrás", csoportok: [ "beszúrás" ]), "/", ( név : "stílusok", csoportok: [ "stílusok" ]), ( név: "színek", csoportok: [ "színek" ]), ( név: "eszközök", csoportok: [ "eszközök" ]), ( név: " egyebek", csoportok: [ "egyéb" ]), ( név: "körülbelül", csoportok: [ "körülbelül" ] ) ]; );

    Általában alapbeállítások szöveg szerkesztő látható, egy dolog nem tetszett, az a szerkesztő mérete, letöltés után 4m 265kb, ami kicsit sok. Ha ez is zavar, akkor törölheti a mintakönyvtárat, és kitisztíthatja a nyelvekkel ellátott könyvtárat is, mivel ez a legnagyobb súlyú. Sok olyan nyelv van benne, amelyet nem használnak, így egyszerűen eltávolíthatja őket, és csak azokat hagyhatja meg, amelyekre szükség van, például orosz és angol.

    A libs/ckeditor/lang könyvtárba lépünk, és itt töröljük az összes fájlt, kivéve a szükséges nyelvet, például hagyjuk el: ru.js és en.js. Az összes elvégzett manipuláció után a méret felére csökken, és a ckeditor könyvtára így fog kinézni:

    Számomra ennyi, aki ismeri a szerkesztő egyéb finomságait, írja meg a megjegyzésekben.