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 相关文章推荐
JavaScript中的new的使用方法与注意事项
May 16 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
Jun 01 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 25 Javascript
angularJS 中$scope方法使用指南
Feb 09 Javascript
原生Js实现简易烟花爆炸效果的方法
Mar 20 Javascript
JavaScript中的replace()方法使用详解
Jun 06 Javascript
完善的jquery处理机制
Feb 21 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 Javascript
小程序使用分包的示例代码
Mar 23 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 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的安全
2006/10/09 PHP
php 将excel导入mysql
2009/11/09 PHP
解决PHP4.0 和 PHP5.0类构造函数的兼容问题
2013/08/01 PHP
js正则表达式的使用详解
2013/07/09 Javascript
JsRender for object语法简介
2014/10/31 Javascript
js实现简单计算器
2015/11/22 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
Bootstrap模态框插入视频的实现代码
2017/06/25 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
python实现简单socket通信的方法
2016/04/19 Python
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
Django 中使用流响应处理视频的方法
2018/07/20 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
Pycharm无法打开双击没反应的问题及解决方案
2020/08/17 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
python利用platform模块获取系统信息
2020/10/09 Python
浅谈CSS3特性查询(Feature Query: @supports)功能简介
2017/07/31 HTML / CSS
澳大利亚领先的女帽及配饰公司:Morgan&Taylor
2019/12/01 全球购物
音乐节策划方案
2014/06/09 职场文书
伊琍体标语
2014/06/25 职场文书
怎样写离婚协议书
2014/09/10 职场文书
2014年语文教研组工作总结
2014/12/06 职场文书
2019年大学生学年自我鉴定!
2019/03/25 职场文书
导游词之崇武古城
2019/10/07 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers
javascript canvas实现雨滴效果
2021/06/09 Javascript
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL
Golang 遍历二叉树
2022/04/19 Golang