Csatlakozás a ckeditorhoz. A CKEditor vizuális szerkesztő telepítése. Konvertálja az elemet a beépített szerkesztővé kód segítségével

CKEditor 4 – WYSIWYG cikkszerkesztő. Lehetővé teszi rugalmas szövegformázás végrehajtását, beleértve a stílusok, listák, hivatkozások, grafikák stb.

1. ábra: Szerkesztőablak

A WYSIWYG szerkesztő ablaka a következő gombpaneleket tartalmazza:

	Megtekintési mód váltása
	Nyomtatás és cikksablon kiválasztása
	Munka a vágólappal (kivágás, másolás, beillesztés, visszavonás)
	Keresés és csere
	Űrlapok létrehozása
	Spoilerek (összecsukható szöveg) és oldaltörések beszúrása
	A szövegstílus megváltoztatása
	Bekezdések formázása
	Linkek beszúrása
	Médiatartalom beillesztése harmadik felek webhelyeiről
	Objektumok beszúrása
	Formázási stílus kiválasztása
	Válassza ki a bekezdés formázását
	Betűtípus kiválasztása
	Betűméret kiválasztása
	Szöveg vagy háttérszín kiválasztása
	Helyesírás-ellenőrzés
	További megtekintési lehetőségek (blokkok megjelenítése és kibontás)

A szerkesztőablak alsó panele információkat tartalmaz az aktuális címkéről és szövegstatisztikáról:

A szerkesztő megtekintési módok közötti váltás panelje a következő gombokat tartalmazza:

A nyomtatási és cikksablon-választó panel a következő gombokat tartalmazza:

A vágólappal való munkához a következő műveletek érhetők el a szerkesztőben:

A Keresés és csere panel a következő gombokat tartalmazza:

Ha a „Keresés” gombra kattint, megnyílik egy keresőablak:

A „Keresés” mezőbe írja be a kívánt szövegrészletet.

A következő lehetőségek állnak rendelkezésre:

• Az egész szövegben. Ha az opció engedélyezve van, akkor a cikk végére érve a keresés az elejétől folytatódik. Ha az opció ki van kapcsolva, a keresés a cikk végére érve véget ér.

A keresés végrehajtásához meg kell adnia a keresett töredéket, engedélyeznie kell a kívánt keresési opciókat, és kattintson a „Keresés” gombra. A szerkesztő keresést végez, és kiemeli a cikk szövegében található első töredéket. Minden alkalommal, amikor ismét a „Keresés” gombra kattint, a szerkesztő tovább keres a szövegben, és kiemeli a következő talált részletet.

Ha rákattint a „Csere” gombra, megnyílik egy szövegrészlet-csere ablak:

A „Keresés” mezőbe írja be a kívánt szövegrészletet. A „Csere erre” mezőben azt a szöveget, amellyel a keresett töredéket le kívánja cserélni.

A következő lehetőségek állnak rendelkezésre:

• Kis- és nagybetű érzékeny. Ha az opció engedélyezve van, a keresés figyelembe veszi a keresett töredék karaktereinek kis- és nagybetűjét.
• Csak az egész szót. Ha az opció engedélyezve van, a szerkesztő a beírt töredéket egész szóként keresi. A keresési eredmények nem tartalmaznak olyan szavakat, amelyeknek a beírt töredék része.
• Az egész szövegben. Ha az opció engedélyezve van, akkor a cikk végére érve a keresés az elejétől folytatódik. Ha az opció ki van kapcsolva, a keresés a cikk végére érve véget ér.

A csere végrehajtásához ki kell töltenie a „Keresés” és a „Csere erre” mezőket, engedélyezni kell a kívánt keresési lehetőségeket, majd a „Csere” vagy „Minden cseréje” gombra kell kattintani. A „Csere” gombra kattintva a szerkesztő megkeresi és lecseréli a cikk szövegében talált első töredéket. Minden alkalommal, amikor ismét a „Csere” gombra kattint, a szerkesztő tovább keres a szövegben, és lecseréli a következő talált részletet.
Ha az „Összes cseréje” gombra kattint, a szerkesztő azonnal megkeresi és lecseréli a kívánt töredéket a cikk teljes szövegében.

