Naar mijn mening is CKEditor een van de beste wysiwyg-editors voor websites. De laatste tijd is er veel onzin in verschenen om het leven van de gebruiker te vereenvoudigen, wat hem uiteindelijk als ACF hindert. Ik weet al hoe ik het moet bewerken en uitschakelen. Maar laten we terugkeren naar het onderwerp van ons artikel: hoe plug-ins op CKEditor te installeren.

Ik zie hier twee benaderingen.

Eerst gaan we naar de website van de editor en herbouwen CKeditor voor onszelf, inclusief de plug-ins die we nodig hebben. Dit gebeurt als volgt. We gaan naar de website ckeditor.com, ga naar het tabblad Downloaden. Selecteer vervolgens Of laat mij CKEditor aanpassen

Maar in dit geval worden niet alle plug-ins weergegeven. Om nieuwe of speciale plug-ins in uw build op te nemen, moet u uw build een beetje anders bouwen. Ga naar Add-ons -> Plug-ins en zie het volgende bewegende menu aan de rechterkant

Wanneer u op de knop Toevoegen aan mijn editor klikt, wordt de plug-in aan de assembly toegevoegd. Wanneer u klaar bent, klikt u op Mijn editor bouwen en vervangt u onze ingebouwde editor door de gegenereerde editor.

De tweede benadering is voor degenen die geïnteresseerd zijn om zelf in de code te duiken.

Ga op de website ckeditor.com naar de sectie add-ons->plug-ins en klik op de gewenste plug-in.

Selecteer Downloaden en volg de instructies van de site. Voor het grootste deel komen ze neer op het feit dat u afhankelijkheden voor een bepaalde plug-in moet installeren en zowel de plug-in zelf moet registreren in het configuratiebestandsveld config.js als de plug-in waarvan de plug-in wordt geïnstalleerd, gescheiden door komma's. , Bijvoorbeeld,

Config.extraPlugins = "codemirror,youtube,imagerotate";

Ik heb BUEditor op mijn website gebruikt - een eenvoudige, handige editor, maar niet erg handig voor gebruikers. Ik heb er vaak over nagedacht om CKEditor te installeren, maar het leek mij een soort monster, maar in werkelijkheid bleek alles niet zo eng te zijn.

Lees hoe u de module installeert.

Nadat u verbinding heeft gemaakt via uw module, op de pagina admin/config/content/ckeditor/edit/profile_assignment op het tabblad VERSCHIJNING VAN DE REDACTIE, in sectie Plug-ins Er verschijnt een activeringsselectievakje. Aanzetten, opslaan, controleren.

3. Koppelingen invoegen.

Het dialoogvenster voor het invoegen van links bevat standaard een heleboel onnodige en onbegrijpelijke dingen. We vervangen deze door de Simple link-plug-in. Hoe te installeren, zie stap 2. Verbinden (zie punt 1):

Config.extraPlugins = "SimpleLink";

4. Afbeeldingen invoegen.

Hier is alles hetzelfde als bij links; je kunt de Simple Image plugin installeren om afbeeldingen in te voegen via links.

Config.extraPlugins = "EenvoudigAfbeelding";

Of upload afbeeldingen met de One Click Upload-module. . Lees meer. Ik koos voor de tweede methode, hoewel ik beide in BUEditor gebruikte.

Het enige dat ik wil toevoegen is dat de Enhanced Image-plug-in nog twee plug-ins Widget en Lineutils vereist.

Ik kon niet begrijpen waarom de plug-in niet startte totdat ik naar het logboek keek

5. Uiterlijk.

Standaard wordt de Moono-skin gebruikt, maar ik wilde het uiterlijk overbrengen naar het uiterlijk van BUEditor.

zo zag BUEditor eruit"; // текст нашего placeholder !}

7. Tijdelijke aanduiding.

Om een ​​tijdelijke aanduiding toe te voegen, installeert u de plug-in (zie punt 2) Configuratiehelper. Verbinden (zie punt 1):

Config.extraPlugins = "confighelper"; config.placeholder = "Onze tekst

8. Smileys.

De plug-in Smiley invoegen is verantwoordelijk voor glimlachen in CKEditor en is opgenomen in het standaardpakket - Volledig pakket.

Zo zien de smileys er uit de doos uit:

