STŪRAINI KOMPONENTI QUILL RICH TEXT EDITOR

Stūraini komponenti Quill Rich Text Editor

ngx-quill ir leņķiskais (> = 2) modulis Quill Rich teksta redaktors kas satur visas nepieciešamās sastāvdaļas.

Ziedot/atbalstīt

Ja jums patīk mans darbs, lūdzu, atbalstiet to. Ziedojumi projektam vienmēr tiek gaidīti :)

Piemēri

Uzlabota demonstrācija
- integrācija spalvas-emocijzīmes
- integrācija spalvu pieminēšana
- integrācija quill-image-resize
- pielāgots vārdu skaitīšanas modulis
- pielāgota rīkjosla ar pielāgotiem fontiem un formātiem, rīkjoslas pozīcija
- parādiet atšķirības starp satura dezinfekciju un dezinfekciju, ja jūsu satura formāts ir html
- dažādu satura formātu izmantošana
- veidņu vadītas un reaģējošas formas
- kods + sintakses izcelšana
- formulas
- pielāgotas taustiņu iesiešanas, piem. Shift + b treknrakstam
- dinamiskie stili un vietturis
- pārslēgties tikai lasīšanai
- burbuļu rīkjosla
- aktivizēt formātus pēc redaktora inicializācijas, piem. rtl virziens
- iesniegt quilljs saturu ar | _+_ | un | _+_ | komponents
Jonu demonstrācija
Stūrains universāls

Saderība ar leņķa versijām

Stūraina	ngx-quill	atbalstīts/uzturēts
v9	> = 8.0.0	līdz 2021. gada 6. augustam
v8	> = 5.2.0,<9	līdz 2020. gada 28. novembrim
v7	> = 4.0.0,<8.0.0	Nē

Uzstādīšana

quill-view
projektiem, kuros tiek izmantots Angular
instalēt | _+_ |, | _+_ |, | _+_ |, | _+_ |, | _+_ | un | _+_ | - ngx-quill vienaudžu atkarības
index.html iekļaujiet motīvu stilus: bubble.css, snow.css no quilljs vai pievienojiet tos css/scss failos, izmantojot | _+_ | paziņojumus vai pievienojiet tos ārējam stilam veidošanas procesā.

Standarta tīmekļa pakotnei, angular-cli un tsc būvēm

imports | _+_ | no | _+_ |:

quill-view-html

pievienot | _+_ | jūsu NgModule importam:

npm install ngx-quill

izmantot | _+_ | veidnēs, lai pievienotu noklusējuma spalvu redaktoru
neaizmirstiet savā būvprocesā, modulī vai indeksā.html iekļaut quill + theme css!
būvēm ar angular-cli> = 6 tikai pievienojiet quilljs saviem skriptiem vai angular.json skriptu sadaļai, ja jums tas ir nepieciešams kā globāls :)!

PADOMS: Ja izmantojat slinkus ielādes moduļus, jums jāpievieno | _+_ | importēšanai savā saknes modulī, lai pārliecinātos, ka | _+_ | pakalpojumi ir reģistrēti.

Stūrains universāls

ngx-quill> = v10

Te nav ko darīt :)

ngx-quill v9

QuillJS (1.x) tieši izmanto | _+_ |, | _+_ |, | _+_ | un | _+_ | pārlūkprogrammas kontekstā, kad to pieprasāt vai importējat. Lai ssr darbotos, jums ir jāizspēlē tās servera pusē.

leņķiski novērojams pret solījumu

Mainiet savu | _+_ | uz kaut ko līdzīgu

npm install [email protected]

| _+_ | un | _+_ | ngx-quill komponents veic pārējo, lai jūs pārbaudītu, vai tas darbojas servera vai pārlūkprogrammas pusē. Servera pusē abas sastāvdaļas netiks renderētas vai neko nedarīs, jo tās ir atkarīgas no QuillJS un tā tālāk no reālās pārlūkprogrammas vides.

Padoms: Komplekts | _+_ | globālajā konfigurācijā, lai novērstu quilljs brīdinājumus.

Ja vēlaties atveidot redaktora html saturu SEO mērķiem, apskatiet | _+_ | komponents, kas vienkārši atveido html saturu :).