Az űrlapokat úgy alakítottuk ki, hogy a felhasználó egy böngészőablakban adatokat vigyen be, továbbítsa azokat a processzornak, és szükség esetén megjelenítse a feldolgozás eredményeit. Például: felhasználói regisztrációs űrlap, visszajelzési űrlap stb.

Az űrlapkészítő panel a következő gombokat tartalmazza:

Az „Űrlap” gombra kattintva megnyílik az új űrlap beállítási ablaka.

Az űrlapbeállítások ablaka a következő mezőket tartalmazza:

A jelölőnégyzet olyan vezérlőelemek megjelenítésére szolgál, amelyek engedélyezik vagy letiltják az adott tulajdonságot vagy opciót. Egy ilyen elem két érték egyikét veheti fel: igen vagy nem. A HTML-kódban ez az elem az input type="checkbox" címkének felel meg. Ha a „Checkbox” gombra kattint, megnyílik az új elem beállítási ablaka.

A „Checkbox” elem beállítási ablaka a következő mezőket tartalmazza:

• Név – az elem tetszőleges neve. HTML kódban – a név paraméter;
• Érték – az elem egyedi azonosítójaként működik. HTML kódban – az érték paraméter;
• Kijelölve - ha az opció engedélyezve van, akkor alapértelmezés szerint ez az elem meg lesz jelölve.

A „Rádiógomb” elemet úgy tervezték, hogy megjelenítse az értékek egy csoportját, amelyek közül csak egyet választhat ki. Azok. a csoporton belüli elemek kölcsönösen kizárják egymást. Minden elem két érték egyikét veheti fel: igen vagy nem. A HTML kódban ez az elem a bemeneti type="radio" címkének felel meg. Ha rákattint a „Radio Button” gombra, megnyílik az új elem beállítási ablaka.

A „Radio Button” elem beállítási ablaka a következő mezőket tartalmazza:

• A csoporton belüli elemeknek azonos névvel kell rendelkezniük.
• Érték – az elem egyedi azonosítójaként működik. A HTML kódban – az érték paraméter.
• Kijelölve - ha az opció engedélyezve van, akkor alapértelmezés szerint ez az elem meg lesz jelölve. Egy csoporton belül ezt a tulajdonságot csak egy elemhez kell engedélyezni. Ha több elemnél engedélyezve van, akkor csak az utolsó lesz megjelölve.

A „Szövegmező” elem arra szolgál, hogy a felhasználó beírjon egy szöveges karakterláncot. A HTML kódban ez az elem az input type="text" címkének felel meg. Ha a „Szövegmező” gombra kattint, megnyílik az új mező beállítási ablaka.

• Név – az elem tetszőleges neve. A HTML kódban – a név paraméter.
• Érték – Az alapértelmezett szövegmezőben megjelenő szöveget tartalmazza. A HTML kódban – az érték paraméter.
• Mező szélessége (karakterben) - a szövegmező beviteli területének hossza karakterekben. A HTML kódban – a méret paraméter.
• Max. karakterek száma - a szövegmezőbe beírható karakterlánc maximális hossza karakterben. HTML kódban – a maxlength paraméter.
• Tartalom típusa – A szövegmező tartalomtípusa. HTML kódban – a típus paraméter. Mielőtt elküldené az adatokat a szervernek, ellenőrizni kell, hogy megfelelnek-e a megadott típusnak.

Elérhető tartalomtípusok:

• E-mail – a szövegmező tartalmazza az e-mail címet;
• Jelszó – a szövegmező tartalmazza a jelszót;
• Keresés – a szövegmező a keresett szöveg bevitelére szolgál;
• Telefonszám – a szövegmező telefonszámot tartalmaz;
• Szöveg – a szövegmező egy szabályos sort tartalmaz;
• Link – A szövegmező tartalmazza az URL-t.

A „Többsoros szövegmező” elem több sorból álló szövegek felhasználói bevitelére szolgál. A HTML-kódban ez az elem egy párosított textarea címkének felel meg. Ha a „Többsoros szövegmező” gombra kattint, megnyílik az új mező beállítási ablaka.

