資訊專欄INFORMATION COLUMN
摘要：簡(jiǎn)介是一個(gè)輕量級(jí)的富文本編輯器，相對(duì)于更加精簡(jiǎn)，但足以滿足絕大部分場(chǎng)景的需要。
1. TinyMCE簡(jiǎn)介
TinyMCE是一個(gè)輕量級(jí)的富文本編輯器，相對(duì)于CKEditor更加精簡(jiǎn)，但足以滿足絕大部分場(chǎng)景的需要。2. 安裝和配置TinyMCE
2.1 安裝TinyMCE
npm install --save tinymce
2.2 設(shè)置tinymce全局訪問(wèn)（.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 定義全局變量
在項(xiàng)目中的typing.d.ts中聲明tinymce全局變量，不然會(huì)提示找不到tinymce
declare var tinymce: any;
2.4 拷貝皮膚文件到assets目錄下
Linux and MacOS
cp -r node_modules/tinymce/skins src/assets/skins
2.5 安裝中文支持
3. 創(chuàng)建TinyMCE組件中文語(yǔ)言包可以從這個(gè)地址下載：https://www.tinymce.com/downl...
下載下來(lái)的壓縮文件中會(huì)有一個(gè)langs目錄，里面有zh_CN.js，把這個(gè)目錄拷貝到src/assets目錄下，然后在全局中添加引用（.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", "../src/assets/langs/zh_CN.js"],
ng g c 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.html4. 使用自定義TinyMCE組件
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. 獲取和設(shè)置編輯器內(nèi)容
// 監(jiān)聽(tīng)onEditorKeyup事件
private keyupHandler(event) {
console.log("編輯器的內(nèi)容：", event);
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92499.html
摘要：本文首先完善一下前文上傳頭像的部分，增加上傳文件的大小和格式限制，其次把發(fā)布問(wèn)答部分中，問(wèn)題的詳細(xì)描述部分從普通的修改為富文本編輯器，這樣可以在問(wèn)題描述中添加各種格式的信息，如代碼表格列表圖片等。 本文是后端開(kāi)發(fā)——Flask初體驗(yàn)專欄的最后一篇文章，整個(gè)Q&A demo的簡(jiǎn)單框架其實(shí)已經(jīng)建立起來(lái)了，現(xiàn)在就是再優(yōu)化、完善一些細(xì)節(jié)。本文首先完善一下前文上傳頭像的部分，增加上傳文件的大小和...
摘要：簡(jiǎn)單介紹是一個(gè)輕量級(jí)的基于瀏覽器的所見(jiàn)即所得編輯器，由寫(xiě)成。它對(duì)和都有著非常良好的支持。功能方強(qiáng)大，并且功能配置靈活簡(jiǎn)單。另一特點(diǎn)是加載速度非?？斓?。所以我們使用作為代碼高亮插件。簡(jiǎn)單介紹：TinyMCE是一個(gè)輕量級(jí)的基于瀏覽器的所見(jiàn)即所得編輯器，由JavaScript寫(xiě)成。它對(duì)IE6+和Firefox1.5+都有著非常良好的支持。功能方強(qiáng)大，并且功能配置靈活簡(jiǎn)單。另一特點(diǎn)是加載速度非?？斓?..
摘要：選擇該頁(yè)面綁定的標(biāo)簽指定圖片上傳處理目錄注其中為了顯示為中文，標(biāo)明了中文，同時(shí)需要下載語(yǔ)言包放到對(duì)應(yīng)的文件夾下。 前言 我們常因?yàn)閐jango的自帶admin后臺(tái)功能而選擇該框架，但也因?yàn)槠渥詣?dòng)生成的特殊性而在做出特別的更改的時(shí)候束手束腳，鑒于項(xiàng)目已經(jīng)采用了django，而后臺(tái)要求能夠直接上傳富文本內(nèi)容直接用于網(wǎng)頁(yè)顯示，定制性高，后來(lái)翻了目前較為知名的幾款富文本編輯框，覺(jué)得還是tiny...
摘要：選擇該頁(yè)面綁定的標(biāo)簽指定圖片上傳處理目錄注其中為了顯示為中文，標(biāo)明了中文，同時(shí)需要下載語(yǔ)言包放到對(duì)應(yīng)的文件夾下。 前言 我們常因?yàn)閐jango的自帶admin后臺(tái)功能而選擇該框架，但也因?yàn)槠渥詣?dòng)生成的特殊性而在做出特別的更改的時(shí)候束手束腳，鑒于項(xiàng)目已經(jīng)采用了django，而后臺(tái)要求能夠直接上傳富文本內(nèi)容直接用于網(wǎng)頁(yè)顯示，定制性高，后來(lái)翻了目前較為知名的幾款富文本編輯框，覺(jué)得還是tiny...
摘要：選擇該頁(yè)面綁定的標(biāo)簽指定圖片上傳處理目錄注其中為了顯示為中文，標(biāo)明了中文，同時(shí)需要下載語(yǔ)言包放到對(duì)應(yīng)的文件夾下。 前言 我們常因?yàn)閐jango的自帶admin后臺(tái)功能而選擇該框架，但也因?yàn)槠渥詣?dòng)生成的特殊性而在做出特別的更改的時(shí)候束手束腳，鑒于項(xiàng)目已經(jīng)采用了django，而后臺(tái)要求能夠直接上傳富文本內(nèi)容直接用于網(wǎng)頁(yè)顯示，定制性高，后來(lái)翻了目前較為知名的幾款富文本編輯框，覺(jué)得還是tiny...
閱讀 1283·2023-04-26 01:38
閱讀 1475·2021-11-15 11:39
閱讀 3264·2021-09-22 15:43
閱讀 2665·2019-08-30 15:55
閱讀 2061·2019-08-30 14:17
閱讀 2864·2019-08-29 14:16
閱讀 3075·2019-08-26 18:36
閱讀 2620·2019-08-26 12:19
