angular editor
2.1.0
Um simples editor de texto nativo Wysiwyg/Rich para Angular 6-19+
Demo | Veja o código em Stackblitz.
Instale via NPM Package Manager
npm install @kolkov/angular-editor --save3.0.0 e acima - Para V13 + angular (Iconeias Awesome Removed Icons Deps + Variáveis CSS)
2.0.0 e acima - para V13.xx angular e acima
1.0.0 e acima - para V8.xx angular e acima
0,18,4 e acima - para V7.xx angular
0.15.x - para V6.xx angular
Atenção! As versões alpha e beta podem conter mudanças de ruptura.
Importar módulo angular-editor
import { HttpClientModule } from '@angular/common/http' ;
import { AngularEditorModule } from '@kolkov/angular-editor' ;
@ NgModule ( {
imports : [ HttpClientModule , AngularEditorModule ]
} )Então em html
< angular-editor [placeholder] =" 'Enter text here...' " [(ngModel)] =" htmlContent " > </ angular-editor >ou para uso com formas reativas
< angular-editor formControlName =" htmlContent " [config] =" editorConfig " > </ angular-editor > Se você estiver usando mais de um editor na mesma página da propriedade Set id
< angular-editor id =" editor1 " formControlName =" htmlContent1 " [config] =" editorConfig " > </ angular-editor >
< angular-editor id =" editor2 " formControlName =" htmlContent2 " [config] =" editorConfig " > </ angular-editor >onde
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, você deve importar FormsModule de @angular/forms , ou para formControlName , você deve importar ReactiveFormsModule de @angular/forms
Para servir o arquivo de ícones, verifique se o seu angular.json contém a seguinte configuração de ativos:
{
"glob": "**/*",
"input": "node_modules/@kolkov/angular-editor/assets/icons",
"output": "assets/ae-icons/"
}
Conecte o arquivo de tema padrão ao seu 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 no seu arquivo styles.scss e substitua as variáveis de temas padrão como este:
: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 );
}Você pode definir seus botões personalizados com ações personalizadas usando o ExecutECommandfn. Ele aceita comandos do ExecCommand. O primeiro argumento desse método é o nome do nome e o segundo argumento é o Avalueargument. Exemplo mostra um botão que adiciona o logotipo do editor angular ao 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 > | Entrada | Tipo | Padrão | Obrigatório | Descrição |
|---|---|---|---|---|
| eu ia | string | - | não | Propriedade de identificação quando vários editores usados na mesma página |
| [Config] | AngularEditorConfig | default config | não | Config para o editor |
| espaço reservado | string | - | não | Defina o espaço reservado personalizado para a área de entrada |
| Tabindex | number | - | não | Definir Set Tabindex no Angular-Editor |
| Saída | Descrição |
|---|---|
| (html) | Saída html |
| (ViewMode) | Disparado quando comutado no modo de origem visual e html |
| (borrão) | Disparado quando o editor borrão |
| (foco) | Disparado quando o editor foco |
| Nome | Descrição |
|---|---|
| foco | Concentra o elemento do editor |
| Nome | Tipo | Descrição |
|---|---|---|
| AngulareditorConfig | configuração | Configuração para o componente angulareditor. |
| Entrada | Tipo | Padrão | Obrigatório | Descrição |
|---|---|---|---|---|
| editável | bolean | true | não | Defina a edição ativada ou não |
| Verificação ortográfica | bolean | true | não | Definir verificação de strates habilitada ou não |
| traduzir | string | yes | não | Definir a tradução ativada ou não |
| higienize | bolean | true | não | Defina o Sanitização DOM ativado ou não |
| altura | string | auto | não | Altura definida do editor |
| MINHEIRO | string | 0 | não | Defina a altura mínima do editor |
| MaxHeight | string | auto | não | Defina a altura máxima do editor |
| largura | string | auto | não | Definir largura do editor |
| Minwidth | string | 0 | não | Defina a largura mínima do editor |
| EnableToolbar | bolean | true | não | Definir barra de ferramentas ativada ou não |
| ShowToolbar | bolean | true | não | Defina a barra de ferramentas visível ou não |
| ToolBarPosition | string | top | não | Definir a posição da barra de ferramentas superior ou inferior |
| espaço reservado | string | - | não | Defina o texto do espaço reservado |
| DefaultParagraphSeparator | string | - | não | Definir separador de parágrafo padrão como p |
| defaultFontName | string | - | não | Defina a fonte padrão, como Comic Sans MS |
| defaultFontSize | string | - | não | Defina o tamanho da fonte padrão, como 1 - 7 |
| UPLOURL | string | - | não | Configure o upload da imagem endpoint https://api.exapple.com/v1/image/upload e retorne a resposta com a tecla Imageurl. {"imageurl":} |
| carregar | function | - | não | Definir função de upload de imagem |
| uploadWithithCredentials | bolean | false | não | Defina a passagem ou não as credenciais na chamada de upload da imagem |
| fontes | Font[] | - | não | Defina a matriz de fontes disponíveis [{name, class},...] |
| CustomClasses | CustomClass[] | - | não | Defina a matriz de fontes disponíveis [{name, class, tag},...] |
| contorno | bolean | true | não | Defina o esboço do editor se estiver em foco |
| ToolBarhiddenButtons | string[][] | - | não | Conjunto da matriz de nomes ou elementos de botões 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'
]
] Dentro do download, você encontrará os seguintes diretórios e arquivos. Você verá algo assim:
angular-editor/
└── projects/
├── angular-editor/
└── angular-editor-app/
angular-editor/ - Biblioteca
Aplicativo de demonstração angular-editor-app/ -
A documentação para o AngularEditor está hospedada em nosso site angulareditor
Ícones de ícones de símbolos de ligadura ícones de coleção
Por favor, leia nossas diretrizes contribuintes. Estão incluídas instruções para questões de abertura, padrões de codificação e notas sobre desenvolvimento.
As preferências do editor estão disponíveis na configuração do editor para facilitar o uso em editores de texto comuns. Leia mais e faça o download dos plugins em http://editorconfig.org.
Para uma transparência em nosso ciclo de liberação e ao lutar para manter a compatibilidade com versões anteriores, o AngularEditor é mantido sob as diretrizes de versão semântica.
Consulte a seção de lançamentos do nosso projeto para Changelogs para cada versão de lançamento.
Andrey Kolkov
Se você gosta do meu trabalho e eu economizo seu tempo, você pode me comprar? ou ?
