Installerar plugins i CKEditor. Installera den visuella editorn CKEditor Problem med ckeditor-editorn

Idag kommer vi att ta reda på hur man integrerar och konfigurerar den mycket populära innehållsredigeraren CKEditor i standardapplikation ASP.NET MVC. Vi kommer också att installera och konfigurera den lika populära filhanteraren CKFinder.

Officiell sida utvecklare: https://ckeditor.com/

CKEditor är en mycket populär visuell WYSIWYG HTML-innehållsredigerare idag.

CKFinder är en filhanterare som låter dig komma åt filsystem på servern och hantera filer från klientens webbläsare.

Vanligtvis kommer båda dessa komponenter tillsammans, det vill säga filhanteraren är integrerad i editorn.

CKEditor finns i två versioner. Version 4 är äldre och därför mer utbredd. Och version 5, ny, implementerar en modulär arkitektur, med många innovationer.

Konfigurera CKEditor

Jag använder version 4 i mina projekt, dess funktionalitet är tillräckligt för att lösa eventuella problem. Låt oss ladda ner arkivet med redigeraren och lägga till det i vårt projekt.

Att lägga till CKEditor är väldigt enkelt. Detta sker i flera steg:

vi kopplar JS-biblioteket till sidan via en tagg;

vi definierar en HTML-tagg som kommer att användas som en behållare för CKEditor;

använd metoden CKEDITOR.replace();

för att ansluta editorn till en tidigare definierad .

) document.addEventListener("DOMContentLoaded", funktion (händelse) ( var editor = CKEDITOR.replace("content1"); ));

Allt är klart! I exemplet ovan ansluter CKEditor till textområdet "content1" i ett HTML-formulär. Därefter kommer innehållet i detta fält att skickas till servern. Det är värt att notera att det finns många plugins för CKEditor som utökar det standardfunktionalitet

. Du kan också skriva plugins själv (denna process beskrivs mer i detalj i den officiella dokumentationen på webbplatsen). Låt oss lägga till ett plugin till redigeraren som låter dig bädda in video från Youtube-videovärd på sidan.

Efter detta kommer en ny knapp att dyka upp i redigerarens verktygsfält som låter dig arbeta med det nya plugin-programmet.

Konfigurera CKFinder

Låt oss nu titta på CKFinder-filhanteraren. Eftersom våra filer (till exempel bilder) finns på servern kommer vi, förutom att ansluta den här komponenten på klienten, det vill säga i användarens webbläsare, även behöva konfigurera den på serversidan, och specifikt ansluta vissa bibliotek och implementera flera metoder.

Officiell dokumentation för att ställa in en anslutning för ASP.NET-applikationer finns på: https://ckeditor.com/docs/ckfinder/ckfinder3-net/

Till skillnad från CKEditor-redigeraren, som vi konfigurerade på webbplatsen och laddade ner manuellt, kan vi lägga till CKFinder i projektet direkt i Visual Studio via . Minsta uppsättning paket som krävs för arbete ser ut så här:

CKSource.CKFinder - JavaScript-klient, ansluter på klientsidan

CKSource.CKFinder.Connector.Core - huvud- och nyckelbiblioteket som säkerställer att CKFinder-anslutningen fungerar på servern

CKSource.CKFinder.Connector.Config - Det här biblioteket låter dig konfigurera CKFinder genom den gemensamma . Lägg märke till hur konfigurationsfilen ändras efter installation av det här paketet. Nu finns alla inställningar för CKFinder.

CKSource.CKFinder.Connector.Host.Owin - detta bibliotek låter dig ansluta en kontakt som en OWIN-komponent i en applikation. På serversidan fungerar CKFinder exakt enligt denna specifikation, d.v.s. Öppna webbgränssnittet för .NET

Microsoft.Owin.Host.SystemWeb - installera omedelbart OWIN-värd eller server

CKSource.FileSystem.Local - den här komponenten lägger till stöd för att arbeta med filsystemet på servern

Efter att ha installerat alla nödvändiga komponenter Du kan börja konfigurera serversidan.

För det första kräver CKFinder att endast autentiserade användare har tillgång till filsystemet, det vill säga varje gång vi gör en förfrågan till servern via den här filhanteraren måste vi tala om för den om denna användare komma åt filer på servern eller inte.

