angular editor
2.1.0
Editor Teks Wysiwyg/Rich Asli Sederhana untuk Angular 6-19+
demo | Lihat kode di StackBlitz.
Instal melalui NPM Package Manager
npm install @kolkov/angular-editor --save3.0.0 dan di atas - untuk Angular V13 + (Departemen Ikon Awesome Deps yang Dihapus + Variabel CSS)
2.0.0 dan di atas - untuk sudut v13.xx dan di atas
1.0.0 dan di atas - untuk sudut v8.xx dan di atas
0.18.4 dan di atas - untuk sudut v7.xx
0.15.x - untuk sudut v6.xx
Perhatian! Versi alpha dan beta mungkin berisi perubahan yang melanggar.
Impor Modul angular-editor
import { HttpClientModule } from '@angular/common/http' ;
import { AngularEditorModule } from '@kolkov/angular-editor' ;
@ NgModule ( {
imports : [ HttpClientModule , AngularEditorModule ]
} )Kemudian di html
< angular-editor [placeholder] =" 'Enter text here...' " [(ngModel)] =" htmlContent " > </ angular-editor >atau untuk penggunaan dengan bentuk reaktif
< angular-editor formControlName =" htmlContent " [config] =" editorConfig " > </ angular-editor > Jika Anda menggunakan lebih dari satu editor pada properti id set halaman yang sama
< angular-editor id =" editor1 " formControlName =" htmlContent1 " [config] =" editorConfig " > </ angular-editor >
< angular-editor id =" editor2 " formControlName =" htmlContent2 " [config] =" editorConfig " > </ angular-editor >Di mana
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' ]
]
} ; Agar ngModel berfungsi, Anda harus mengimpor FormsModule dari @angular/forms , atau untuk formControlName , Anda harus mengimpor ReactiveFormsModule dari @angular/forms
Untuk melayani file Icons, pastikan bahwa angular.json Anda berisi konfigurasi aset berikut:
{
"glob": "**/*",
"input": "node_modules/@kolkov/angular-editor/assets/icons",
"output": "assets/ae-icons/"
}
Hubungkan file tema default ke angular.json atau nx.json Anda
"styles": [
"projects/angular-editor-app/src/styles.scss",
"node_modules/@kolkov/angular-editor/themes/default.scss"
],
atau @include atau @use di file styles.scss Anda, dan kemudian mengganti variabel tema default seperti ini:
: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 );
}Anda dapat menentukan tombol khusus Anda dengan tindakan khusus menggunakan ExecuteCommandfn. Ia menerima perintah dari ExecCommand. Argumen pertama dari metode ini adalah AcommandName dan argumen kedua adalah Avalueargument. Contoh menunjukkan tombol yang menambahkan logo editor Angular ke 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 > | Masukan | Jenis | Bawaan | Diperlukan | Keterangan |
|---|---|---|---|---|
| pengenal | string | - | TIDAK | Properti ID saat beberapa editor digunakan di halaman yang sama |
| [config] | AngularEditorConfig | default config | TIDAK | Konfigurasi untuk editor |
| placeholder | string | - | TIDAK | Atur placeholder khusus untuk area input |
| Tabindex | number | - | TIDAK | Setel TabIndex di Angular-Editor |
| Keluaran | Keterangan |
|---|---|
| (html) | Output html |
| (ViewMode) | Dipecat saat beralih mode sumber visual dan html |
| (mengaburkan) | Ditembakkan saat editor kabur |
| (fokus) | Dipecat saat fokus editor |
| Nama | Keterangan |
|---|---|
| fokus | Memfokuskan elemen editor |
| Nama | Jenis | Keterangan |
|---|---|---|
| AngularEditorConfig | konfigurasi | Konfigurasi untuk komponen AngularEditor. |
| Masukan | Jenis | Bawaan | Diperlukan | Keterangan |
|---|---|---|---|---|
| dapat diedit | bolean | true | TIDAK | Atur pengeditan diaktifkan atau tidak |
| Ejaan | bolean | true | TIDAK | Atur ejaan yang diaktifkan atau tidak |
| menerjemahkan | string | yes | TIDAK | Atur translating diaktifkan atau tidak |
| membersihkan | bolean | true | TIDAK | Atur dom sanitasi diaktifkan atau tidak |
| tinggi | string | auto | TIDAK | Tetapkan Tinggi Editor |
| Minheight | string | 0 | TIDAK | Tetapkan ketinggian minimum editor |
| Maxheight | string | auto | TIDAK | Atur ketinggian maksimum editor |
| lebar | string | auto | TIDAK | Atur lebar editor |
| Minwidth | string | 0 | TIDAK | Tetapkan lebar minimum editor |
| enableToolBar | bolean | true | TIDAK | Atur toolbar diaktifkan atau tidak |
| showtoolbar | bolean | true | TIDAK | Atur toolbar terlihat atau tidak |
| Toolbarposisi | string | top | TIDAK | Atur posisi toolbar atas atau bawah |
| placeholder | string | - | TIDAK | Atur teks Placeholder |
| DefaultParagraphSeparator | string | - | TIDAK | Atur pemisah paragraf default seperti p |
| DefaultFontName | string | - | TIDAK | Atur font default seperti Comic Sans MS |
| DefaultFontSize | string | - | TIDAK | Atur ukuran font default seperti 1 - 7 |
| unggah | string | - | TIDAK | Atur Image Unggah Titik Akhir https://api.exapple.com/v1/image/upload dan kembalikan respons dengan Kunci ImageUrl. {"ImageUrl":} |
| mengunggah | function | - | TIDAK | Atur fungsi Upload Gambar |
| mengunggah dengan predensial | bolean | false | TIDAK | Setel atau tidak kredensial dalam panggilan unggahan gambar |
| font | Font[] | - | TIDAK | Atur array font yang tersedia [{name, class},...] |
| CustomClasses | CustomClass[] | - | TIDAK | Atur array font yang tersedia [{name, class, tag},...] |
| garis besar | bolean | true | TIDAK | Atur garis besar editor jika fokus |
| toolbarhiddenbuttons | string[][] | - | TIDAK | Set array nama tombol atau elemen untuk disembunyikan |
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'
]
] Dalam unduhan Anda akan menemukan direktori dan file berikut. Anda akan melihat sesuatu seperti ini:
angular-editor/
└── projects/
├── angular-editor/
└── angular-editor-app/
angular-editor/ - Perpustakaan
Aplikasi Demo angular-editor-app/ -
Dokumentasi untuk AngularEditor di -host di situs web kami AngularEditor
Ikon dari Ikon Ikon Ikon Simbol Ligatur
Silakan baca pedoman yang berkontribusi. Termasuk arahan untuk masalah pembukaan, standar pengkodean, dan catatan tentang pengembangan.
Preferensi editor tersedia di konfigurasi editor untuk memudahkan penggunaan pada editor teks umum. Baca lebih lanjut dan unduh plugin di http://editorconfig.org.
Untuk transparansi ke dalam siklus pelepasan kami dan berusaha mempertahankan kompatibilitas ke belakang, AngularEditor dipertahankan di bawah pedoman versi semantik.
Lihat bagian Rilis dari Proyek kami untuk Changelogs untuk setiap versi rilis.
Andrey Kolkov
Jika Anda menyukai pekerjaan saya dan saya menghemat waktu, Anda dapat membelikan saya A? atau ?
