Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)

1. TinyMCE简介

TinyMCE是一个轻量级的富文本编辑器，相对于CK编辑器更加精简，但必须满足绝大部分场景的需要。

2.安装和配置TinyMCE

2.1安装TinyMCE

npm install-保存tinymce

2.2设置tinymce局部访问（.angular-cli.json）

"scripts": [
  "../node_modules/_tinymce@4.7.4/tinymce.js",
  "../node_modules/_tinymce@4.7.4/themes/modern/theme.js",
  "../node_modules/_tinymce@4.7.4/plugins/link/plugin.js",
  "../node_modules/_tinymce@4.7.4/plugins/paste/plugin.js",
  "../node_modules/_tinymce@4.7.4/plugins/table/plugin.js"
 ],

2.3定义变量

在项目中的typing.d.ts中

声明tinymce

变量，不然会提示发现tinymce

声明var tinymce：任何；

2.4拷贝皮肤文件到资产目录下

Linux和MacOS

cp -r node_modules / tinymce / skins src / assets / skins

2.5安装中文支持

中文语言包可以从这个地址下载：

https：//www.tinymce.com/downl ...

下载下来的压缩文件中会有一个langs目录，里面有zh_CN.js，把这个目录复制到src / assets目录下，然后在上下中添加引用（.angular-cli.json）：

“ scripts”：[

"../node_modules/_tinymce@4.7.4/tinymce.js",
 "../node_modules/_tinymce@4.7.4/themes/modern/theme.js",
 "../node_modules/_tinymce@4.7.4/plugins/link/plugin.js",
 "../node_modules/_tinymce@4.7.4/plugins/paste/plugin.js",
 "../node_modules/_tinymce@4.7.4/plugins/table/plugin.js",
 "../src/assets/langs/zh_CN.js"复制代码
]，

3.创建TinyMCE组件

ng gc myeditor

import {
 Component,
 AfterViewInit,
 EventEmitter,
 OnDestroy,
 Input,
 Output
} from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Component({
 selector: 'tiny-editor',
 templateUrl: './tiny-editor.component.html',
 styleUrls: ['./tiny-editor.component.css']
})
export class TinyEditorComponent implements AfterViewInit, OnDestroy {
 @Input() elementId: String;
 @Output() onEditorContentChange = new EventEmitter();

 editor;

 constructor() { }

 ngAfterViewInit() {
  let self = this;
  tinymce.init({
   selector: '#' + this.elementId,
   height: 600,
   plugins: ['link', 'table', 'image'],
   skin_url: 'assets/skins/lightgray',
   setup: editor => {
    this.editor = editor;
    editor.on('keyup change', () => {
     const content = editor.getContent();
     this.onEditorContentChange.emit(content);
    });
   }
  });
 }

 ngOnDestroy() {
  tinymce.remove(this.editor);
 }

}

// tiny-editor.component.html
<textarea id="{{elementId}}">
</textarea>

4.使用自定义TinyMCE组件

<tiny-editor [elementId]="'defined-tinymce-editor'">
</tiny-editor>

5.增加图片上传功能

import {
 Component,
 AfterViewInit,
 EventEmitter,
 OnDestroy,
 Input,
 Output
} from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Component({
 selector: 'tiny-editor',
 templateUrl: './tiny-editor.component.html',
 styleUrls: ['./tiny-editor.component.css']
})
export class TinyEditorComponent implements AfterViewInit, OnDestroy {
 @Input() elementId: String;
 @Output() onEditorContentChange = new EventEmitter();
 editor;
 constructor(private http: HttpClient) { }
 ngAfterViewInit() {
  let self = this;
  tinymce.init({
   selector: '#' + this.elementId,
   height: 600,
   plugins: ['link', 'table', 'image'],
   skin_url: 'assets/skins/lightgray',
   setup: editor => {
    this.editor = editor;
    editor.on('keyup change', () => {
     const content = editor.getContent();
     this.onEditorContentChange.emit(content);
    });
   },
   // 图片上传功能
   images_upload_handler: function(blobInfo, success, failure) {
    var formData;
    formData = new FormData();
    console.log(blobInfo);
    formData.append("file", blobInfo.blob(), blobInfo.filename());
    console.log(formData);
    self.uploadFile('http://www.seenode.com/index/player/upload', formData).subscribe( response => {
     let url = response['data']['imagePath'];
     success(url);
    });
   }
  });
 }
 // 上传图片
 private uploadFile(url: string, formData: any) {
  var self = this;
  var headers = new HttpHeaders();
  headers.set("Accept", "application/json");
  return self.http.post(url, formData, { headers: headers });
 }

 ngOnDestroy() {
  tinymce.remove(this.editor);
 }
}

6.获取和设置编辑器内容

<tiny-editor
 [elementId]="'defined-tinymce-editor'"
 (onEditorContentChange)="keyupHandler($event)"></tiny-editor>复制代码
// 监听onEditorKeyup事件
private keyupHandler(event) {
 console.log('编辑器的内容：', event);
}

总结

到此这篇关于Angular5整合富文本编辑器TinyMCE（汉化+上传）的文章就介绍到这了,更多相关Angular5整合富文本编辑器TinyMCE（汉化+上传）内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！