Enligt min åsikt är CKEditor en av de bästa wysiwyg-redaktörerna för webbplatser. Nyligen det har dykt upp en hel del skratt i den för att förenkla användarens liv, vilket i slutändan kommer i vägen, till exempel ACF. Jag vet redan hur man redigerar och inaktiverar det. Men låt oss återgå till ämnet i vår artikel: hur man installerar plugins på CKEditor.

Jag ser två tillvägagångssätt här.

Först går vi till redaktörens webbplats och bygger om CKeditor för oss själva, inklusive plugins vi behöver. Detta görs enligt följande. Vi går till webbplatsen ckeditor.com, går till nedladdningsfliken. Välj sedan Eller låt mig anpassa CKEditor

Men i det här fallet visas inte alla plugins. För att inkludera några nya eller speciella plugins i din build, måste du bygga din build lite annorlunda. Gå till Add-ons -> Plug-ins och se följande rörliga meny till höger

När du klickar på knappen Lägg till i min redigerare läggs plugin till i sammansättningen. När du är klar klickar du på Bygg min redigerare och ersätter vår inbyggda redigerare med den genererade.

Det andra tillvägagångssättet är för dem som är intresserade av att själva fördjupa sig i koden.

På webbplatsen ckeditor.com, gå till sektionen tillägg->insticksprogram och klicka på önskat plugin.

Välj Ladda ner och följ instruktionerna från webbplatsen. För det mesta handlar de antingen om att du måste installera beroenden för ett givet plugin och registrera själva plugin i fältet konfigurationsfil config.js och plugin som installationsprogrammet är beroende av, separerade med kommatecken, till exempel,

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

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 efter dina önskemål. Dess användbarhet kommer från en aktiv community 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.

4.1- Ersätt Textarea-element med JavaScript

Ett enkelt exempel är att använda CKEditor.replace(..) för att ersätta via CKEditor .

replacebycode.html

Ersätt Textarea med kod Ersätt Textarea-element med hjälp av JavaScript-kod

Hej CKEditor

CKEDITOR.replace("editor1");

Se exempel:

Resultat av att köra exemplet:

4.2- Ersätt textområdeselement med namnklass

Med att ha attribut namn, och klassen ="ckeditor" kommer automatiskt att ersättas av CKEditor.

Text

replacebyclass.html

Ersätt textområden med klassnamn Ersätt textområdeselement med klassnamn

Hej CKEditor

Kör exemplet:

4.3- Skapa CKEditor med jQuery

Ett exempel på att skapa en CKEditor med JQuery.

jQuery Adapter - CKEditor Exempel $(document).ready(function() ( $("#editor1").ckeditor(); )); funktion setValue() ( $("#editor1").val($("input#val").val()); ) Skapa redigerare med jQuery

Hej CKEditor

Som du kan se ställs konfigurationer in av ett enkelt JavaScript-objekt som skickas till metoden create().

Ta bort funktioner

Bygger kommer med alla funktioner som ingår i distributionspaketet aktiverade som standard. De definieras som plugins för CKEditor.

I vissa fall kan du behöva ha olika redigeringsinställningar i din applikation, alla baserade på samma version. I det syftet, du behöver för att kontrollera de plugins som är tillgängliga i editorn vid körning.

I exemplet nedan tas Heading and Link-plugins bort:

// Ta bort några plugins från standardinställningen. ClassicEditor .create(dokument .querySelector("#editor" ), ( removePlugins : [ "Rubrik" , "Länk" ], verktygsfält : [ "fet" , "kursiv" , "bulletedList" , "numbereddList" , "blockQuote" ] )).catch(error => ( console .log(error); ));

Var försiktig när du tar bort plugins från CKEditor builds med hjälp av config.removePlugins . Om borttagna plugins gav verktygsfältsknappar, kommer standardkonfigurationen för verktygsfältet som ingår i en build att bli ogiltig. I sådana fall måste du tillhandahålla den uppdaterade verktygsfältskonfigurationen som i exemplet ovan.

Lista över plugins

Varje build har ett antal plugins tillgängliga. Du kan enkelt lista alla plugins som är tillgängliga i din build:

ClassicEditor.builtinPlugins.map(plugin => plugin.pluginName);

Lägger till komplexa funktioner

Eftersom CKEditor-byggen inte inkluderar alla möjliga funktioner, är det enda sättet att lägga till fler funktioner till dem att skapa en anpassad build.

Lägga till enkla (fristående) funktioner

Det finns ett undantag från varje regel. Även om det är omöjligt att lägga till plugins som har beroenden till @ckeditor/ckeditor5-core eller @ckeditor/ckeditor5-engine (som inkluderar nästan alla befintliga officiella plugins) utan att bygga om bygget, är det fortfarande möjligt att lägga till enkla, beroendefria plugins .