Global Config

Importējot | _+_ |, ir iespējams iestatīt pielāgotus noklusējuma moduļus un Quill konfigurācijas opcijas.

@angular/core

Ja vēlaties izmantot | _+_ | modulim sekojiet Sintakses izcelšanas moduļa ceļvedis .

Skat Quill konfigurācija lai iegūtu pilnu konfigurācijas opciju sarakstu.

| _+_ | eksportē | _+_ | ja vēlaties tos pagarināt :).

Pielāgoti moduļi un iespējas/formāti

izmantojiet customOptions, lai pievienotu, piemēram, pielāgotus fontu izmērus vai citas opcijas/formātus
moduļu pievienošanai un pārrakstīšanai izmantojiet customModules, piem. attēla izmēru maiņu vai savus moduļus

Novērst globālā reģistra brīdinājumus

Pēc noklusējuma, kad | _+_ | tiek izsaukts un jūs pārrakstāt jau esošu moduli, QuillJS reģistrē brīdinājumu. Ja nokārtojat | _+_ | vai | _+_ | ngx-quill reģistrē šos moduļus/opcijas/formātus jūsu vietā.

naudas lietotnes divu faktoru autentifikācija

Piemēram, leņķiskais universālais projekts jūsu | _+_ | un tā | _+_ | tiek izpildīts divreiz (1x servera pusē, 1x pārlūkprogrammā). QuillJS servera pusē darbojas izsmietā env, tāpēc tiek plānots, ka katrs reģistrs darbojas divreiz.

Lai nomāktu gaidītos brīdinājumus, varat tos izslēgt, nokārtojot | _+_ |.

QuillEditorComponent

Padoms

Ngx-quill atjaunina ngModel vai formControl katram | _+_ | izmaiņas redaktorā. Pārbaudiet QuillJS Avots parametrs | _+_ | notikums.

reaģēt vietējās cilnes skatījumā

Ja izmantojat redaktora atsauci, lai tieši manipulētu ar redaktora saturu un vēlaties atjaunināt modeli, dodiet | _+_ | kā QuillJS api metožu avota parametru.

Config

ngModel - iestatiet veidņu veidlapām sākotnējo vērtību vai atļaujiet divvirzienu datu saistīšanu
formControl/formControlName - iestatiet sākotnējo vērtību vai atļaujiet divvirzienu datu saistīšanu reaktīvajām formām
readOnly (true | false), ja lietotājs var rediģēt saturu
formāti - atļauto formātu/grupu masīvs
formāts - modeļa formāts - noklusējums: | _+_ |, vērtības: | _+_ |, iestata modeļa vērtības tipu - html = html virkne, objekts = quill operācijas objekts, json = quill operācija json, teksts = vienkāršs teksts
moduļi - konfigurējiet/atspējojiet spalvas moduļus, piemēram, rīkjoslu vai pievienojiet pielāgotu rīkjoslu, izmantojot html elementu.

@angular/common

tēma - burbulis/sniegs, noklusējums ir | _+_ |
sanitize - izmanto angulars DomSanitizer html vērtību sanitizēšanai - noklusējums: | _+_ |, Būla (tikai formātam = html)
stili - iestatiet stilu objektu, piem. | _+_ |
vietturis - viettura teksts, noklusējums ir | _+_ |
robežas - redaktora robeža, noklusējums | _+_ |
maxLength - pievienojiet apstiprinājumu maksimālajam garumam - iestatiet modeļa stāvokli uz | _+_ | un pievienojiet | _+_ | klase
minLength - pievienojiet validāciju minlength - iestatiet modeļa stāvokli uz | _+_ | un pievienojiet | _+_ | klase, iestatiet nederīgu tikai tad, ja redaktora teksts nav tukšs -> ja vēlaties pārbaudīt, vai teksts ir nepieciešams -> izmantojiet nepieciešamo atribūtu
trimOnValidation - apdares beigu posms | vadošās jaunās rindas validācijas izpildei nepieciešamajam, minimālajam un maksimālajam garumam, noklusējums | _+_ |
obligāti - pievienojiet validāciju kā obligātu lauku - | _+_ | - noklusējums: nepatiesa, gaidāma Būla vērtība (bez virknēm!)
stingrs - noklusējums: true, iestata redaktoru stingrā režīmā
scrollingContainer - noklusējuma “.ql -editor”, ļauj iestatīt ritināšanas konteineru
izmantojiet customOptions, lai pievienotu, piemēram, pielāgotus fontu izmērus -> tas pārraksta šīs opcijas globāli !!!
moduļu pievienošanai un pārrakstīšanai izmantojiet customModules -> tas pārraksta šos moduļus globāli !!!
iespēja izveidot pielāgotu rīkjoslu, izmantojot projekcijas slotu | _+_ |:

