Angular5整合富文字編輯器TinyMCE的方法(漢化+上傳)
阿新 • • 發佈:2020-05-27
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(漢化+上傳)內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!