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

2023-07-24 05:51:03 179

1.TinyMCE简介

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

2.安装和配置TinyMCE

2.1安装TinyMCE

npminstall-保存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

声明vartinymce：任何；

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

Linux和MacOS

cp-rnode_modules/tinymce/skinssrc/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组件

nggcmyeditor

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']
})
exportclassTinyEditorComponentimplementsAfterViewInit,OnDestroy{
@Input()elementId:String;
@Output()onEditorContentChange=newEventEmitter();

editor;

constructor(){}

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

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

}

//tiny-editor.component.html

4.使用自定义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']
})
exportclassTinyEditorComponentimplementsAfterViewInit,OnDestroy{
@Input()elementId:String;
@Output()onEditorContentChange=newEventEmitter();
editor;
constructor(privatehttp:HttpClient){}
ngAfterViewInit(){
letself=this;
tinymce.init({
selector:'#'+this.elementId,
height:600,
plugins:['link','table','image'],
skin_url:'assets/skins/lightgray',
setup:editor=>{
this.editor=editor;
editor.on('keyupchange',()=>{
constcontent=editor.getContent();
this.onEditorContentChange.emit(content);
});
},
//图片上传功能
images_upload_handler:function(blobInfo,success,failure){
varformData;
formData=newFormData();
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=>{
leturl=response['data']['imagePath'];
success(url);
});
}
});
}
//上传图片
privateuploadFile(url:string,formData:any){
varself=this;
varheaders=newHttpHeaders();
headers.set("Accept","application/json");
returnself.http.post(url,formData,{headers:headers});
}

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

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

复制代码
//监听onEditorKeyup事件
privatekeyupHandler(event){
console.log('编辑器的内容：',event);
}

总结

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

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

热门推荐

随机推荐