首页 >> js开发 >> jsAngular5整合富文本编辑器TinyMCE的方法(汉化+上传)js大全
jsAngular5整合富文本编辑器TinyMCE的方法(汉化+上传)js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
1. TinyMCE简介1. TinyMCE简介1. TinyMCE简介TinyMCE是一个轻量级的富文本编辑器,相对于CK编辑器更加精简,但必须满足绝大部分场景的需要。2.安装和配置TinyMCE2.安装和配置TinyMCE2.安装和配置TinyMCE2.1安装TinyMCEnpm install-保存tinymce2.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"
],
"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和MacOScp -r node_modules / tinymce / skins src / assets / skins2.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"
],
“ 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组件3.创建TinyMCE组件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);
}
}
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
// 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);
}
}
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.获取和设置编辑器内容
[elementId]="'defined-tinymce-editor'"
(onEditorContentChange)="keyupHandler($event)">
// 监听onEditorKeyup事件
private keyupHandler(event) {
console.log('编辑器的内容:', event);
}
[elementId]="'defined-tinymce-editor'"
(onEditorContentChange)="keyupHandler($event)">
// 监听onEditorKeyup事件
private keyupHandler(event) {
console.log('编辑器的内容:', event);
}总结总结总结
"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"
],
"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和MacOScp -r node_modules / tinymce / skins src / assets / skins2.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"
],
“ 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组件3.创建TinyMCE组件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);
}
}
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
// tiny-editor.component.html
4.使用自定义TinyMCE组件
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);
}
}
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.获取和设置编辑器内容
(onEditorContentChange)="keyupHandler($event)">
// 监听onEditorKeyup事件
private keyupHandler(event) {
console.log('编辑器的内容:', event);
}
(onEditorContentChange)="keyupHandler($event)">
// 监听onEditorKeyup事件
private keyupHandler(event) {
console.log('编辑器的内容:', event);
}总结总结总结
相关文章:
- js在vue中使用防抖函数组件操作js大全
- jsJS实现audio音频剪裁剪切复制播放与上传(步骤详解)js大全
- jsvue 页面回退mounted函数不执行的解决方案js大全
- js解决vuex数据页面刷新后初始化操作js大全
- jsAngular利用HTTP POST下载流文件的步骤记录js大全
- js解决vue动态路由异步加载import组件,加载不到module的问题js大全
- jsElement Input输入框的使用方法js大全
- jsVue中的this.$options.data()和this.$data用法说明js大全
- js关于angular浏览器兼容性问题的解决方案js大全
- js解决vue的router组件component在import时不能使用变量问题js大全