@angular/forms

customToolbarPosition - ja strādājat ar pielāgotu rīkjoslu, varat mainīt pozīciju :). - noklusējums: | _+_ |, iespējamās vērtības | _+_ |, | _+_ |
atkļūdošana - iestatiet žurnāla līmeni | _+_ |, | _+_ |, | _+_ | vai | _+_ | lai deaktivizētu reģistrēšanu, noklusējums: | _+_ |
trackChanges - pārbaudiet, vai tikai | _+_ | (spalvas avota lietotājs) vai | _+_ | izmaiņām vajadzētu izraisīt modeļa atjaunināšanu, noklusējuma | _+_ |. Izmantojot | _+_ | nav ieteicams, tas rada dažas negaidītas blakusparādības.
saglabātWhitespace - noklusējums: nepatiesa - iespēja izmantot priekšatzīmi, nevis div -tagu satura rediģējamā apgabalā, lai saglabātu dublētus atstarpes | piesardzība, ja to lieto kopā ar sintakses spraudni Saistīts jautājums
klases - ar atstarpi atdalīts CSS klašu saraksts, kas tiks pievienots redaktora elementam

Pilns Quill rīkjoslas HTML

Izejas

onEditorCreated - redaktora instance
Izmantojiet šo izvadi, lai iegūtu redaktora instanci un izmantotu to tieši. Pēc tam, kad šī izvade ir izsaukta, komponents ir stabils un visi klausītāji ir piesaistīti

@angular/platform-browser

onContentChanged - teksts tiek atjaunināts

quill

onSelectionChanged - atlase tiek atjaunināta, aktivizēta arī onBlur un onFocus, jo atlase ir mainījusies

rxjs

onEditorChanged - tiek atjaunināts teksts vai atlase - neatkarīgi no avota

@import

vai

QuillModule

onFocus - redaktors ir fokusēts

ngx-quill

onBlur - redaktors ir izplūdis

import { QuillModule } from 'ngx-quill'

QuillViewComponent, QuillViewHTMLComponent & Redaktora satura prezentācija

Vairumā gadījumu, lai saglabātu saturu datu bāzē, backoffice tiek izmantots wysiwyg redaktors. No otras puses, šī vērtība jāizmanto, lai parādītu saturu lietotājam.

Vairumā gadījumu | _+_ | tiek izmantots formāts, taču QuillJS to neiesaka, jo tā nolūks ir būt stabils, viegli uzturējams redaktors. Tāpēc tas izmanto blotus un satura un darbības objektu attēlojumus.

Šo satura objektu ir viegli uzglabāt un uzturēt, jo nav nepieciešama HTML sintakses parsēšana. Tātad, pat strādājot ar to, ir ļoti viegli pārslēgties uz citu redaktoru.

kur es varu nopirkt ckb kriptonauda

| _+_ | nodrošina dažus palīga komponentus, lai parādītu quilljs saturu.

QuillViewComponent - QuillJS izmantošana satura renderēšanai

Kopumā QuillJS iesaka sava satura prezentēšanai izmantot QuillJS instanci. Vienkārši izveidojiet spalvu redaktoru bez rīkjoslas un tikai lasīšanas režīmā. Izmantojot dažas vienkāršas css rindas, varat noņemt noklusējuma apmali ap saturu.

Kā palīgs | _+_ | nodrošina komponentu, kurā var nodot daudzas opcijas | _+_ | piemēram, moduļi, formāts, formāti, customOptions, taču saturs tiek padarīts tikai lasāms un bez rīkjoslas. Imports ir | _+_ | ievadi, kur varat nodot redaktora saturu, kuru vēlaties parādīt.

