溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了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有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