Om ze door uw eigen te vervangen, moet u het pad naar de map met afbeeldingen smiley_path opgeven in de configuratie (zie stap 1):

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

Voer de namen in van de bestanden (afbeeldingen) die worden weergegeven smiley_images:

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

En beschrijving (beweeg over beschrijving) smiley_descriptions

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

U kunt ook opgeven in hoeveel kolommen smileys moeten worden weergegeven in (standaard: 8) smiley_columns

Configuratie.smiley_columns = 6;

Dit is wat ik kreeg

9. Spellingcontrole van de browser.

Zoals UksusoFF in CKEditor schreef, is de spellingcontrole van de browser uitgeschakeld. Om deze uitschakeling uit te schakelen (een beetje een tautologie), moet je in de configuratie schrijven:

Config.disableNativeSpellChecker = false;

	10. Contextmenu.
	Wanneer u in CKEditor op RMB drukt, wordt een contextmenu geopend, niet het oorspronkelijke browsermenu
	CKEditor 4 - WYSIWYG-artikeleditor. Hiermee kunt u flexibele tekstopmaak uitvoeren, inclusief het werken met stijlen, lijsten, koppelingen, afbeeldingen, enz.
	Interface
	Figuur 1. Editorvenster
	Het WYSIWYG-editorvenster bevat de volgende knoppenpanelen:
	Van weergavemodus wisselen
	Afdrukken en kiezen van een artikelsjabloon
	Werken met het klembord (knippen, kopiëren, plakken, ongedaan maken)
	Zoeken en vervangen
	Formulieren maken
	Een opmaakstijl selecteren
	Selecteer alineaopmaak
	Lettertype selectie
	Lettergrootte selecteren
	Tekst- of achtergrondkleur selecteren
	Spellingscontrole
	Extra weergavemogelijkheden (blokken tonen en uitvouwen)

Het onderste paneel van het editorvenster bevat informatie over de huidige tag en tekststatistieken:

Van weergavemodus wisselen

Het paneel voor het schakelen tussen de weergavemodi van de editor bevat de volgende knoppen:

Afdrukken en kiezen van een artikelsjabloon

Het print- en artikelsjabloonselectiepaneel bevat de volgende knoppen:

Het artikel afdrukken op een printer. Nadat u op deze knop heeft geklikt, wordt een standaarddialoogvenster geopend waarin u wordt gevraagd een printer te selecteren en de tekst van het artikel af te drukken.

Artikelsjabloon selecteren: Afbeelding en titel – artikelsjabloon met titel, afbeelding en tekst Vreemde sjabloon – een artikelsjabloon waarvan de tekst in twee kolommen is verdeeld Tekst en tabel – een artikelsjabloon met een titel, tabel en tekst Een sjabloon is een vooraf gedefinieerde HTML-opmaakcode voor een toekomstig artikel. De beschrijving van de sjablonen staat in het bestand “plugins/templates/templates/default.js”. U kunt aangepaste sjablonen aan dit bestand toevoegen of een apart bestand met sjablonen maken en CKEditor configureren om ermee te werken.

Werken met het klembord

De volgende bewerkingen voor het werken met het klembord zijn beschikbaar in de editor:

	Knop "Knippen". Knipt het geselecteerde gedeelte van het artikel en plaatst het op het klembord.
	Knop Kopiëren. Kopieert het geselecteerde fragment van het artikel en plaatst het op het klembord.
	Knop "Invoegen". Plakt de inhoud van het klembord in het artikel. Als tekst wordt geplakt vanuit externe toepassingen zoals MS Office, worden bij het plakken alle opmaakgerelateerde tags meegenomen. De meeste van deze tags zijn onnodig en moeten worden verwijderd, waardoor het moeilijk wordt om het artikel te bewerken. Daarom wordt aanbevolen om deze knop alleen te gebruiken voor het invoegen van niet-opgemaakte teksten.
	Knop "Alleen tekst invoegen". Vergelijkbaar met de knop "Invoegen". Wanneer u een fragment van een artikel vanaf het klembord plakt, wordt de opmaak ervan volledig verwijderd.
	Knop "Invoegen vanuit Word". Vergelijkbaar met de knop "Invoegen". Wordt gebruikt als u de opmaak van het ingevoegde fragment wilt behouden. Door te plakken blijft de weergave van de tekst optimaal behouden en wordt onnodige opmaak verwijderd. Aanbevolen voor gebruik bij het kopiëren van tekst uit MS Word of andere MS Office-toepassingen.
	Knop Annuleren. Wordt gebruikt om de laatste aangebrachte wijziging ongedaan te maken.
	Knop "Herhalen". Wordt gebruikt om de laatste ongedaan gemaakte wijziging ongedaan te maken.