För att göra detta måste vi implementera ett speciellt gränssnitt, och i det en metod som autentiserar alla inkommande förfrågningar.

CKFinderAuthenticator.cs

Public class CKFinderAuthenticator: IAuthenticator ( public Task AuthenticateAsync(ICommandRequest commandRequest, CancellationToken cancellationToken) ( var user = new User(true, new List()); return Task.FromResult((IUser) user); ) )

I exemplet ovan returnerar vi helt enkelt en falsk användare varje gång som alltid är autentiserad (true flag) och inte har några roller (tomt ark). Det vill säga att vi alltid har rättigheter att komma åt filsystemet. I ett verkligt projekt måste du naturligtvis närma dig denna fråga mer seriöst och kombinera denna metod med befintligt system användarautentisering och auktorisering.

Namespace CKEditor ( public class Startup ( public void Configuration(IAppBuilder app) ( // registrera filsystemet för kopplingen FileSystemFactory.RegisterFileSystem(); // deklarera en rutt i applikationen och mappa den till kopplingen // CKFinder-klienten JS biblioteket förväntar sig att se anslutningen längs denna rutt app.Map("/ckfinder/connector", SetupConnector ) //deklarera en metod för att ställa in och initiera anslutningen privat static void SetupConnector(IAppBuilder app) ( //skapa instanser av nödvändiga classes var connectorFactory = new OwinConnectorFactory() var connectorBuilder = new ConnectorBuilder(); tidigare definierad authenticator.SetRequestConfiguration((request, config) = > (config.LoadConfig(); ));

//lägg till en anslutning till pipeline-appen.UseConnector(connector);

) ) )

Detta slutför konfigurationen av serversidan. Nu integrerar vi CKFinder-klienten med CKEditor på sidan.

@using (Html.BeginForm("Index", "Home", FormMethod.Post)) ( ) document.addEventListener("DOMContentLoaded", funktion (händelse) ( var editor = CKEDITOR.replace("content1"); CKFinder.setupCKEditor (redaktör));

Om alla skript är korrekt anslutna och anslutningen är konfigurerad på serversidan, kommer vi åt filsystemet via CKFinder från användarens webbläsare.

I Drupal 7, liksom i den sjätte versionen, finns ingen inbyggd visuell redaktör.

Användarhandbok: hur man installerar och konfigurerar ckeditor-editorn i Drupal 7. Laddar bilder från Elfinder.

I Drupal 7, liksom i den sjätte versionen, måste vi installera en redigerare. Naturligtvis behöver du inte göra detta och skriva texter som bara ser koden. Men jag gillar visuella redaktörer. Låt mig påminna dig om att vi studerade installationen och konfigurationen för Drupal 6 i lektion 2:

Idag ska vi titta på arbetskombinationen av cms och editor.
drupal 7.17
CKEditor - WYSIWYG HTML-redigerare 7.x-1.11
CKEditor 4.0
elFinder filhanterare 7.x-0.7
manus elFinder - elfinder-1.2

För Drupal version 7 är hela installations- och konfigurationsprocessen mycket enklare. Du behöver inte redigera något i filerna, alla åtgärder är tillgängliga från adminpanelen (vi markerar bara rutorna). Existerande nuvarande versioner moduler gör vårt liv mycket enklare.

Hur man installerar WYSIWYG-redigeraren CKEditor på den senaste versionen av CMS Drupal 7.17

CKEditor är flexibel och bekväm editor. Dess gränssnitt liknar Word.
Först installerar vi redaktörsskriptet, sedan själva modulen. Det är modulen som kopplar den till webbplatsen.
Notera.
Jag anger specifika versioner i skrivande stund.

1. Ladda ner modulen ]]> https://drupal.org/project/ckeditor ]]>
Packa upp arkivet i en mapp plats/alla/moduler. Hela vägen ser ut så här: site/all/modules/ckeditor

2. Ladda ner editorn CKEditor 4.0]]> https://ckeditor.com/download ]]>
För redigeringsfiler måste du skapa en biblioteksmapp i webbplats/alla/
Vägen för att packa upp arkivet kommer att vara så här: site/all/libraries/ckeditor