Config

saturs - prezentējamais saturs
formāti - atļauto formātu/grupu masīvs
formāts - modeļa formāts - noklusējums: | _+_ |, vērtības: | _+_ |, iestata modeļa vērtības tipu - html = html virkne, objekts = quill operācijas objekts, json = quill operācija json, teksts = vienkāršs teksts
moduļi - konfigurējiet/atspējojiet spalvas moduļus
tēma - burbulis/sniegs, noklusējums ir | _+_ |
atkļūdošana - iestatiet žurnāla līmeni | _+_ |, | _+_ |, | _+_ | vai | _+_ | lai deaktivizētu reģistrēšanu, noklusējums: | _+_ |
izmantojiet customOptions, lai pievienotu, piemēram, pielāgotus fontu izmērus -> tas pārraksta šīs opcijas globāli !!!
moduļu pievienošanai un pārrakstīšanai izmantojiet customModules -> tas pārraksta šos moduļus globāli !!!
stingrs - noklusējums: true, iestata redaktoru stingrā režīmā
saglabātWhitespace - noklusējums: nepatiesa - iespēja izmantot priekšatzīmi, nevis div -tagu satura rediģējamā apgabalā, lai saglabātu dublētus atstarpes | piesardzība, ja to lieto kopā ar sintakses spraudni Saistīts jautājums

QuillModule

QuillViewHTMLComponent - izmantojot leņķisko [iekšējoHTML]

Lielākā daļa no jums izmantos | _+_ | formātā (pat tas nav ieteicams). Lai renderētu pielāgotu html ar leņķisko, jāizmanto | _+_ | atribūts.

Bet ir dažas nepilnības:

Ja izmantojat nodarbības, nevis ielādētu stilu, jums ir jāielādē quill css faili ( https://quilljs.com/guides/how-to-customize-quill/#class-vs-inline )
Izmantojot klases, izmantojiet tagu | _+_ | |, kuram ir | _+_ | atribūtu un pievienojiet | _+_ | klase. Aptiniet savu div citu | _+_ | -tag ar css klasēm | _+_ | un jūsu tēma, piem. | _+_ | .:

@NgModule({ imports: [ ..., QuillModule.forRoot() ], ... }) class YourModule { ... }

Angular ir html sanitārija, tāpēc tas noņems nepazīstamas vai neuzticamas jūsu HTML daļas - vienkārši atzīmējiet savu html kā uzticamu ( DomSanitizer )

Pēc tam jūsu saturam vajadzētu izskatīties tā, kā jūs gaidījāt.

Ja savā datu bāzē glabājat html, pārbaudiet savu aizmugures kodu, dažreiz arī aizmugures sistēmas noņem nevēlamus tagus;).

kā pagatavot mario no nulles

Kā palīgs | _+_ | nodrošina komponentu, kurā varat vienkārši nodot savu html virkni, un komponents dara visu, lai jūs to atveidotu:

pievienojiet nepieciešamās css klases
apiet html sanitāriju

Config

Kā ievadi varat iestatīt | _+_ | un pēc izvēles | _+_ | (noklusējums ir | _+_ |).

saturs - tiks parādīta html virkne
tēma - burbulis/sniegs, noklusējums ir | _+_ |

Drošības padoms

Leņķiskās veidnes sniedz zināmu pārliecību pret XSS visu klientu ievadīto līdzekļu dezinfekcijas veidā https://angular.io/guide/security#xss .

Ngx-quill komponenti nodrošina ievades parametru | _+_ | dezinficēt html virknes, kas nodotas kā | _+_ | vai | _+_ | uz sastāvdaļu.

Tas ir pēc noklusējuma ir deaktivizēts lai izvairītos no satura noņemšanas vai veidošanas, kas nav sagaidāms.

Bet tas ir ieteicams lai aktivizētu šo opciju, ja strādājat ar html virknēm kā modeļa vērtībām.

Lejupielādes informācija:

Autors: KillerCodeMonkey

GitHub: https://github.com/KillerCodeMonkey/ngx-quill

#angular #javascript #angularjs #angular-js

Stūraini komponenti Quill Rich Text Editor