Angular 集成富文本编辑器 tinymce使用方法和踩坑指南

[deepthan]

富文本编辑器 tinymce使用方法和踩坑指南

使用方法

• 官网
• quick start guide
• 文档

隐藏头部菜单

ref

tinymce.init({
    menubar: false,
    statusbar: false,
    toolbar: false
});

只读状态

只读状态需要隐藏头部菜单

tinymce.init({
 readonly : 1
}）

可参考的博客

• 字体字号
• https://www.eesion.com/eesion/index.php/2018/09/02/tinymce-basic/
• https://blog.csdn.net/zjiang1994/article/details/79880806
• https://blog.csdn.net/chenloveyue/article/details/70399

踩坑指南

1. 上传图片问题

在上传图片的时候，返回到编辑器中的要求是相对路径的图片地址/pages/images,而不是www.angular-school/pages/images,

but在拼接返回给编辑器的图片的路径的时候明明传的是/pages/images却会被解析成pages/images,解决办法：

tinymce.init({
  selector: '#id',
  relative_urls: true,
  remove_script_host: false,
  convert_urls: false,
})

• relative_urls：默认为true
  如果设置为true，则从MCFileManager返回的所有url都将相对于指定的document_base_url。如果设置为false，所有url都将转换为绝对url。

• remove_script_host：默认为true。
  如果启用此选项，则从MCFileManager返回的协议和主机部分url将被删除。仅当relative_urls选项设置为false时才使用此选项。

• convert_urls：默认为true。
  此选项使您能够控制TinyMCE是否明智，并将url恢复到其原始值。默认情况下url会自动转换(混乱)，因为浏览器的内置逻辑是这样工作的。除非您将其存储起来，否则无法获得真正的URL。如果您将此选项设置为false，它将尝试保持这些url的完整性。默认情况下，这个选项被设置为true，这意味着url必须是绝对的或相对的，这取决于relative_urls的状态。

2. 富文本的内容在html标签里面渲染出来和富文本中不同

在富文本中新建一段内容，之后存起来，再想查看富文本的内容，有两种方式：

• 在富文本中渲染，使其内容进入禁用模式不可编辑只可查看

<textarea id="disabledTinymce"></textarea>

tinymce.init({
  selector: '#disabledTinymce',
  menubar: false,
  statusbar: false,
  toolbar: false,
  readonly : 1
})

• 在html标签中渲染，使其内容可内查看

<div [innerHTML]="itemMail.content | safe: 'html'"></div>

safe: 'html' 是一个html代码输出渲染到页面的管道

使用第二种渲染方式样式部分会发生变化，因为项目或者引入的第三方库使用的样式定义会影响到这它，所以得使用第一种方式，它是一个iframe包裹的故不受影响。

3. 光标总在编辑之后丢失

因为需要在查看的时候给它赋值，所以会给编辑器组件传递一个初始值editorData。

<tinymce-editor
    [data]="editorData"
    [elementId]="editId"
    (onEditorContentChange)="editorContentChange($event)"
></tinymce-editor>

在编辑器组件中检测数据变化并渲染数据到编辑器上

ngOnChanges(changes: SimpleChanges): void {
    if("data" in changes && this.editor && this.data){
      this.editor.setContent(this.data);
    }
}

而编辑器在内容变化时会有个回调函数把编辑器的内容回调出来

editorContentChange(data: string) {
    this.editorData = data;
}

那么这时候会造成this.editorData改变，重新会传入编辑器中。
那么问题来了。。。。
会触发this.editor.setContent(this.data)重置编辑器的值，导致光标丢失。
因此需要在给编辑器赋值的时候做个判断，若传入的值和编辑器值相同，则不赋值。

ngOnChanges(changes: SimpleChanges): void {
    if("data" in changes && this.editor && this.data){
      if(this.data == this.storedEditorData ){
        return;
      }
      this.editor.setContent(this.data);
    }
}

4. 富文本全屏显示按钮首次不显示

  toolbar: ' pagebreak | image imagetools | removeformat |  undo redo | fullscreen ',

这样配置首次不显示，把fullscreen和前一个放在一起就显示了（好奇怪）

  toolbar: ' pagebreak | image imagetools | removeformat |  undo redo fullscreen ',

5. 报错 Prod build error with 3rd party lib (tinymce): Error: Invalid IIFE Structure

ERROR in ./node_modules/tinymce/tinymce.js
Module build failed: Error: Invalid IIFE Structure
    at updateEnumIife (F:\ithinkdt-framework-front-pure\node_modules\@angular-devkit\build-optimizer\src\transforms\wrap-enums.js:307:15)
    at visitBlockStatements (F:\ithinkdt-framework-front-pure\node_modules\@angular-devkit\build-optimizer\src\transforms\wrap-enums.js:82:61)
    at visitor (F:\ithinkdt-framework-front-pure\node_modules\@angular-devkit\build-optimizer\src\transforms\wrap-enums.js:33:26)
    at visitNode (F:\ithinkdt-framework-front-pure\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:56836:23)
    at visitFunctionBody (F:\ithinkdt-framework-front-pure\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:56942:23)
    at Object.visitEachChild (F:\ithinkdt-framework-front-pure\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:57062:407)
    at visitor (F:\ithinkdt-framework-front-pure\node_modules\@angular-devkit\build-optimizer\src\transforms\wrap-enums.js:53:23)
    at visitNode (F:\ithinkdt-framework-front-pure\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:56836:23)
    at Object.visitEachChild (F:\ithinkdt-framework-front-pure\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:57052:44)
    at visitor (F:\ithinkdt-framework-front-pure\node_modules\@angular-devkit\build-optimizer\src\transforms\wrap-enums.js:53:23)
    at visitNode (F:\ithinkdt-framework-front-pure\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:56836:23)
    at Object.visitEachChild (F:\ithinkdt-framework-front-pure\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:57060:45)
    at visitor (F:\ithinkdt-framework-front-pure\node_modules\@angular-devkit\build-optimizer\src\transforms\wrap-enums.js:53:23)
    at visitNode (F:\ithinkdt-framework-front-pure\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:56836:23)
    at Object.visitEachChild (F:\ithinkdt-framework-front-pure\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:57106:49)
    at visitor (F:\ithinkdt-framework-front-pure\node_modules\@angular-devkit\build-optimizer\src\transforms\wrap-enums.js:53:23)

解决办法

https://github.com/angular/angular-cli/issues/11041

运行即可解决报错问题

ng build --prod --build-optimizer=false