På modulsidan aktiverar vi det och konfigurerar det sedan.
Gå till "Konfiguration - CKEditor - CKEditor Global Profile - Redigera". Här måste du kontrollera posten i fältet "Path to CKEditor" - det borde det vara %l/ckeditor. Denna post visar att redigeraren finns i mappen bibliotek.

Alla. Du har installerat CKEditor och det borde fungera. För att kontrollera, försök öppna sidan för att skapa ett nytt material. Nu, istället för ett stort inmatningsfält, kommer du att se den vanliga visuella redigeraren.

Om redigeraren inte är synlig:
Kontrollera att de valda modulversionerna är korrekta för din version av Drupal. Försök att byta till en annan version.

Ställa in CKEditor-redigeringsprofiler

1 steg. Ställa in den avancerade profilen i CKEditor-redigeraren.
Avancerat (avancerat, med inläsning av bilder, etc.)
Gå till "Hantering > konfiguration > ckeditor - admin/config/content/ckeditor
Låt oss ställa in den avancerade profilen, klicka på länken "ändra" bredvid den avancerade profilen.
Redaktörens utseende:
Välj en färg.

Dra och släpp de önskade knapparna.

Välj språk ryska.

Filläsarinställningar
Vi väljer en filhanterare enligt vår smak nedan i texten finns installation och konfiguration av en filhanterare för Drupal 7 – Elfinder.

Steg 2. Konfigurera hela profilen i ckeditor-redigeraren
Gå till "Management - Configuration - ckeditor" - admin/config/content/ckeditor
Du kan lämna inställningarna som standard och välja ryska.

Det enklaste alternativet är att använda Full och Advanced - för registrerade, även dina varianter. Skapa en vanlig profil för anonyma användare, var du ska markera automatisk förändring html text i ett enkelt format.

Lite från recensionen av Drupal 7, en sådan mini positiv recension.
Som standard har de sju ett fält för att ladda upp bilder. En mycket användbar funktion. Varje material kan tilldelas en bild – en sorts logotyp. I meddelandet kommer denna bild automatiskt att förminskas i storlek.

Vilka problem stöter du på när du arbetar med editorn. CKeditor visar inte alla knappar?

För att göra detta, kontrollera vilken version du laddade ner på https://ckeditor.com/download

Det finns få knappar i grundpaketet.
Standardpaket - det finns fler av dem.
Det kompletta setet finns i hela paketet - ladda ner det om du vill få ut det mesta av det.

Installera och konfigurera Elfinder filhanterare för Drupal 7

En kombination av en redigerare och en filhanterare kommer att göra ditt arbete roligare. Du kan infoga en bild var som helst från servern eller från din dator. Tilldela den de nödvändiga attributen och en alternativ beskrivning. Tyvärr måste den också installeras.
CKEditor-filhanteraren laddar inte bara ner bilder utan även andra filer.
Precis som med editorn måste du ladda ner modulen och skriptet.

Ladda ner modulen ]]> https://drupal.org/project/elfinder ]]>

Packa upp arkivet och placera filerna i mappen site/all/modules/elfinder

Ladda ner skript ]]> ]]>

Från senaste versionerna kom upp elfinder-1.2.
Packa sedan upp arkivet och placera filerna i mappen site/all/libraries/elfinder
Det finns en liten funktion här, mappen ska heta elfinder.

Sätter upp det. För detta går vi admin/config/elfinder– “konfiguration – moduler – elFinder – konfigurera.”

I "rotkatalogen" lämnar vi valet för "Använd systemstandarder" - standard i Drupal.

Standardinställningar admin/config/media/filsystem:

På sidan "Innehåll" - admin/innehåll, kommer du att se en ny "Filer"-flik. Klicka nu bara på den och du kommer att se filhanterarens gränssnitt.

Och det sista steget är att kombinera editorn med filhanteraren till ett funktionellt verktyg.
Jag har redan beskrivit inställningen av editorprofiler ovan.

Jag upprepar:
Välj in Filläsartyp - elFinder. Om så önskas kan du även ändra mappen för nedladdning av filer här.

Nu borde allt fungera, men jag förstår bara inte varför detta inte finns i Drupal-kärnan? Istället finns det flera redigeringsalternativ för alla smaker. Vilket är för bra. ;)

Ny fungerande anslutning

drupal 7.21
CKEditor - WYSIWYG HTML-redigerare 7.x 1.13
CKEditor - ckeditor_4.1_standard
elFinder filhanterare 7.x-0.8
elFinder-skript - elfinder-1.2

