我已经实现了 CKeditor,但在编辑器的特定点添加数据时遇到问题。我浏览了 CKeditor 文档,所有代码都包含 CKEDITOR 关键字,所以我可以如何以及在哪里应用它。喜欢这个http://zkfiddle.org/sample/22fu1pr/4-Insert-text-at-cursor-for-CKEditor#source-1但是 Angular 实现
我已经试过了,
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
关于angular - 如何在光标点动态添加数据到CKeditor,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55741047/