代码拉取完成,页面将自动刷新
Use the CKEditor (4.x) wysiwyg in your Angular application.
<script src="https://cdn.ckeditor.com/4.5.11/full/ckeditor.js"></script>
Install ng2-ckeditor
jspm install npm:ng2-ckeditor
npm install ng2-ckeditor
yarn add ng2-ckeditor
SystemJS Config :
System.config({
map: {
'ng2-ckeditor': 'npm:ng2-ckeditor',
},
packages: {
'ng2-ckeditor': {
main: 'lib/index.js',
defaultExtension: 'js',
},
},
});
divarea
of CKEditor (see Issues)Include CKEditorModule
in your main module :
import { CKEditorModule } from 'ng2-ckeditor';
@NgModule({
// ...
imports: [CKEditorModule],
// ...
})
export class AppModule {}
Then use it in your component :
import { Component } from '@angular/core';
@Component({
selector: 'sample',
template: `
<ckeditor
[(ngModel)]="ckeditorContent"
[config]="{uiColor: '#99000'}"
[readonly]="false"
(change)="onChange($event)"
(editorChange)="onEditorChange($event)" <!-- CKEditor change event -->
(ready)="onReady($event)"
(focus)="onFocus($event)"
(blur)="onBlur($event)"
(contentDom)="onContentDom($event)"
(fileUploadRequest)="onFileUploadRequest($event)"
(fileUploadResponse)="onFileUploadResponse($event)"
(paste)="onPaste($event)"
(drop)="onDrop($event)"
debounce="500">
</ckeditor>
`,
})
export class Sample {
ckeditorContent: string = '<p>Some html</p>';
}
config
: The configuration object for CKEditor see http://docs.ckeditor.com/#!/api/CKEDITOR.config
debounce
: You can add a delay (ms) when updating ngModelreadonly
: Enabled / disable readonly on editorYou can use the following directives to add custom buttons to CKEditor's toolbar and organize them into groups. For more info about CKEditor's Toolbar API refer to http://docs.ckeditor.com/#!/api/CKEDITOR.ui
<ckbutton>
: Note that the name
and command
attributes are mandatory for this one.<ckeditor
[(ngModel)]="ckeditorContent">
<ckbutton [name]="'saveButton'"
[command]="'saveCmd'"
(click)="save($event)"
[icon]="'save.png'"
[label]="'Save Document'"
[toolbar]="'clipboard,1'">
</ckbutton>
</ckeditor>
<ckgroup>
: Can be used to organize multiple buttons into groups.<ckeditor
[(ngModel)]="ckeditorContent">
<ckgroup
[name]="'documenthandling'"
[previous]="'1'">
<ckbutton .... ></ckbutton>
<ckbutton .... ></ckbutton>
</ckgroup>
</ckeditor>
See LICENSE
file
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。