Zoeken en vervangen

Het paneel Zoeken en vervangen bevat de volgende knoppen:

Zoekopdracht

Wanneer u op de knop “Zoeken” klikt, wordt een zoekvenster geopend:

Voer in het veld “Zoeken” het gewenste tekstfragment in.

De volgende opties zijn beschikbaar:

• Door de hele tekst heen. Als de optie is ingeschakeld, wordt de zoekopdracht voortgezet vanaf het begin wanneer het einde van het artikel is bereikt. Als de optie is uitgeschakeld, stopt de zoekopdracht wanneer het einde van het artikel is bereikt.

Om een ​​zoekopdracht uit te voeren, moet u het fragment invoeren dat u zoekt, de gewenste zoekopties inschakelen en op de knop “Zoeken” klikken. De redacteur voert een zoekopdracht uit en markeert het eerste gevonden fragment in de tekst van het artikel. Elke keer dat u opnieuw op de knop “Zoeken” drukt, zoekt de editor verder door de tekst en markeert het volgende gevonden fragment.

Vervanging

Wanneer u op de knop “Vervangen” klikt, wordt een venster voor het vervangen van tekstfragmenten geopend:

Voer in het veld “Zoeken” het gewenste tekstfragment in. In het veld “Vervangen door” de tekst waarmee u het gezochte fragment wilt vervangen.

De volgende opties zijn beschikbaar:

• Hoofdlettergevoelig. Als de optie is ingeschakeld, wordt bij het zoeken rekening gehouden met de hoofdletters en kleine letters van het gezochte fragment.
• Gewoon het hele woord. Als de optie is ingeschakeld, zoekt de editor naar het ingevoerde fragment als een heel woord. De zoekresultaten bevatten geen woorden waarvan het ingevoerde fragment deel uitmaakt.
• Door de hele tekst heen. Als de optie is ingeschakeld, wordt de zoekopdracht voortgezet vanaf het begin wanneer het einde van het artikel is bereikt. Als de optie is uitgeschakeld, stopt de zoekopdracht wanneer het einde van het artikel is bereikt.

Om een ​​vervanging uit te voeren, moet u de velden “Zoeken” en “Vervangen door” invullen, de vereiste zoekopties inschakelen en op de knop “Vervangen” of “Alles vervangen” klikken. Wanneer u op de knop “Vervangen” klikt, zoekt en vervangt de editor het eerste gevonden fragment in de tekst van het artikel. Elke keer dat u nogmaals op de knop ‘Vervangen’ klikt, zoekt de editor verder in de tekst en vervangt het volgende gevonden fragment.
Wanneer u op de knop “Alles vervangen” klikt, zoekt en vervangt de redacteur onmiddellijk het gewenste fragment door de gehele tekst van het artikel.

Formulieren maken

Formulieren zijn zo ontworpen dat de gebruiker gegevens in een browservenster kan invoeren, naar de verwerker kan overbrengen en, indien nodig, de verwerkingsresultaten kan weergeven. Bijvoorbeeld: gebruikersregistratieformulier, feedbackformulier, etc.

Het formulieraanmaakpaneel bevat de volgende knoppen:

	Knop "Formulier". Wordt gebruikt om een ​​formulier in een artikel in te voegen. In de HTML-code komt het formulier overeen met de formuliertag.
	Knop "Selectievakje". Wordt gebruikt om selectievakjes (selectievakjes, vinkjes) in een formulier of artikel in te voegen.
	Keuzerondje. Wordt gebruikt om keuzerondjes (radio buttons) in een formulier of artikel in te voegen.
	Knop voor tekstveld. Wordt gebruikt om een ​​tekstinvoerveld van één regel in te voegen.
	Knop voor tekstveld met meerdere regels. Wordt gebruikt om een ​​tekstinvoerveld van meerdere regels in te voegen.
	Knop "Vervolgkeuzelijst". Wordt gebruikt om een ​​vervolgkeuzelijst in te voegen.
	Knop "Knop". Wordt gebruikt om een ​​knop in een formulier of artikel in te voegen.
	"Afbeeldingsknop." Wordt gebruikt om een ​​afbeelding in te voegen die als knop kan worden gebruikt.
	Knop "Verborgen veld". Wordt gebruikt om een ​​verborgen veld in een formulier of artikel in te voegen.

