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 相关文章推荐
node在两个div之间移动,用ztree实现
Mar 06 Javascript
jQuery中noconflict函数的实现原理分解
Feb 03 Javascript
js实现select下拉框菜单
Dec 08 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
javascript的几种继承方法介绍
Mar 22 Javascript
微信小程序 条件渲染详解
Oct 09 Javascript
JavaScript数组去重的几种方法效率测试
Oct 23 Javascript
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
Dec 14 Javascript
Vue拖拽组件列表实现动态页面配置功能
Jun 17 Javascript
JS实现简单的表格增删
Jan 16 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
phpfans留言版用到的install.php
2007/01/04 PHP
使用Apache的htaccess防止图片被盗链的解决方法
2013/04/27 PHP
php实现文件下载(支持中文文名)
2013/12/04 PHP
php分割合并两个字符串的函数实例
2015/06/19 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
ListBox实现上移,下移,左移,右移的简单实例
2014/02/13 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
javascript弹出带文字信息的提示框效果
2016/07/19 Javascript
Angular2整合其他插件的方法
2018/01/20 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
详解使用React制作一个模态框
2019/03/14 Javascript
node微信开发之获取access_token+自定义菜单
2019/03/17 Javascript
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
Python列表生成器的循环技巧分享
2015/03/06 Python
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
Python 常用 PEP8 编码规范详解
2017/01/22 Python
利用arcgis的python读取要素的X,Y方法
2018/12/22 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
基于Python实现粒子滤波效果
2020/12/01 Python
俄罗斯卫浴采暖及维修用品超级市场:Dkrussia
2020/05/12 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
外语专业毕业生自我评价分享
2013/10/05 职场文书
爱护公共设施的标语
2014/06/24 职场文书
未婚证明书模板
2014/10/08 职场文书
老公保证书
2015/01/17 职场文书
奖金申请报告模板
2015/05/15 职场文书
隐形的翅膀观后感
2015/06/10 职场文书
Python实现智慧校园自动评教全新版
2021/06/18 Python
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android
Python 的演示平台支持 WSGI 接口的应用
2022/04/20 Python