importera ClassicEditor från "@ckeditor/ckeditor5-build-classic" ; function MyUploadAdapterPlugin ( editor ) ( editor.plugins.get("FileRepository" ).createUploadAdapter = function ( loader ) ( // ... ); ) // Ladda den anpassade uppladdningsadaptern som ett plugin för editorn. ClassicEditor .create(dokument .querySelector("#editor" ), ( extraPlugins : [ MyUploadAdapterPlugin ], // ... )) .catch(error => ( console .log(error); )); Inställning av verktygsfält

I builds som innehåller verktygsfält är en optimal standardkonfiguration definierad för den. Du kan dock behöva ett annat verktygsfältsarrangemang, och detta kan uppnås genom konfiguration.

Varje redigerare kan ha olika konfigurationsschema för verktygsfältet, så det rekommenderas att du kontrollerar dess dokumentation. I vilket fall som helst kan följande exempel ge dig en allmän uppfattning:

ClassicEditor .create(dokument .querySelector("#editor" ), ( verktygsfält : [ "fet" , "kursiv", "länk" ] )) .catch(error => (konsol .log(error); ));

Ovanstående är en strikt UI-relaterad konfiguration. Att ta bort ett verktygsfältsobjekt tar inte bort funktionen från redigerarens interna funktioner. Om ditt mål med verktygsfältskonfigurationen är att ta bort funktioner är den rätta lösningen att också ta bort deras respektive plugins. Kolla ovan för mer information.

Lista tillgängliga objekt

Du kan använda följande utdrag för att hämta alla verktygsfältsobjekt som är tillgängliga i din redigerare:

Array .from(editor.ui.componentFactory.names());

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 kapitel Plugins En aktiveringskryssruta visas. Slå på, spara, kolla.

3. Infoga länkar. Ut ur lådan innehåller dialogrutan för länkinfogning 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.

Det enda jag vill tillägga är att plugin-programmet Enhanced Image kräver ytterligare två plugins Widget och Lineutils.

Jag kunde inte förstå varför pluginet inte startade förrän jag tittade på loggen

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. 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"; // текст нашего placeholder !}

8. Smileys. Insticksprogrammet Insert Smiley är ansvarigt för leenden i CKEditor; det 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 visas smileys i (standard: 8) smiley_columns

Config.smiley_columns = 6;

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 en snabbmeny, inte den inbyggda webbläsarmenyn

Nedladdningsalternativ

Det finns flera alternativ för att ladda ner CKEditor 5-byggen:

När du har laddat ner redigeraren, hoppa till Basic API-guiden för att se hur du skapar redigerare.

CDN

Bygger kan laddas inuti sidor direkt från , vilket är optimerat för supersnabb innehållsleverans över hela världen. När du använder CDN behövs faktiskt ingen nedladdning.

npm

Alla builds släpps på npm. Använd den här söklänken för att se alla officiella byggpaket tillgängliga i npm.

Att installera en build med npm är lika enkelt som att anropa ett av följande kommandon i ditt projekt:

Npm install --save @ckeditor/ckeditor5-build-classic # Eller: npm install --save @ckeditor/ckeditor5-build-inline # Eller: npm install --save @ckeditor/ckeditor5-build-balloon # Eller: npm install --save @ckeditor/ckeditor5-build-balloon-block # Eller: npm install --save @ckeditor/ckeditor5-build-decoupled-document

CKEditor kommer då att vara tillgänglig på node_modules/@ckeditor/ckeditor5-build-/build/ckeditor.js . Den kan också importeras direkt till din kod med require("@ckeditor/ckeditor5-build-") .

Ladda ner zip

Gå till och ladda ner din föredragna version. Du kan till exempel ladda ner filen ckeditor5-build-classic-1.0.0.zip för den klassiska editorns build.

Extrahera .zip-filen till en dedikerad katalog i ditt projekt. Det rekommenderas att inkludera editorversionen i katalognamnet för att säkerställa korrekt cache-ogiltighet när en ny version av CKEditor har installerats.

Inkluderade filer

• ckeditor.js – Redaktörspaketet som är färdigt att använda, som innehåller editorn och alla plugins.
• ckeditor.js.map – Källkartan för redaktörspaketet.
• translations/ – Redaktörens UI-översättningar (se Ställa in UI-språk).
• README.md och LICENSE.md

Laddar API

Efter att ha laddat ner och installerat en CKEditor 5-build i din applikation är det dags att göra editorns API tillgängligt på dina sidor. För det ändamålet räcker det att ladda API-ingångsskriptet:

När CKEditor-skriptet har laddats kan du