扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要讲解了Angular5如何整合富文本编辑器TinyMCE，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。
创新互联2013年至今，是专业互联网技术服务公司，拥有项目网站设计、做网站网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元头屯河做网站,已为上家服务,为头屯河各地企业和个人服务,联系电话:18980820575
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
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']
})
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.获取和设置编辑器内容
复制代码 // 监听onEditorKeyup事件 private keyupHandler(event) { console.log('编辑器的内容：', event); }
看完上述内容，是不是对Angular5如何整合富文本编辑器TinyMCE有进一步的了解，如果还想学习更多内容，欢迎关注创新互联行业资讯频道。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网