AngularEditor适用于 Angular 的富文本编辑器
AngularEditor 是一个简单的原生 WYSIWYG/Rich Text 编辑器,适用于 Angular 6 至 12+。
安装
通过 npm 包管理器安装
npm install @kolkov/angular-editor --save
版本
1.0.0 及更高版本 —— 适用于 Angular v8.xx 及更高版本
0.18.4 及更高版本 —— 适用于 Angular v7.xx
0.15.x —— 适用于 Angular v6.xx
用法
导入angular-editor
模块
import { HttpClientModule} from '@angular/common/http'; import { AngularEditorModule } from '@kolkov/angular-editor'; @NgModule({ imports: [ HttpClientModule, AngularEditorModule ] })
然后在 HTML 中
<angular-editor [placeholder]="'Enter text here...'" [(ngModel)]="htmlContent"></angular-editor>
如果您在同一页面设置id
属性上使用多个编辑器
<angular-editor id="editor1" formControlName="htmlContent1" [config]="editorConfig"></angular-editor> <angular-editor id="editor2" formControlName="htmlContent2" [config]="editorConfig"></angular-editor>
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'] ] };
为了让 ngModel 正常使用,必须从 @angular/forms 导入 FormsModule,或者对于 formControlName,必须从 @angular/forms 导入 ReactiveFormsModule。
评论
AngularEditor适用于 Angular 的富文本编辑器
AngularEditor是一个简单的原生WYSIWYG/RichText编辑器,适用于Angular6至12+。安装通过 npm 包管理器安装npminstall@kolkov/angular-ed
AngularEditor适用于 Angular 的富文本编辑器
0
Markor适用于 Android 的文本编辑器
Markor是适用于Android的文本编辑器。该项目旨在制作一个多功能、灵活和轻量级的编辑器。Markor使用简单的标记格式,如Markdown和todo.txt来做笔记和列表管理。它在处理文本方面
Markor适用于 Android 的文本编辑器
0
conceptRTE富文本编辑器
conceptRTE富文本编辑器是KevinRoth编写的跨浏览器富文本编辑器的演变。 ConceptRTE是<textarea>字段的WYSIWYG(所见即所得)编辑器替代。这是原始跨浏
conceptRTE富文本编辑器
0