angular editor
2.1.0
Un simple editor de texto de Wysiwyg/Rich Native para Angular 6-19+
demostración | Vea el código en Stackblitz.
Instalar a través de NPM Package Manager
npm install @kolkov/angular-editor --save3.0.0 y superior - para Angular V13 + (Fuente eliminada Iconos impresionantes Deps + Variables CSS)
2.0.0 y superior - para angular v13.xx y arriba
1.0.0 y superior - para angular v8.xx y arriba
0.18.4 y superior - para angular v7.xx
0.15.x - para angular v6.xx
¡Atención! Las versiones alpha y beta pueden contener cambios de ruptura.
Importar módulo angular-editor
import { HttpClientModule } from '@angular/common/http' ;
import { AngularEditorModule } from '@kolkov/angular-editor' ;
@ NgModule ( {
imports : [ HttpClientModule , AngularEditorModule ]
} )Luego en html
< angular-editor [placeholder] =" 'Enter text here...' " [(ngModel)] =" htmlContent " > </ angular-editor >o para el uso con formas reactivas
< angular-editor formControlName =" htmlContent " [config] =" editorConfig " > </ angular-editor > Si está utilizando más de un editor en la misma propiedad de id de configuración de página
< angular-editor id =" editor1 " formControlName =" htmlContent1 " [config] =" editorConfig " > </ angular-editor >
< angular-editor id =" editor2 " formControlName =" htmlContent2 " [config] =" editorConfig " > </ angular-editor >dónde
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' ]
]
} ; Para que ngModel funcione, debe importar FormsModule de @angular/forms , o para formControlName , debe importar ReactiveFormsModule de @angular/forms
Para servir el archivo de iconos, asegúrese de que su angular.json contenga la siguiente configuración de activos:
{
"glob": "**/*",
"input": "node_modules/@kolkov/angular-editor/assets/icons",
"output": "assets/ae-icons/"
}
Conecte el archivo del tema predeterminado a su angular.json o nx.json
"styles": [
"projects/angular-editor-app/src/styles.scss",
"node_modules/@kolkov/angular-editor/themes/default.scss"
],
o @include o @use en el archivo de su proyecto styles.scss , y luego anule variables de tema predeterminadas como esta:
: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 );
}Puede definir sus botones personalizados con acciones personalizadas utilizando ExecutEcommandfn. Acepta comandos de ExecCommand. El primer argumento de este método es el nombre de la núcleo y el segundo argumento es AvaluearGument. El ejemplo muestra un botón que agrega el logotipo del editor Angular al editor.
< 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 > | Aporte | Tipo | Por defecto | Requerido | Descripción |
|---|---|---|---|---|
| identificación | string | - | No | Propiedad de identificación Cuando el editor múltiple usado en la misma página |
| [Configuración] | AngularEditorConfig | default config | No | configuración para el editor |
| marcador de posición | string | - | No | Establezca un marcador de posición personalizado para el área de entrada |
| tabindex | number | - | No | Establecer TabIndex en Angular-Editor |
| Producción | Descripción |
|---|---|
| (HTML) | Salida HTML |
| (ViewMode) | Disparado cuando se conmutó visual y modo fuente HTML |
| (difuminar) | Despedido cuando el editor se desdibuja |
| (enfocar) | Despedido cuando el enfoque del editor |
| Nombre | Descripción |
|---|---|
| enfocar | Enfoca el elemento del editor |
| Nombre | Tipo | Descripción |
|---|---|---|
| AngularEditorConfig | configuración | Configuración para el componente AngularEditor. |
| Aporte | Tipo | Por defecto | Requerido | Descripción |
|---|---|---|---|---|
| editable | bolean | true | No | Establecer la edición habilitada o no |
| corrector de hechizos | bolean | true | No | Establecer la redacción de ortografía habilitada o no |
| traducir | string | yes | No | Establecer traducción habilitada o no |
| desinfectar | bolean | true | No | Establecer DOM desinfectación habilitada o no |
| altura | string | auto | No | Establecer la altura del editor |
| mínimo | string | 0 | No | Establecer la altura mínima del editor |
| maxheight | string | auto | No | Establecer la altura máxima del editor |
| ancho | string | auto | No | Establecer ancho del editor |
| mínimo | string | 0 | No | Establezca un ancho mínimo del editor |
| habilitar | bolean | true | No | Establecer la barra de herramientas habilitada o no |
| showtoolbar | bolean | true | No | Establecer la barra de herramientas visible o no |
| Herramienta | string | top | No | Establezca la posición de la barra de herramientas arriba o abajo |
| marcador de posición | string | - | No | Establecer texto de marcador de posición |
| Default Paragraphseparator | string | - | No | Establecer separador de párrafo predeterminado como p |
| defaultFontName | string | - | No | Establezca una fuente predeterminada como Comic Sans MS |
| DefaultFontSize | string | - | No | Establecer un tamaño de fuente predeterminado, como 1 - 7 |
| cargador | string | - | No | Establezca el punto de carga de la imagen https://api.exapple.com/v1/image/upload y devuelva la respuesta con la tecla ImageURL. {"ImageUrl":} |
| subir | function | - | No | Establecer la función de carga de la imagen |
| carguewithcredentials | bolean | false | No | Establecer credenciales de paso o no en la llamada de carga de imagen |
| fuentes | Font[] | - | No | Establecer la matriz de fuentes disponibles [{name, class},...] |
| clases personalizadas | CustomClass[] | - | No | Establecer la matriz de fuentes disponibles [{name, class, tag},...] |
| describir | bolean | true | No | Establecer el resumen del editor si está en foco |
| Tool BarhiddenButtons | string[][] | - | No | Conjunto de la matriz de nombres o elementos de botones para ocultar |
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'
]
] En la descarga encontrará los siguientes directorios y archivos. Verás algo como esto:
angular-editor/
└── projects/
├── angular-editor/
└── angular-editor-app/
angular-editor/ - Biblioteca
Aplicación de demostración angular-editor-app/ -
La documentación para AngularEditor está alojada en nuestro sitio web AngularEditor
Íconos de los símbolos de ligadura íconos de la colección íconos
Lea nuestras pautas contribuyentes. Se incluyen instrucciones para abrir problemas, estándares de codificación y notas sobre el desarrollo.
Las preferencias del editor están disponibles en la configuración del editor para usar fácilmente en editores de texto comunes. Lea más y descargue complementos en http://editorconfig.org.
Para una transparencia en nuestro ciclo de liberación y al esforzarse por mantener la compatibilidad hacia atrás, AngularEditor se mantiene bajo las pautas de versiones semánticas.
Consulte la sección de lanzamientos de nuestro proyecto para Changelogs para cada versión de lanzamiento.
Andrey Kolkov
Si te gusta mi trabajo y te ahorro tiempo, puedes comprarme un? o ?
