angular editor
2.1.0
Ein einfacher einheimischer Wysiwyg/Rich-Texteditor für Angular 6-19+
Demo | Siehe den Code in Stackblitz.
Installieren Sie über NPM Paket Manager
npm install @kolkov/angular-editor --save3.0.0 und höher - für Winkel V13 + (Entfernte Schriftart isument Symbole Deps + CSS -Variablen)
2.0.0 und höher - für Winkel v13.xx und höher
1.0.0 und höher - für Winkel v8.xx und höher
0,18,4 und höher - für Winkel v7.xx
0.15.x - für Winkel v6.xx
Aufmerksamkeit! alpha und beta -Versionen können Bruchänderungen enthalten.
Importieren Sie angular-editor Eduktormodul
import { HttpClientModule } from '@angular/common/http' ;
import { AngularEditorModule } from '@kolkov/angular-editor' ;
@ NgModule ( {
imports : [ HttpClientModule , AngularEditorModule ]
} )Dann in HTML
< angular-editor [placeholder] =" 'Enter text here...' " [(ngModel)] =" htmlContent " > </ angular-editor >oder zur Verwendung mit reaktiven Formen
< angular-editor formControlName =" htmlContent " [config] =" editorConfig " > </ angular-editor > Wenn Sie mehr als einen Editor auf derselben Seiten -Set id -Eigenschaft verwenden
< angular-editor id =" editor1 " formControlName =" htmlContent1 " [config] =" editorConfig " > </ angular-editor >
< angular-editor id =" editor2 " formControlName =" htmlContent2 " [config] =" editorConfig " > </ angular-editor >Wo
import { AngularEditorConfig } from '@kolkov/angular-editor' ;
editorConfig: AngularEditorConfig = {
editable : true ,
spellcheck : true ,
height : 'auto' ,
minHeight : '0' ,
maxHeight : 'auto' ,
width : 'auto' ,
minWidth : '0' ,
translate : 'yes' ,
enableToolbar : true ,
showToolbar : true ,
placeholder : 'Enter text here...' ,
defaultParagraphSeparator : '' ,
defaultFontName : '' ,
defaultFontSize : '' ,
fonts : [
{ class : 'arial' , name : 'Arial' } ,
{ class : 'times-new-roman' , name : 'Times New Roman' } ,
{ class : 'calibri' , name : 'Calibri' } ,
{ class : 'comic-sans-ms' , name : 'Comic Sans MS' }
] ,
customClasses : [
{
name : 'quote' ,
class : 'quote' ,
} ,
{
name : 'redText' ,
class : 'redText'
} ,
{
name : 'titleText' ,
class : 'titleText' ,
tag : 'h1' ,
} ,
] ,
uploadUrl : 'v1/image' ,
upload : ( file : File ) => { ... }
uploadWithCredentials : false ,
sanitize : true ,
toolbarPosition : 'top' ,
toolbarHiddenButtons : [
[ 'bold' , 'italic' ] ,
[ 'fontSize' ]
]
} ; Damit ngModel funktioniert, müssen Sie FormsModule aus @angular/forms oder für formControlName importieren, müssen Sie ReactiveFormsModule von @angular/forms importieren
Stellen Sie sicher, dass Ihr angular.json die folgende Asset -Konfiguration enthält:
{
"glob": "**/*",
"input": "node_modules/@kolkov/angular-editor/assets/icons",
"output": "assets/ae-icons/"
}
Schließen Sie die Standardthema -Datei mit Ihrem angular.json oder nx.json an
"styles": [
"projects/angular-editor-app/src/styles.scss",
"node_modules/@kolkov/angular-editor/themes/default.scss"
],
oder @include oder @use in Ihrer Datei project styles.scss und dann die Standard -Themenvariablen wie folgt überschreiben:
:root {
--ae-gap : 5 px ;
--ae-text-area-border : 1 px solid #ddd ;
--ae-text-area-border-radius : 0 ;
--ae-focus-outline-color : #afaeae auto 1 px ;
--ae-toolbar-padding : 1 px ;
--ae-toolbar-bg-color : #b3dca0 ;
--ae-toolbar-border-radius : 1 px solid #ddd ;
--ae-button-bg-color : #dadad7 ;
--ae-button-border : 3 px solid #3fb74e ;
--ae-button-radius : 5 px ;
--ae-button-hover-bg-color : #3fb74e ;
--ae-button-active-bg-color : red ;
--ae-button-active-hover-bg-color : blue ;
--ae-button-disabled-bg-color : gray ;
--ae-picker-label-color : rgb ( 78 , 84 , 155 );
--ae-picker-icon-bg-color : rgb ( 34 , 41 , 122 );
--ae-picker-option-bg-color : rgba ( 221 , 221 , 84 , 0.76 );
--ae-picker-option-active-bg-color : rgba ( 237 , 237 , 62 , 0.9 );
--ae-picker-option-focused-bg-color : rgb ( 255 , 255 , 0 );
}Sie können Ihre benutzerdefinierten Schaltflächen mit benutzerdefinierten Aktionen mithilfe von ExecuteCommandfn definieren. Es akzeptiert Befehle von execcommand. Das erste Argument dieser Methode ist der Akommandname und das zweite Argument ist ein Avalueargument. Beispiel zeigt eine Schaltfläche, die dem Editor das Angulareditor -Logo hinzufügt.
< angular-editor id =" editor1 " [(ngModel)] =" htmlContent1 " [config] =" config1 " (ngModelChange) =" onChange($event) "
(blur) =" onBlur($event) " >
< ng-template #customButtons let-executeCommandFn =" executeCommandFn " >
< ae-toolbar-set >
< button aeButton title =" Angular editor logo " (click) =" executeCommandFn('insertHtml', angularEditorLogo) " >
< svg viewBox =" -8 0 272 272 " xmlns =" http://www.w3.org/2000/svg "
preserveAspectRatio =" xMidYMid " fill =" #000000 " >
< g id =" SVGRepo_bgCarrier " stroke-width =" 0 " > </ g >
< g id =" SVGRepo_tracerCarrier " stroke-linecap =" round " stroke-linejoin =" round " > </ g >
< g id =" SVGRepo_iconCarrier " >
< g >
< path
d =" M0.0996108949,45.522179 L125.908171,0.697276265 L255.103502,44.7252918 L234.185214,211.175097 L125.908171,271.140856 L19.3245136,211.971984 L0.0996108949,45.522179 Z "
fill =" #E23237 " > </ path >
< path
d =" M255.103502,44.7252918 L125.908171,0.697276265 L125.908171,271.140856 L234.185214,211.274708 L255.103502,44.7252918 L255.103502,44.7252918 Z "
fill =" #B52E31 " > </ path >
< path
d =" M126.107393,32.27393 L126.107393,32.27393 L47.7136187,206.692607 L76.9992218,206.194553 L92.7377432,166.848249 L126.207004,166.848249 L126.306615,166.848249 L163.063035,166.848249 L180.29572,206.692607 L208.286381,207.190661 L126.107393,32.27393 L126.107393,32.27393 Z M126.306615,88.155642 L152.803113,143.5393 L127.402335,143.5393 L126.107393,143.5393 L102.997665,143.5393 L126.306615,88.155642 L126.306615,88.155642 Z "
fill =" #FFFFFF " > </ path >
</ g >
</ g >
</ svg >
</ button >
</ ae-toolbar-set >
</ ng-template >
</ angular-editor > | Eingang | Typ | Standard | Erforderlich | Beschreibung |
|---|---|---|---|---|
| Ausweis | string | - | NEIN | ID -Eigenschaft Wenn mehrere Editors auf derselben Seite verwendet werden |
| [Konfiguration] | AngularEditorConfig | default config | NEIN | Konfiguration für den Editor |
| Platzhalter | string | - | NEIN | Stellen Sie benutzerdefinierte Platzhalter für Eingabebereich ein |
| Tabindex | number | - | NEIN | Setzen Sie die Tabindex auf dem Angular-Eduditor ein? |
| Ausgabe | Beschreibung |
|---|---|
| (HTML) | Ausgabe html |
| (ViewMode) | Beim Schalten visuellen und HTML -Quellmodus abgefeuert |
| (verwischen) | Gefeuert, als der Herausgeber verschwommen ist |
| (Fokus) | Gefeuert, wenn der Herausgeber Fokus |
| Name | Beschreibung |
|---|---|
| Fokus | Fokussiert das Editorelement |
| Name | Typ | Beschreibung |
|---|---|---|
| AngulareditorConfig | Konfiguration | Konfiguration für die Angulareditor -Komponente. |
| Eingang | Typ | Standard | Erforderlich | Beschreibung |
|---|---|---|---|---|
| bearbeitet | bolean | true | NEIN | Stellen Sie die Bearbeitung aktiviert oder nicht |
| Rechtschreibprüfung | bolean | true | NEIN | Legen Sie die Aktivierung der Beschwerdeschlange fest oder nicht |
| übersetzen | string | yes | NEIN | Setzen Sie das Übersetzen aktiviert oder nicht |
| sanitisieren | bolean | true | NEIN | Setzen Sie DOM -Desinfektion aktiviert oder nicht |
| Höhe | string | auto | NEIN | Stellen Sie die Höhe des Herausgebers fest |
| minheight | string | 0 | NEIN | Stellen Sie die Mindesthöhe des Herausgebers ein |
| MaxHeight | string | auto | NEIN | Stellen Sie die maximale Höhe des Herausgebers ein |
| Breite | string | auto | NEIN | Setzen Sie die Breite des Herausgebers |
| Minwidth | string | 0 | NEIN | Stellen Sie die Mindestbreite des Herausgebers ein |
| Enabletoolbar | bolean | true | NEIN | Legen Sie die Symbolleiste aktiviert oder nicht |
| SHOWTOOLBAR | bolean | true | NEIN | Setzen Sie die Symbolleiste sichtbar oder nicht |
| Symbollbarposition | string | top | NEIN | Setzen Sie die Symbolleiste Position oben oder unten |
| Platzhalter | string | - | NEIN | Setzen Sie Platzhaltertext |
| DefaultParagraphseparator | string | - | NEIN | Setzen Sie den Standardabsatzabscheider wie p |
| defaultFontName | string | - | NEIN | Setzen Sie die Standardschrift wie Comic Sans MS |
| defaultFontSize | string | - | NEIN | Setzen Sie die Standardschriftgröße wie 1 - 7 |
| Uploadurl | string | - | NEIN | Setzen Sie das Bild hochladen Endpoint https://api.exapple.com/v1/image/upload und geben Sie die Antwort mit ImageRl -Schlüssel zurück. {"ImageUrl":} |
| hochladen | function | - | NEIN | Bild -Upload -Funktion einstellen |
| Uploadwithcredentials | bolean | false | NEIN | Setzen Sie das Passieren oder nicht die Anmeldeinformationen im Bild -Upload -Aufruf |
| Schriftarten | Font[] | - | NEIN | Setzen Sie Array der verfügbaren Schriftarten [{name, class},...] |
| Customclasses | CustomClass[] | - | NEIN | Setzen Sie Array der verfügbaren Schriftarten [{name, class, tag},...] |
| Gliederung | bolean | true | NEIN | Legen Sie den Redakteur in Fokus ein |
| Symbollbarhiddenbuttons | string[][] | - | NEIN | Set der Auswahl der Tastennamen oder Elemente |
toolbarHiddenButtons: [
[
'undo' ,
'redo' ,
'bold' ,
'italic' ,
'underline' ,
'strikeThrough' ,
'subscript' ,
'superscript' ,
'justifyLeft' ,
'justifyCenter' ,
'justifyRight' ,
'justifyFull' ,
'indent' ,
'outdent' ,
'insertUnorderedList' ,
'insertOrderedList' ,
'heading' ,
'fontName'
] ,
[
'fontSize' ,
'textColor' ,
'backgroundColor' ,
'customClasses' ,
'link' ,
'unlink' ,
'insertImage' ,
'insertVideo' ,
'insertHorizontalRule' ,
'removeFormat' ,
'toggleEditorMode'
]
] Im Download finden Sie die folgenden Verzeichnisse und Dateien. Sie werden so etwas sehen:
angular-editor/
└── projects/
├── angular-editor/
└── angular-editor-app/
angular-editor/ - Bibliothek
angular-editor-app/ -Demo-Anwendung
Die Dokumentation für den Angulareditor wird auf unserer Website Angulareditor gehostet
Symbole aus Ligatur -Symbole Symbole Sammlungssymbole
Bitte lesen Sie unsere beitragenden Richtlinien durch. Eingeschlossen sind Anweisungen zum Öffnen von Problemen, Codierungsstandards und Notizen zur Entwicklung.
Die Einstellungen für die Editor sind in der Editor -Konfiguration verfügbar, um bei gemeinsamen Texteditoren eine einfache Verwendung zu erhalten. Lesen Sie mehr und laden Sie Plugins unter http://editorconfig.org herunter.
Für eine Transparenz in unseren Freisetzungszyklus und das Streben nach Rückwärtskompatibilität wird Angulareditor unter den semantischen Versionsrichtlinien aufrechterhalten.
Siehe den Abschnitt "Releases" unseres Projekts für Changelogs für jede Versionsversion.
Andrey Kolkov
Wenn du meine Arbeit magst und ich deine Zeit sparte, kannst du mir eine kaufen? oder ?
