如何在tinymce编辑器中删除内容？

Question

我正在使用angular2-tinymce库在我的离子/角度项目中使用tinymce编辑器。现在，我想根据一些逻辑来删除编辑器的内容。我的尝试如下：

尝试-1：

我尝试为app-tinymce分配一个strikethrough css类。

// .html file
<app-tinymce class="note-input-textarea" [(ngModel)]='noteText'
          [ngClass]="{
                       strikethrough: isDeleted
                     }"
          [disabled]="canUpdateNoteDetail">
    </app-tinymce>

// .scss file
.strikethrough {
  text-decoration: line-through;
}

但它并没有起作用。

尝试-2：

// .ts file
 export class UpdateProgressNotePage {
  @ViewChild(TinymceComponent) private tinyMce: TinymceComponent;
  isDeleted: boolean = true;
  noteText: string = "Sample Note";
   constructor(){
     this.initialize();
   }
   
   initialize() {
     if(isDeleted) {
       this.tinyMce.editor.execCommand('Strikethrough', false);
       this.tinyMce.editor.execCommand('Strikethrough', false, this.noteText); // Tried with this also but didn't work
     } 
   }

 }

但它对我不起作用。在这个link中，我发现可以将Strikethrough命令应用于tinyMce编辑器。

Answer 1

如果编辑器中没有选定的文本，则仅触发删除线命令不会执行任何操作。如果你想删掉所有的内容，你可以这样做。

this.tinyMce.editor.execCommand('SelectAll');
this.tinyMce.editor.execCommand('Strikethrough', false);

否则，如果您不想要所有文本，则可以手动指定选择。

编辑：您可能需要将该代码移动到ngAfterViewInit中，或者将其包装在setTimeout中，或者想出一种仅在tinyMce呈现完成后触发它的方法

关于您的尝试#1，如果tinymce的内容在iframe中呈现，我认为设置删除线类将不起作用。但如果它是内联呈现的(https://www.tinymce.com/docs/demo/inline/)，则需要使用::ng-deep组合器

//component.css
::ng-deep app-tinymce .strikethough
{
    text-decoration: line-through;
}

Answer 2

如果适当的内容已经有一个与之关联的strikethrough类，那么只需使用content_css TinyMCE配置设置将所需的任何CSS传递给编辑器即可。

假设您没有使用TinyMCE的内联编辑设置，编辑器的内容区域是一个iFrame，因此将CSS传递给主页不会影响iFrame中的HTML。content_css TinyMCE配置设置将引用的CSS应用于iFrame，然后根据需要设置内容样式。

https://www.tinymce.com/docs/configure/content-appearance/#content_css