A „Szövegmező” elem beállítási ablaka a következő mezőket tartalmazza:

• Név – az elem tetszőleges neve. A HTML kódban – a név paraméter.
• Oszlopok – a mező szélessége karakterben. A HTML kódban – a cols paraméter.
• Sorok - mező magassága sorokban. A HTML kódban – a sorok paraméter.
• Érték – Az alapértelmezett szövegmezőben megjelenő szöveget tartalmazza.

A Legördülő lista elem feleletválasztós lista vagy legördülő lista megjelenítésére szolgál. A HTML-kódban ez az elem egy páros kiválasztási címkének felel meg. A listaelemek párosított opciócímkével rendelkeznek. Ha a „Lenyíló lista” gombra kattint, megnyílik az új lista beállítási ablaka.

A többszörös kijelölési lista beállítási ablaka a következő mezőket tartalmazza:

• Név – az elem tetszőleges neve. A HTML kódban – a név paraméter.
• Érték – az alapértelmezés szerint kiválasztott listaelem értékét tartalmazza. Ennek az elemnek a HTML-kódjában az opciócímke select="selected" értékre van állítva.
• Méret – a megjelenített listaterület magassága sorokban. Ha a méret egyenlő egy, akkor egy legördülő lista jelenik meg. Ha a méret nincs megadva, a listanézet a Több kijelölés engedélyezése beállítástól függ.

Paramétercsoport „Elérhető opciók”:

• Szöveg - beviteli mező a listaelem megjelenített szövegéhez. Az „Érték” mezővel együtt kell megadni. A „Szöveg – Érték” pár hozzáadásához kattintson a „Hozzáadás” gombra.
• Érték – a kiszolgálónak küldött listaelem értékének beviteli mezője. A „szöveg” mezővel együtt írjuk be. A „Szöveg – Érték” pár hozzáadásához kattintson a „Hozzáadás” gombra.
• Hozzáadás - gomb a beírt „Szöveg – Érték” pár hozzáadásához a listához.
• Szerkesztés - gomb a kiválasztott listaelem módosításához. A módosításhoz ki kell választani a kívánt elemet a listabeállításokban, módosítani kell a „Szöveg” és az „Érték” mezők tartalmát, majd a „Módosítás” gombra kell kattintani. A kiválasztott elem ennek megfelelően frissül.
• Emelje - gomb a kiválasztott listaelem egy szinttel feljebb mozgatásához.
• Lejjebb - gomb a kiválasztott listaelem egy szinttel lejjebb mozgatásához.
• Megjelölés kiválasztottként – a gombra kattintva a kiválasztott listaelem alapértelmezés szerint kiválasztottként lesz megjelölve. Az elem értéke az "Érték" mezőben jelenik meg (lásd fent). Ennek az elemnek a HTML-kódjában az opciócímke select="selected" értékre van állítva.
• Törlés - gomb a kiválasztott elem törléséhez a listából.
• Több kijelölés engedélyezése – ha a tulajdonság engedélyezve van, akkor a ctrl billentyűvel több listaelemet is kiválaszthat. Ha a lista mérete nincs megadva, és a tulajdonság le van tiltva, egy legördülő lista jelenik meg. Ha a lista mérete nincs megadva, és a tulajdonság engedélyezve van, akkor a lista mérete négyre lesz állítva.

A cikk vége következik...

Hivatalos fejlesztői oldal: https://ckeditor.com/

A CKEditor egy nagyon népszerű vizuális WYSIWYG HTML tartalomszerkesztő ma.

A CKFinder egy fájlkezelő, amely lehetővé teszi a kiszolgáló fájlrendszerének elérését és a fájlok kezelését az ügyfél böngészőjéből.

Általában mindkét komponens összejön, vagyis a fájlkezelő be van építve a szerkesztőbe.

A CKEditor két változatban érhető el. A 4-es verzió régebbi, ezért elterjedtebb. És az 5-ös verzió, új, moduláris architektúrát valósít meg, sok újítással.

