Angular CKEditor - как получить экземпляр, использовать insertHTML (), применить css к содержимому - PullRequest
0 голосов
/ 16 октября 2019

Я использую ck editor

Я использую модель ng для привязки данных к редактору. В TS файл я написал HTML, который включает button.but кнопка не рендеринга.

Теперь сценарий, я хочу динамически добавить кнопку в ckeditor. Я не могу заставить экземпляр использовать insertHTML (). Пожалуйста, помогите!

HTML:

    <ckeditor [(ngModel)]="model.editorData"  (change)="onChange($event)" [config]="{ toolbar: [ ] }"  [ngModelOptions]="{standalone: true}" [editor]="Editor" ></ckeditor>
  <button type="button" (click)="addButton($event,'Boy')" class="btn btn-secondary btn-hover-brand">Student name</button>

TS:

import { Component, OnInit } from '@angular/core';
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { CKEditor4 } from 'ckeditor4-angular/ckeditor';

@Component({
  selector: 'kt-sms-configuration',
  templateUrl: './sms-configuration.component.html',
  styleUrls: ['./sms-configuration.component.scss']
})
export class SmsConfigurationComponent implements OnInit {
  public Editor = ClassicEditor;
  public model = {
    editorData: '<p> hello world   <button class="btn btn-secondary">Hello</button></p>'
  };
  constructor() {
   }

  ngOnInit() {
  }
 
  save(){
    console.log("in save");
    console.log(this.model.editorData);

  }
  public onChange( event: CKEditor4.EventInfo) {
    // console.log(this.model.editorData)
    console.log(event);
    
  }
  addButton(event: CKEditor4.EventInfo,name){
    // SmsConfigurationComponent.Editor.getData();
    // SmsConfigurationComponent.Editor.insertHtml();
    // editor.insertHtml('Hey man'+name);
    this.Editor;
    console.log(event);
   
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...