En glitch visas med nya tomrum () som läggs till varje gång du redigerar.

Det upptäcktes att felet uppstår när du sätter in en Drupal-teaser. Om artikeln inte separerar tillkännagivandet finns det inget fel.

Anledningen är att meddelandestorleken som standard redan är konfigurerad i materialtypen. Detta resulterar i dubbel användning av meddelandeseparationen: manuell och automatisk.

Väg till att ställa in annonsvisning:

Hem » Administration » Struktur » Innehållstyper » Artikel » Hantera visning

Råd. Bör vara när du ställer in utseende visuell redigerare, ta bort teaser-Drupal-knappen i båda profilerna.

Artiklar för att lära sig drupal:

Allmänna koncept för nybörjare.

Hur man russifierar Drupal och dess moduler.

Ett urval av bloggmoduler.

Snabbguide.

Jag använde BUEditor på min webbplats - en enkel, bekväm redigerare, men den är inte särskilt bekväm för användarna. Jag funderade ofta på att installera CKEditor, men det verkade som något slags monster för mig, men i verkligheten visade sig allt inte vara så skrämmande.

Läs hur du installerar modulen.

Efter att ha anslutit via din modul, på sidan admin/config/content/ckeditor/edit/profile_assignment på fliken REDAKTÖRENS UTSEENDE, i avsnitt Plugins En aktiveringskryssruta visas. Slå på, spara, kolla.

3. Infoga länkar.

Ut ur lådan innehåller dialogrutan för länkinsättning en massa onödiga och oklara saker. Vi ersätter det med Simple link-plugin. Hur du installerar, se steg 2. Anslut (se punkt 1):

Config.extraPlugins = "SimpleLink";

En ny plugin-ikon (knapp) kommer också att visas.

4. Infoga bilder.

Här är allt detsamma som med länkar du kan installera Simple Image plugin för att infoga bilder via länkar.

Config.extraPlugins = "SimpleImage";

Eller ladda upp bilder med One Click Upload-modulen. . Läs mer. Jag bestämde mig för den andra metoden, även om jag använde båda i BUEditor.

5. Utseende.

Moono-skinnet används som standard, men jag ville föra utseendet till utseendet på BUEditor.

så här såg BUEditor ut

7. Platshållare."; // текст нашего placeholder !}

För att lägga till en platshållare, installera plugin-programmet (se punkt 2) Configuration Helper. Anslut (se punkt 1):

Config.extraPlugins = "confighelper"; config.placeholder = "Vår text

8. Smileys.

Insert Smiley-plugin är ansvarig för leenden i CKEditor, den ingår i standardpaketet - Full Package.

Så här ser smileys ut ur lådan:

För att ersätta dem med dina egna måste du ange sökvägen till mappen med bilder smiley_path i konfigurationen (se steg 1):

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

Ange namnen på filerna (bilderna) som kommer att visas smiley_images :

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

Och beskrivning (sväva beskrivning) smiley_descriptions

Config.smiley_descriptions = ["beskrivning-1", "beskrivning-2"];

Du kan också ange hur många kolumner som ska visa leenden i (standard: 8) smiley_columns

Config.smiley_columns = 6;

Det här är vad jag fick 9. Stavningskontroll i webbläsaren. Som UksusoFF skrev i CKEditor, är webbläsarens stavningskontroll inaktiverad För att inaktivera denna inaktivering (lite av en tautologi), måste du skriva i konfigurationen:

Config.disableNativeSpellChecker = false;

10. Snabbmeny.

I CKEditor, när du trycker på RMB öppnas den snabbmenyn, inte webbläsarens inbyggda meny Jag delade med dig av en utmärkt WISIWIG-redigerare, som är utmärkt att använda på de flesta webbplatser. Det här verktyget gör det utan tvekan lättare att skriva och redigera text för människor som är okunniga om HTML..
Personligen var det ganska svårt för mig att hitta någon information om att ställa in denna WISIWIG-redigerare på det ryska Internet, så jag var tvungen att läsa dokumentationen på engelska. Förresten, detta faktum fick mig att skriva denna anteckning.

Hemligheten med hela tricket är att nästan alla inställningar är koncentrerade i filen

/ckeditor/config.js