Formulier

Wanneer u op de knop “Formulier” klikt, wordt het instellingenvenster voor het nieuwe formulier geopend.

Het venster met formulierinstellingen bevat de volgende velden:

Naam	Een willekeurige vormnaam. In de HTML-code – de naamparameter.
Actie	De URL naar het programma of document dat de in het formulier ingevoerde gegevens verwerkt. In de HTML-code – de actieparameter.
Identificatie	Unieke identificatie van het formulier. In de HTML-code – de id-parameter.
Codering	Selecteren hoe formuliergegevens moeten worden gecodeerd. In HTML-code – de enctype-parameter. Beschikbare waarden: tekst/plain – spaties worden vervangen door een “+” teken, letters en andere symbolen worden niet gecodeerd; multipart/form-data – gegevens zijn niet gecodeerd. Gebruikt bij het verzenden van bestanden via een formulier; application/x-www-form-urlencoded – spaties worden vervangen door een “+” teken, andere tekens dan de Latijnse lay-out (letters van het Russische alfabet, enz.) worden gecodeerd met hun hexadecimale waarden.
Doel	Een venster of frame selecteren waarin de formuliergegevensverwerker de verwerkingsresultaten zal weergeven. In de HTML-code – de doelparameter. Beschikbare waarden: Nieuw venster (_blank) – toont de resultaten in een nieuw browservenster; Hoofdvenster (_top) – negeert frames en geeft resultaten weer in een volledig browservenster. Als er geen frames zijn, werkt het op dezelfde manier als _self (zie hieronder); Huidig ​​venster (_self) – geeft resultaten weer in het huidige venster; Bovenliggend venster (_parent) – geeft resultaten weer in het bovenliggende frame. Als er geen frames zijn, werkt _self op dezelfde manier.
Methode	Het selecteren van de te gebruiken HTTP-verzoekmethode. In HTML-code – de methodeparameter. Beschikbare waarden: GET – de URL van de opgeroepen handler wordt gebruikt om gegevens over te dragen. De verzonden gegevens worden weergegeven in de adresbalk van de browser. De hoeveelheid overgedragen gegevens wordt beperkt door de maximaal toegestane lengte van de adresbalk van de browser; POST – de hoofdtekst van een webbrowserverzoek aan de server wordt gebruikt om gegevens over te dragen. De verzonden gegevens worden niet weergegeven in de browser. Het volume van de overgedragen gegevens is niet beperkt. Met deze methode kunt u bestanden overbrengen.

Selectievakje

Een selectievakje is ontworpen om besturingselementen weer te geven die een eigenschap of optie in- of uitschakelen. Zo'n element kan twee waarden aannemen: ja of nee. In de HTML-code komt dit element overeen met de input type="checkbox" tag. Wanneer u op de knop “Checkbox” klikt, wordt het instellingenvenster voor het nieuwe element geopend.

Het instellingenvenster voor het element “Checkbox” bevat de volgende velden:

• Naam - willekeurige naam van het element. In HTML-code – de naamparameter;
• Waarde - fungeert als een unieke identificatie voor het element. In HTML-code – de waardeparameter;
• Geselecteerd - als de optie is ingeschakeld, wordt dit element standaard gemarkeerd.

Keuzerondje

Het element “Keuzerondje” is ontworpen om een ​​groep waarden weer te geven met de mogelijkheid om er slechts één te selecteren. Die. elementen binnen een groep sluiten elkaar wederzijds uit. Elk element kan een van de twee waarden aannemen: ja of nee. In de HTML-code komt dit element overeen met de input type="radio" tag. Wanneer u op de knop “Keuzerondje” klikt, wordt het instellingenvenster voor het nieuwe element geopend.

Het instellingenvenster voor het element “Radio Button” bevat de volgende velden:

• Elementen binnen een groep moeten dezelfde naam hebben.
• Waarde - fungeert als een unieke identificatie voor het element. In de HTML-code – de waardeparameter.
• Geselecteerd - als de optie is ingeschakeld, wordt dit element standaard gemarkeerd. Binnen een groep mag deze eigenschap slechts voor één element worden ingeschakeld. Als het voor meerdere elementen is ingeschakeld, wordt alleen het laatste gemarkeerd.