A projektjeimben a 4-es verziót használom, funkcionalitása elégséges a problémák megoldásához. Töltsük le az archívumot a szerkesztővel, és adjuk hozzá projektünkhöz.

A CKEditor hozzáadása nagyon egyszerű. Ez több szakaszban történik:

a szerkesztő csatlakoztatásához egy korábban meghatározott .

) document.addEventListener("DOMContentLoaded", függvény (esemény) ( var editor = CKEDITOR.replace("content1"); ));

Minden készen áll! A fenti példában a CKEditor egy HTML űrlapon belül a "content1" szövegterülethez csatlakozik. Ezután ennek a mezőnek a tartalma elküldésre kerül a szerverre.

Érdemes megjegyezni, hogy a CKEditorhoz számos bővítmény létezik, amelyek kiterjesztik a szabványos funkcióit. Saját maga is írhat bővítményeket (ezt a folyamatot a webhely hivatalos dokumentációja ismerteti részletesebben). Adjunk hozzá egy bővítményt a szerkesztőhöz, amely lehetővé teszi a Youtube videotárhelyről származó videó beágyazását az oldalra.

A cikk írásakor az összes plugin egy külön részben megtalálható az oldalon. A minket érdeklő bővítmény a következő címen található: https://ckeditor.com/cke4/addon/youtube

A CKFinder beállítása

Most nézzük a CKFinder fájlkezelőt. Mivel fájljaink (például képeink) a szerveren találhatók, amellett, hogy ezt a komponenst a kliensen, azaz a felhasználó böngészőjében csatlakoztatjuk, a szerver oldalon is be kell konfigurálnunk, és konkrétan csatlakoztatnunk kell néhány könyvtárat. és több módszert is megvalósítani.

Az ASP.NET-alkalmazások csatlakozójának beállításához szükséges hivatalos dokumentáció a következő címen található: https://ckeditor.com/docs/ckfinder/ckfinder3-net/

Az összes szükséges összetevő telepítése után megkezdheti a szerveroldal beállítását.

Először is a CKFinder megköveteli, hogy csak hitelesített felhasználók férhessenek hozzá a fájlrendszerhez, azaz minden alkalommal, amikor ezen a fájlkezelőn keresztül kérést intézünk a szerverhez, meg kell mondanunk neki, hogy az adott felhasználó hozzáférhet-e a szerveren lévő fájlokhoz vagy sem. .

Ehhez egy speciális felületet kell megvalósítanunk, és abban egy olyan metódust, amely minden bejövő kérést hitelesít.

CKFinderAuthenticator.cs

Nyilvános osztály CKFinderAuthenticator: IAuthenticator ( public Task AuthenticateAsync(ICommandRequest commandRequest, CancellationToken cancellationToken) ( var user = new User(true, new List()); return Task.FromResult((IUser) user); ) )

A fenti példában egyszerűen minden alkalommal visszaadunk egy hamis felhasználót, aki mindig hitelesített (igaz jelző), és nincs szerepe (üres lap). Vagyis mindig jogunk van hozzáférni a fájlrendszerhez. Egy valós projektben természetesen komolyabban kell ezt a kérdést kezelni, és ezt a módszert kombinálni a meglévő felhasználói hitelesítési és jogosultsági rendszerrel.

Névtér CKEditor ( nyilvános osztály Indítás ( public void Configuration(IAppBuilder app) A CKFinder arra számít, hogy az összekötőt ezen az útvonalon fogja látni app.Map("/ckfinder/connector", SetupConnector ) //meghatároz egy metódust a csatlakozó beállítására és inicializálására, privát static void SetupConnector(IAppBuilder app) ( //létrehozza a szükséges példányokat osztályok var connectorFactory = new OwinConnectorFactory( var connectorBuilder = new ConnectorAuthenticator() korábban definiált hitelesítő.SetRequestConfiguration((request, config) = > ( config.LoadConfig(); )); //a konfiguráció meghatározása minden egyes kérelemhez //összekötő példány létrehozása var connector = connectorBuilder.Build(connectorFactory);

//csatlakozó hozzáadása a csővezeték alkalmazáshoz.UseConnector(connector);

) ) )