CKEDITOR.editorConfig = function(config) ( config.toolbar_Full = [ ( namn: "dokument", objekt: [ "Källa","-","Spara","NewPage","DocProps","Förhandsgranska","Skriv ut ","-","Mallar" ] ), ( namn: "klippbord", objekt: [ "Klipp ut","Kopiera","Klistra in","Klistra in text","Klistra inFrånWord","-","Ångra", "Gör om" ] ), ( namn: "redigerar", objekt: [ "Sök","Ersätt","-","SelectAll","-","Stavningskontroll", "Scayt" ] ), (namn: " forms", objekt: [ "Form", "Checkbox", "Radio", "TextField", "Textarea", "Select", "Button", "ImageButton", "HiddenField" ]), "/", ( namn : "basicstyles", items: [ "Fet","Kursiv","Understrykning","Strike","Subscript","Superscript","-","RemoveFormat" ] ), (namn: "paragraph", objekt : [ "Numbered List","BulletedList","-","Outdent","Indent","-","Blockquote","CreateDiv","-","JustifyLeft","JustifyCenter","JustifyRight", "JustifyBlock","-","BidiLtr","BidiRtl" ] ), ( namn: "länkar", objekt: [ "Link","Unlink","Anchor" ] ), (namn: "insert", objekt : [ "Bild","Flash","Tabell","HorizontalRule","Smiley","SpecialChar","PageBreak" ] ), "/", (namn: "stilar", objekt: [ "Stilar", "Format","Font","FontSize" ] ), ( namn: "colors", objekt: [ "TextColor","BGColor" ] ), ( namn: "tools", objekt: [ "Maximera", "ShowBlocks" ","-","Om" ]) ]; );

För att ta bort onödiga ikoner måste du manuellt ta bort dess beteckning ("Maximera", "Visa block", etc.) i denna kod. Följaktligen bibehåller den korrekta syntaxen. Jag tror att det inte är något komplicerat här.

Hur gör jag det?

Vanligtvis för en kundwebbplats använder jag denna vy:

Jag tar avsiktligt bort verktyg för textformatering som ändrar textens utseende på sajten, som typsnittsfärg, typsnitt och storlek, eftersom jag anser att detta bör göras av en webbutvecklare, och inte av personen som fyller sajten. Dessutom har de flesta som senare kommer att arbeta med den här sidan oftast en "konstig smak" som kan förstöra allmän syn plats.

Till exempel kan den här typen av gränssnitt konfigureras med följande kod:

CKEDITOR.editorConfig = function(config) ( config.toolbar_Full = [ ( namn: "dokument", objekt: [ "Ångra"," Gör om"] ), ( namn: "basicstyles", objekt: [ "Fet","Kursiv ","Understrecka","Subscript","Superscript","Format" ] ), ( namn: "paragraph", items: [ "NumberedList","BulletedList","-","JustifyLeft","JustifyCenter", "JustifyRight","JustifyBlock" ] ), ( namn: "länkar", objekt: [ "Link","Unlink" ] ), ( namn: "infoga", objekt: [ "Bild","Table","SpecialChar " ]), ( namn: "verktyg", objekt: [ "Maximera", "Källa"] ) ]; );

Jag kommer att upprepa en gång till om jag säger att idag är CKE det bästa systemet, som jag precis såg.

Dela på sociala medier nätverk

CKEditor är en färdig att använda HTML-textredigerare designad för att förenkla skapandet av webbsidainnehåll. Detta är en WYSIWYG-redigerare som tillhandahåller textredigeringsfunktioner direkt till dina webbsidor.

CKEditor är ett program med öppen källkod källkod, det vill säga den kan ändras på din begäran. Dess användbarhet kommer från ett aktivt samhälle som aldrig slutar utveckla applikationer med gratis tillägg och en transparent utvecklingsprocess.

3-Ladda ner CKEditor

Du har 4 alternativ för att ladda ner CKEditor.

Ladda ner resultat:

Du kan se exempel på CKEditor i mappen prover:

4- Grundläggande exempel:

Alla exempel på den här artikeln finns i mappen prover i CKEditor som du laddade ner. Men jag ska försöka göra det lättare så att det blir lättare för dig.

Skapa en mapp minaexempel, kommer exemplen i den här artikeln att finnas i den här mappen.