angular editor
2.1.0
Un simple éditeur de texte Wysiwyg / Rich Native pour Angular 6-19 +
démo | Voir le code dans Stackblitz.
Installer via NPM Package Manager
npm install @kolkov/angular-editor --save3.0.0 et supérieur - pour Angular V13 + (REPLIER LES ICONS AWESSIQUES DEPS + VARIABLES CSS)
2.0.0 et supérieur - pour Angular V13.xx et au-dessus
1.0.0 et supérieur - pour v8.xx angulaire et supérieur
0,18,4 et plus - pour v7.xx angulaire
0.15.x - pour v6.xx angulaire
Attention! Les versions alpha et beta peuvent contenir des changements de rupture.
Module d'importation angular-editor
import { HttpClientModule } from '@angular/common/http' ;
import { AngularEditorModule } from '@kolkov/angular-editor' ;
@ NgModule ( {
imports : [ HttpClientModule , AngularEditorModule ]
} )Puis en html
< angular-editor [placeholder] =" 'Enter text here...' " [(ngModel)] =" htmlContent " > </ angular-editor >ou pour une utilisation avec des formes réactives
< angular-editor formControlName =" htmlContent " [config] =" editorConfig " > </ angular-editor > Si vous utilisez plus d'un éditeur sur la même propriété ID Set id
< angular-editor id =" editor1 " formControlName =" htmlContent1 " [config] =" editorConfig " > </ angular-editor >
< angular-editor id =" editor2 " formControlName =" htmlContent2 " [config] =" editorConfig " > </ angular-editor >où
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' ]
]
} ; Pour que ngModel fonctionne, vous devez importer FormsModule à partir de @angular/forms , ou pour formControlName , vous devez importer ReactiveFormsModule à partir de @angular/forms
Pour servir le fichier icônes, assurez-vous que votre angular.json contient la configuration de l'actif suivant:
{
"glob": "**/*",
"input": "node_modules/@kolkov/angular-editor/assets/icons",
"output": "assets/ae-icons/"
}
Connectez le fichier de thème par défaut à votre angular.json ou nx.json
"styles": [
"projects/angular-editor-app/src/styles.scss",
"node_modules/@kolkov/angular-editor/themes/default.scss"
],
ou @include ou @use dans votre fichier de projets styles.scss , puis remplacez les variables de thème par défaut comme ceci:
: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 );
}Vous pouvez définir vos boutons personnalisés avec des actions personnalisées en utilisant ExecumandFn. Il accepte les commandes de Execcommand. Le premier argument de cette méthode est AcommandName et le deuxième argument est AVALUeArgument. L'exemple montre un bouton qui ajoute le logo de l'éditeur angulaire dans l'éditeur.
< 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 > | Saisir | Taper | Défaut | Requis | Description |
|---|---|---|---|---|
| identifiant | string | - | Non | Propriété ID lorsque plusieurs éditeurs utilisés sur la même page |
| [config] | AngularEditorConfig | default config | Non | config pour l'éditeur |
| espace réservé | string | - | Non | Définissez l'espace réservé personnalisé pour la zone d'entrée |
| tabindex | number | - | Non | SET SET TABINDEX sur Angular-Editor |
| Sortir | Description |
|---|---|
| (HTML) | Sortie HTML |
| (ViewMode) | Tiré en mode visuel et source HTML commuté |
| (se brouiller) | Tiré lorsque l'éditeur flou |
| (se concentrer) | Tiré lorsque l'éditeur se concentre |
| Nom | Description |
|---|---|
| se concentrer | Concentre l'élément éditeur |
| Nom | Taper | Description |
|---|---|---|
| AngularEditorConfig | configuration | Configuration pour le composant AngularEditor. |
| Saisir | Taper | Défaut | Requis | Description |
|---|---|---|---|---|
| modifiable | bolean | true | Non | Définir l'édition activée ou non |
| cocher | bolean | true | Non | Définir la vérification orthographique activée ou non |
| traduire | string | yes | Non | Définir la traduction activée ou non |
| désinfecter | bolean | true | Non | Définir DOM Saniting activé ou non |
| hauteur | string | auto | Non | Régler la hauteur de l'éditeur |
| minheight | string | 0 | Non | Définir la hauteur minimale de l'éditeur |
| maxheight | string | auto | Non | Définir la hauteur maximale de l'éditeur |
| largeur | string | auto | Non | Régler la largeur de l'éditeur |
| minewidth | string | 0 | Non | Définir la largeur minimale de l'éditeur |
| aperçu | bolean | true | Non | Définir la barre d'outils activée ou non |
| showtoolbar | bolean | true | Non | Définir la barre d'outils visible ou non |
| position d'outils | string | top | Non | Définir la position de la barre d'outils en haut ou en bas |
| espace réservé | string | - | Non | Définir le texte |
| Par défaut PARAGRAPHSEPARATOR | string | - | Non | Définir le séparateur de paragraphe par défaut tel que p |
| DefaultFontname | string | - | Non | Définir la police par défaut comme Comic Sans MS |
| DefaultFontize | string | - | Non | Définir la taille de la police par défaut telle que 1 - 7 |
| téléchargement | string | - | Non | Définissez l'image Téléchargez le point de terminaison https://api.exapple.com/v1/image/upload et retournez la réponse avec la touche ImageUrl. {"ImageUrl":} |
| télécharger | function | - | Non | Définir la fonction de téléchargement d'image |
| téléchargement | bolean | false | Non | Définir le passage ou non les informations d'identification dans l'appel d'image Téléchargement |
| polices | Font[] | - | Non | Définir le tableau des polices disponibles [{name, class},...] |
| CustomClasses | CustomClass[] | - | Non | Définir le tableau des polices disponibles [{name, class, tag},...] |
| contour | bolean | true | Non | Définir les grandes lignes de l'éditeur si vous concentrez |
| Barhiddenbuttons à outils | string[][] | - | Non | Ensemble du tableau de noms de bouton ou d'éléments à masquer |
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'
]
] Dans le téléchargement, vous trouverez les répertoires et fichiers suivants. Vous verrez quelque chose comme ceci:
angular-editor/
└── projects/
├── angular-editor/
└── angular-editor-app/
angular-editor/ - Library
angular-editor-app/ - Demo Application
La documentation de l'AngularEditor est hébergée sur notre site Web AngularEditor
Icônes des icônes de collecte des icônes de symboles ligature
Veuillez lire nos directives contributives. Les instructions sont incluses pour les problèmes d'ouverture, les normes de codage et les notes sur le développement.
Les préférences de l'éditeur sont disponibles dans la configuration de l'éditeur pour une utilisation facile dans les éditeurs de texte communs. Lisez la suite et téléchargez des plugins sur http://editorconfig.org.
Pour une transparence dans notre cycle de libération et pour s'efforcer de maintenir la compatibilité en arrière, AngularEditor est maintenu selon les directives de version sémantique.
Voir la section des versions de notre projet pour ChangeLogs pour chaque version de version.
Andrey Kolkov
Si vous aimez mon travail et que j'économise votre temps, vous pouvez m'acheter un? ou ?