Tekstveld

Het element “Tekstveld” is bedoeld voor de gebruiker om een ​​tekstreeks in te voeren. In de HTML-code komt dit element overeen met de input type="text" tag. Wanneer u op de knop “Tekstveld” klikt, wordt het instellingenvenster voor het nieuwe veld geopend.

• Naam - willekeurige naam van het element. In de HTML-code – de naamparameter.
• Waarde - Bevat de tekst die wordt weergegeven in het standaardtekstveld. In de HTML-code – de waardeparameter.
• Veldbreedte (in tekens) - de lengte van het tekstveldinvoergebied in tekens. In de HTML-code – de parameter size.
• Max. aantal tekens - de maximale lengte van de tekenreeks die in het tekstveld kan worden ingevoerd, in tekens. In HTML-code – de parameter maxlength.
• Inhoudstype - Het inhoudstype van het tekstveld. In HTML-code – de typeparameter. Voordat gegevens naar de server worden verzonden, wordt gecontroleerd of deze overeenkomen met het opgegeven type.

Beschikbare inhoudstypen:

• E-mail – het tekstveld bevat het e-mailadres;
• Wachtwoord – het tekstveld bevat het wachtwoord;
• Zoeken – het tekstveld is bedoeld voor het invoeren van de gezochte tekst;
• Telefoonnummer – het tekstveld bevat een telefoonnummer;
• Tekst – het tekstveld bevat een gewone regel;
• Link – Het tekstvak bevat de URL.

Tekstveld met meerdere regels

Het element “Multiline tekstveld” is bedoeld voor gebruikersinvoer van tekst die uit meerdere regels bestaat. In de HTML-code komt dit element overeen met een gepaarde textarea-tag. Wanneer u op de knop “Meerregelig tekstveld” klikt, wordt het instellingenvenster voor het nieuwe veld geopend.

Het instellingenvenster voor het element “Tekstveld” bevat de volgende velden:

• Naam - willekeurige naam van het element. In de HTML-code – de naamparameter.
• Kolommen - veldbreedte in tekens. In de HTML-code – de cols-parameter.
• Rijen - veldhoogte in rijen. In de HTML-code – de parameter rijen.
• Waarde - Bevat de tekst die wordt weergegeven in het standaardtekstveld.

Vervolgkeuzelijst

Het element Dropdownlijst is ontworpen om een ​​meerkeuzelijst of vervolgkeuzelijst weer te geven. In de HTML-code komt dit element overeen met een gepaarde select-tag. Lijstelementen worden gekoppeld aan een gepaarde optietag. Wanneer u op de knop “Vervolgkeuzelijst” klikt, wordt het instellingenvenster voor de nieuwe lijst geopend.

Het instellingenvenster voor meerdere selectielijsten bevat de volgende velden:

• Naam - willekeurige naam van het element. In de HTML-code – de naamparameter.
• Waarde - bevat de waarde van het lijstitem dat standaard is geselecteerd. In de HTML-code voor dit element is de optietag ingesteld op Selected="selected" .
• Grootte - de hoogte van het weergegeven lijstgebied in lijnen. Als de grootte gelijk is aan één, wordt een vervolgkeuzelijst weergegeven. Als de grootte niet is opgegeven, is de lijstweergave afhankelijk van de optie Meerdere selecties toestaan.

Groep parameters “Beschikbare opties”:

