angular8.5集成TinyMce5的使用和详细配置(推荐)

下面是“angular8.5集成TinyMce5的使用和详细配置”的攻略：

1. 前置条件

在开始之前，你需要先确认以下几个前置条件：

• 已经安装了Angular CLI，并创建了一个Angular项目；
• 已经安装了jQuery和TinyMCE。

2. 安装TinyMCE

在项目中安装TinyMCE，有两种方式。

2.1 方式一：使用npm

可以使用npm来安装TinyMCE：

npm install tinymce --save

2.2 方式二：下载并引入js文件

从TinyMCE官网下载最新版本的js文件，并将其引入到Angular项目中，比如可以在index.html文件中添加以下代码：

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

3. 集成TinyMCE

下面介绍如何在Angular项目中集成TinyMCE。

3.1 创建一个TinyMCE组件

在项目中创建一个TinyMCE组件，可以使用Angular CLI提供的命令行创建一个组件：

ng g c tinymce

然后在app.component.html文件中添加以下代码来引入TinyMCE组件：

<app-tinymce></app-tinymce>

3.2 在TinyMCE组件中初始化TinyMCE

在TinyMCE组件的代码中初始化TinyMCE，代码如下：

import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

declare var tinymce: any;

@Component({
  selector: 'app-tinymce',
  templateUrl: './tinymce.component.html',
  styleUrls: ['./tinymce.component.scss']
})
export class TinymceComponent implements OnInit, AfterViewInit {
  @ViewChild('tinymce') tinymce: ElementRef;

  constructor() { }

  ngOnInit() {
  }

  ngAfterViewInit() {
    tinymce.init({
      target: this.tinymce.nativeElement,
      height: 300,
      plugins: [
        'advlist autolink autosave lists link image charmap print preview hr anchor pagebreak',
        'searchreplace wordcount visualblocks visualchars code fullscreen',
        'insertdatetime media nonbreaking save table directionality',
        'emoticons template paste textcolor colorpicker textpattern code'
      ],
      toolbar1: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
      toolbar2: 'print preview media | forecolor backcolor emoticons | code',
      image_advtab: true,
      templates: [
        { title: 'Test template 1', content: 'Test 1' },
        { title: 'Test template 2', content: 'Test 2' }
      ]
    });
  }
}

• 在ngAfterViewInit生命周期钩子中，使用tinymce.init函数来初始化TinyMCE；
• target参数用来指定TinyMCE要渲染的DOM元素；
• height参数用来指定TinyMCE编辑器的高度；
• plugins参数用来指定要使用的插件；
• toolbar1和toolbar2参数用来指定工具栏的样式；
• templates参数用来指定可以使用的模板。

3.3 在模板中添加TinyMCE组件

在tinymce.component.html文件中添加以下代码：

<textarea #tinymce></textarea>

4. 配置图片上传

上面的代码中 TinyMCE 集成了上传图片的功能，所以你需要在 Angular 中实现上传图片的接口。示例代码如下：

import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

declare var tinymce: any;

@Component({
  selector: 'app-tinymce',
  templateUrl: './tinymce.component.html',
  styleUrls: ['./tinymce.component.scss']
})
export class TinymceComponent implements OnInit, AfterViewInit {
  @ViewChild('tinymce') tinymce: ElementRef;

  constructor() { }

  ngOnInit() {
  }

  ngAfterViewInit() {
    tinymce.init({
      target: this.tinymce.nativeElement,
      height: 300,
      plugins: [
        'advlist autolink autosave lists link image charmap print preview hr anchor pagebreak',
        'searchreplace wordcount visualblocks visualchars code fullscreen',
        'insertdatetime media nonbreaking save table directionality',
        'emoticons template paste textcolor colorpicker textpattern code'
      ],
      toolbar1: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link',
      toolbar2: 'image media | forecolor backcolor emoticons | code',
      images_upload_url: '/api/upload', // 自行修改为符合实际的上传图片url
      image_advtab: true,
      file_picker_callback: function(cb, value, meta) {
        var input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.setAttribute('accept', 'image/*');

        input.onchange = function() {
          var file = this.files[0];

          var reader = new FileReader();
          reader.onload = function() {
            var id = 'img-' + (new Date()).getTime();
            var blobCache = tinymce.activeEditor.editorUpload.blobCache;
            var base64 = reader.result.split(',')[1];
            var blobInfo = blobCache.create(id, file, base64);
            blobCache.add(blobInfo);

            cb(blobInfo.blobUri(), { title: file.name });
          };
          reader.readAsDataURL(file);
        };

        input.click();
      },
      templates: [
        { title: 'Test template 1', content: 'Test 1' },
        { title: 'Test template 2', content: 'Test 2' }
      ]
    });
  }
}

• images_upload_url参数用来指定上传图片的接口；
• file_picker_callback参数用来指定选择图片的回调函数；
• 在回调函数中使用FileReader将图片转换成base64编码，并调用blobCache.create函数将图片缓存起来。

5. 总结

本篇文章介绍了如何在Angular8.5中集成TinyMCE5，并详细介绍了集成的过程及配置方法。上面的示例代码中包含了上传图片的功能，但上传接口需要在实际项目中自行实现。