【问题标题】：How to strikethrough content in tinymce editor?如何在tinymce编辑器中删除内容？
【发布时间】：2018-02-25 07:22:52
【问题描述】：

我正在使用angular2-tinymce 库在我的 Ionic/Angular 项目中使用 tinymce 编辑器。现在我想根据一些逻辑来梳理编辑器的内容。我的尝试如下：

尝试 1：

我尝试将strikethrough css 类分配给app-tinymce。

// .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 编辑器。

【问题讨论】：

要执行命令，您需要选择一些文本。
您能详细说明一下吗？假设我的编辑器内容为noteText。如何穿透内容？我试过this.tinyMce.editor.execCommand('Strikethrough', false, this.noteText); .. 但它没有用

标签： angular ionic-framework tinymce

【解决方案1】：

如果在编辑器中没有选择文本，则仅触发删除线命令不会执行任何操作。如果您想删除tinymce的所有内容，请执行类似操作

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;
}

【讨论】：

你看到被选中的文本了吗？我为你的尝试编辑了我的帖子#1
tinymce 的内容正在 iframe 中呈现。你可以看到图片ibb.co/dJo8JH。这种情况我该怎么办？
检查为什么其他解决方案不起作用？ selectAll 是否有效？
这个this.tinyMce.editor.execCommand('mceInsertContent', false, data.savedNote); 命令正在运行。但是 selectAll 不起作用..
我不确定这很难说...也许是时间问题？ selectAll 可能会在呈现内容之前触发？尝试将 selectAll 和删除线命令包装在 setTimeout 中，以查看

【解决方案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

【讨论】：