1. TinyMCE簡介

TinyMCE是一個輕量級的富文字編輯器，相對於CK編輯器更加精簡，但必須滿足絕大部分場景的需要。

2.安裝和配置TinyMCE

2.1安裝TinyMCE

npm install-儲存tinymce

2.2設定tinymce區域性訪問（.angular-cli.json）

"scripts": [
  "../node_modules/[email protected]/tinymce.js","../node_modules/[email protected]/themes/modern/theme.js","../node_modules/[email protected]/plugins/link/plugin.js","../node_modules/[email protected]/plugins/paste/plugin.js","../node_modules/[email protected]/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/[email protected]/tinymce.js","../node_modules/[email protected]/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,OnDestroy {
 @Input() elementId: String;
 @Output() onEditorContentChange = new EventEmitter();
 editor;
 constructor(private http: HttpClient) { }
 ngAfterViewInit() {
  let self = this;
  tinymce.init({
   selector: '#' + this.elementId,() => {
     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（漢化+上傳）內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！