• Tekst - invoerveld voor de weergegeven tekst van het lijstitem. Ingevoerd samen met het veld “Waarde”. Om een ​​“Tekst – Waarde”-paar aan de lijst toe te voegen, klikt u op de knop “Toevoegen”.
• Waarde - invoerveld voor de waarde van het lijstitem dat naar de server wordt verzonden. Ingevoerd in combinatie met het veld 'tekst'. Om een ​​“Tekst – Waarde”-paar aan de lijst toe te voegen, klikt u op de knop “Toevoegen”.
• Toevoegen - knop om het ingevoerde “Tekst – Waarde”-paar aan de lijst toe te voegen.
• Bewerken - knop om het geselecteerde lijstitem te wijzigen. Om te wijzigen, moet u het gewenste element in de lijstinstellingen selecteren, de inhoud van de velden “Tekst” en “Waarde” bewerken en op de knop “Wijzigen” klikken. Het geselecteerde element wordt dienovereenkomstig bijgewerkt.
• Verhogen - knop om het geselecteerde lijstitem één niveau hoger te verplaatsen.
• Lager - knop om het geselecteerde lijstitem één niveau lager te verplaatsen.
• Markeren als geselecteerd - wanneer u op de knop klikt, wordt het geselecteerde lijstitem standaard gemarkeerd als geselecteerd. De waarde van het element wordt weergegeven in het veld "Waarde" (zie hierboven). In de HTML-code voor dit element is de optietag ingesteld op Selected="selected" .
• Verwijderen - knop om het geselecteerde item uit de lijst te verwijderen.
• Meervoudige selectie toestaan ​​- als de eigenschap is ingeschakeld, kunt u met de Ctrl-toets meerdere lijstitems selecteren. Als de lijstgrootte niet is opgegeven en de eigenschap is uitgeschakeld, wordt er een vervolgkeuzelijst weergegeven. Als de lijstgrootte niet is opgegeven en de eigenschap is ingeschakeld, wordt de lijstgrootte ingesteld op vier.

Het einde van het artikel volgt...

Vandaag zullen we uitzoeken hoe we de zeer populaire inhoudseditor CKEditor kunnen integreren en configureren in een standaard ASP.NET MVC-applicatie. We zullen ook de even populaire bestandsbeheerder CKFinder installeren en configureren.

Officiële ontwikkelaarspagina: https://ckeditor.com/

CKEditor is tegenwoordig een zeer populaire visuele WYSIWYG HTML-inhoudseditor.

CKFinder is een bestandsbeheerder waarmee u toegang krijgt tot het bestandssysteem op de server en bestanden kunt beheren vanuit de browser van de klant.

Meestal komen beide componenten samen, dat wil zeggen dat de bestandsbeheerder in de editor is geïntegreerd.

CKEditor is beschikbaar in twee versies. Versie 4 is ouder en daarom wijdverspreider. En versie 5, nieuw, die een modulaire architectuur implementeert, met veel innovaties.

CKEditor instellen

Ik gebruik versie 4 in mijn projecten, de functionaliteit ervan is voldoende om eventuele problemen op te lossen. Laten we het archief downloaden met de editor en toevoegen aan ons project.

Het toevoegen van CKEditor is heel eenvoudig. Dit gebeurt in verschillende fasen:

we verbinden de JS-bibliotheek via een tag met de pagina;

we definiëren een HTML-tag die zal worden gebruikt als container voor CKEditor;

gebruik de CKEDITOR.replace() -methode;

om de editor te verbinden met een eerder gedefinieerd .

) document.addEventListener("DOMContentLoaded", functie (gebeurtenis) ( var editor = CKEDITOR.replace("content1"); ));

Het is vermeldenswaard dat er veel plug-ins voor CKEditor zijn die de standaardfunctionaliteit uitbreiden. U kunt ook zelf plug-ins schrijven (dit proces wordt gedetailleerder beschreven in de officiële documentatie op de website). Laten we een plug-in aan de editor toevoegen waarmee u video van YouTube-videohosting op de pagina kunt insluiten.

Op het moment van schrijven zijn alle plug-ins te vinden in een apart gedeelte op de site. De plug-in waarin we geïnteresseerd zijn, bevindt zich op: https://ckeditor.com/cke4/addon/youtube

Hierna verschijnt er een nieuwe knop op de editorwerkbalk waarmee u met de nieuwe plug-in kunt werken.

CKFinder instellen

Laten we nu eens kijken naar de CKFinder-bestandsbeheerder. Omdat onze bestanden (bijvoorbeeld afbeeldingen) zich op de server bevinden, zullen we dit onderdeel niet alleen op de client moeten aansluiten, dat wil zeggen in de browser van de gebruiker, maar ook op de server moeten configureren, en specifiek enkele bibliotheken moeten verbinden en implementeer verschillende methoden.

Officiële documentatie voor het opzetten van een connector voor ASP.NET-applicaties vindt u op: https://ckeditor.com/docs/ckfinder/ckfinder3-net/