Ezzel befejeződik a szerverrész konfigurálása. Most integráljuk a CKFinder klienst a CKEditorral az oldalon.

@using (Html.BeginForm("Index", "Home", FormMethod.Post)) ( ) document.addEventListener("DOMContentLoaded", függvény (event) ( var editor = CKEDITOR.replace("content1"); CKFinder.setupCKEditor (szerkesztő));

Ha minden szkript megfelelően van csatlakoztatva, és az összekötő konfigurálva van a szerver oldalon, akkor a fájlrendszert a CKFinderen keresztül érjük el a felhasználó böngészőjéből.

A Web.config fájl csatlakozási beállításaitól függően módosíthatjuk a fájlok és mappák kezelésének (létrehozás, áthelyezés stb.) engedélyeit.

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ájlkezelő 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). A modulok jelenlegi verziói nagyban megkönnyítik az életünket.

A CKEditor egy rugalmas és felhasználóbarát szerkesztő. A 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.

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 a szükséges gombokat.

Válassza ki az orosz nyelvet.

Fájlböngésző beállításai
Tetszésünk szerint kiválasztunk egy fájlkezelőt az alábbi szövegben található egy Drupal 7 – Elfinder fájlkezelő telepítése és konfigurálása.

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 és Advanced használata – a regisztráltaknál, az Ön változatainál is. Hozzon létre egy sima profilt névtelen felhasználók számára, ahol megjelölheti a html szöveg egyszerű formátumra történő automatikus módosítását.

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.

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.

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.

Csomagolja ki az archívumot, és helyezze el a fájlokat a site/all/modules/elfinder mappába

A legújabb verzióktól kezdve működö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.

A „Gyökérkönyvtárban” meghagyjuk a „Rendszer alapbeállítások használata” lehetőséget – ez az alapértelmezett Drupalban.

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

A „Tartalom” oldalon – adminisztrátor/tartalom – egy új „Fájlok” fület fog látni. Most csak kattintson rá, és megjelenik a fájlkezelő felület.

Az utolsó lépés pedig az, hogy a szerkesztőt a fájlkezelővel egy funkcionális eszközzé egyesítsük.
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

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. A vizuális szerkesztő megjelenésének testreszabásakor mindkét profilból el kell távolítania a teaser-Drupal gombot.

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ó.

A CKEditor egy használatra kész HTML-szövegszerkesztő, amelyet a weboldal tartalmának létrehozásának egyszerűsítésére terveztek. Ez egy WYSIWYG szerkesztő, amely szövegszerkesztési funkciókat biztosít közvetlenül a weboldalain.

A CKEditor egy nyílt forráskódú alkalmazás, ami azt jelenti, hogy tetszés szerint módosítható. Hasznossága egy aktív társadalomból fakad, amely soha nem hagyja abba az alkalmazások fejlesztését ingyenes kiegészítőkkel és átlátható fejlesztési folyamattal.

4 lehetőség közül választhat a CKEditor letöltéséhez.

Letöltési eredmény:

A mappában láthat példákat a CKEditorra minták:

A cikk összes példája a mappában található minták a letöltött CKEditorban. De megpróbálom megkönnyíteni, hogy neked is könnyebb legyen.

Hozzon létre egy mappát az én példáim, a cikkben szereplő példák ebben a mappában találhatók.

Egy egyszerű példa a CKEditor.replace(..) használata a CKEditor segítségével történő cserére.

cserekóddal.html

A Textarea cseréje kóddal Cserélje ki a Textarea elemeket JavaScript kóddal

Szia CKE-szerkesztő!

Lásd a példát:

A példa futtatásának eredménye:

Attribútum birtokában név,és a class ="ckeditor" helyére automatikusan a CKEditor lép.

Szöveg

cserélje osztály.html

Szövegterületek cseréje osztálynévvel A szövegterület elemeinek cseréje osztálynévvel

Szia CKE-szerkesztő!

A példa futtatása:

Példa egy CKEditor létrehozására JQuery használatával.

jQuery Adapter - CKEditor minta $(document).ready(function() ( $("#editor1").ckeditor(; ));

Szia CKE-szerkesztő!