我已经实现了CKeditor但在编辑器的特定点添加数据时遇到了麻烦。我通过CKeditor doc查看了包含CKEDITOR关键字的所有代码,以便我如何以及在哪里应用它。喜欢在这个http://zkfiddle.org/sample/22fu1pr/4-Insert-text-at-cursor-for-CKEditor#source-1但角度实现
我试过了id,
HTML
<div class="row mb-3">
<form role="form"
#myForm="ngForm" accept-charset="UTF-8" novalidate>
<div
class="form-group has-feedback"
[ngClass]="{ 'has-error': myckeditor.invalid && myckeditor.touched }">
<ckeditor [(ngModel)]="mycontent"
#myckeditor="ngModel"
id = "myckeditor"
name="myckeditor"
required
[config]="ckeConfig"
debounce="500">
</ckeditor>
<div
*ngIf="myckeditor.invalid && myckeditor.touched" class="help-
block">Required field.</div>
</div>
</form>
</div>
<div class="row mb-3">
<button class="btn btn-secondary mr-2 ml-2" (click)="addValue()">CustomerNo</button>
</div>
ts
export class AppComponent {
name = 'ng2-ckeditor';
ckeConfig: any;
mycontent: string;
log: string = '';
@ViewChild("myckeditor") ckeditor: any;
constructor() {
this.mycontent = `<p>My html content</p>`;
}
ngOnInit() {
this.ckeConfig = {
allowedContent: false,
extraPlugins: 'divarea',
forcePasteAsPlainText: true
};
}
public addValue(): void {
this.CKEDITOR.instances['myckeditor'].setData('<p>This is the
editor data.</p>');
}
}
我希望能够通过单击按钮或使用超链接动态地将值附加到CKeditor。
#myckeditor="ngModel"
限制了ckeditor的功能,所以改为使用#myckeditor
并使用ts
使用@ViewChild('ckeditor') public ckeditor: any;
来访问编辑器,只需执行此this.ckeditor.instance.insertText(temp);
即可将文本插入光标指针位置。
https://ckeditor.com/old/forums/CKEditor-3.x/heres-how-insert-text-and-tags-cursor