In tegenstelling tot de CKEditor-editor, die we op de website hebben geconfigureerd en handmatig hebben gedownload, kunnen we CKFinder rechtstreeks in Visual Studio toevoegen aan het project via . De minimale set pakketten die nodig is voor het werk ziet er als volgt uit:

CKSource.CKFinder - JavaScript-client, maakt verbinding aan de clientzijde

CKSource.CKFinder.Connector.Core - de hoofd- en sleutelbibliotheek die ervoor zorgt dat de CKFinder-connector op de server werkt

CKSource.CKFinder.Connector.Config - Met deze bibliotheek kunt u CKFinder configureren via een gemeenschappelijk . Merk op hoe het configuratiebestand verandert na installatie van dit pakket; nu zijn alle instellingen voor CKFinder aanwezig.

CKSource.CKFinder.Connector.Host.Owin - met deze bibliotheek kunt u een connector verbinden als een OWIN-component in een applicatie. Aan de serverkant werkt CKFinder precies volgens deze specificatie, d.w.z. Open webinterface voor .NET

Microsoft.Owin.Host.SystemWeb - installeer onmiddellijk de OWIN-host of -server

CKSource.FileSystem.Local - dit onderdeel voegt ondersteuning toe voor het werken met het bestandssysteem op de server

Nadat u alle benodigde componenten hebt geïnstalleerd, kunt u beginnen met het instellen van de serverzijde.

Ten eerste vereist CKFinder dat alleen geauthenticeerde gebruikers toegang hebben tot het bestandssysteem, dat wil zeggen dat elke keer dat we via deze bestandsbeheerder een verzoek indienen bij de server, we moeten vertellen of de gegeven gebruiker toegang heeft tot bestanden op de server of niet. .

Om dit te doen, moeten we een speciale interface implementeren, en daarin een methode die alle inkomende verzoeken verifieert.

CKFinderAuthenticator.cs

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

In het bovenstaande voorbeeld retourneren we elke keer eenvoudigweg een nepgebruiker die altijd is geverifieerd (true flag) en geen rollen heeft (leeg blad). Dat wil zeggen dat we altijd rechten hebben op toegang tot het bestandssysteem. In een echt project moet dit probleem uiteraard serieuzer worden aangepakt en moet deze methode worden gecombineerd met het bestaande gebruikersauthenticatie- en autorisatiesysteem.

Naamruimte CKEditor ( public class Startup ( public void Configuration (IAppBuilder-app) ( // registreer het bestandssysteem voor de connector FileSystemFactory.RegisterFileSystem (); // declareer een route in de applicatie en wijs deze toe aan de connector // de JS-bibliotheek van de client CKFinder verwacht de connector langs deze route-app te zien.Map("/ckfinder/connector", SetupConnector ) //declare een methode voor het instellen en initialiseren van de connector private static void SetupConnector(IAppBuilder app) ( //create instances van de benodigde klassen var connectorFactory = nieuwe OwinConnectorFactory(); var connectorBuilder = nieuwe ConnectorBuilder(); var customAuthenticator = nieuwe CKFinderAuthenticator(); eerder gedefinieerde authenticator.SetRequestConfiguration((request, config) = > ( config.LoadConfig(); ) //definieer de configuratie voor elk individueel verzoek //maak een exemplaar van de connector var connector = connectorBuilder.Build(connectorFactory);

// voeg een connector toe aan de pijplijn-app.UseConnector(connector);

@using (Html.BeginForm("Index", "Home", FormMethod.Post)) ( ) document.addEventListener("DOMContentLoaded", function (event) ( var editor = CKEDITOR.replace("content1"); CKFinder.setupCKEditor (editor));

Als alle scripts correct zijn aangesloten en de connector aan de serverzijde is geconfigureerd, hebben we via CKFinder toegang tot het bestandssysteem vanuit de browser van de gebruiker.

Afhankelijk van de connectorinstellingen in het Web.config-bestand kunnen we de machtigingen voor het manipuleren van bestanden en mappen wijzigen (maken, verplaatsen, enz.).

Houd er rekening mee dat we alleen naar de basisconfiguratie van CKFinder hebben gekeken. Daarnaast kunt u logboekregistratie, bestandscaching, verschillende plug-ins toevoegen (bijvoorbeeld een watermerk toevoegen aan gedownloade afbeeldingen), enz. Meer hierover kunt u lezen in de officiële documentatie.