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


Posted in Javascript onMay 26, 2020

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(汉化+上传)的文章就介绍到这了,更多相关Angular5整合富文本编辑器TinyMCE(汉化+上传)内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery实战之品牌展示列表效果
Apr 10 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
动态加载jQuery的方法
Jun 16 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
Jul 27 Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
Jan 22 Javascript
使用Vuex实现一个笔记应用的方法
Mar 13 Javascript
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 Javascript
vue下拉菜单组件(含搜索)的实现代码
Nov 25 Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 Javascript
Vue中keep-alive组件作用详解
Feb 04 Javascript
js校验开始时间和结束时间
May 26 #Javascript
vue实现简单跑马灯效果
May 25 #Javascript
Js和VUE实现跑马灯效果
May 25 #Javascript
Vue实现简单的跑马灯
May 25 #Javascript
Vue实现跑马灯效果
May 25 #Javascript
JavaScript实现移动端弹窗后禁止滚动
May 25 #Javascript
ES2020 已定稿,真实场景案例分析
May 25 #Javascript
You might like
PHP可变函数的使用详解
2013/06/14 PHP
php打开文件fopen函数的使用说明
2013/07/05 PHP
php的hash算法介绍
2014/02/13 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
如何在PHP中使用数组
2020/06/09 PHP
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
Javascript使用function创建类的两种方法(推荐)
2016/11/19 Javascript
JS身份证信息验证正则表达式
2017/06/12 Javascript
jQuery实现仿京东防抖动菜单效果示例
2018/07/06 jQuery
修改vue+webpack run build的路径方法
2018/09/01 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
详解vue中v-model和v-bind绑定数据的异同
2020/08/10 Javascript
[01:03:13]VG vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
python实现猜单词小游戏
2020/05/22 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
2019/12/03 HTML / CSS
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
硕士研究生个人求职信
2013/12/04 职场文书
矫正人员思想汇报
2014/01/08 职场文书
开门红主持词
2014/04/02 职场文书
投资建议书模板
2014/05/12 职场文书
国贸专业毕业求职信
2014/06/11 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
化学教育专业自荐信
2014/07/04 职场文书
小学领导班子对照材料
2014/08/23 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
乐山大佛导游词
2015/02/02 职场文书
司机岗位职责
2015/02/04 职场文书
中标通知书范本
2015/04/17 职场文书
人事聘任通知
2015/04/21 职场文书