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 相关文章推荐
js的event详解。
Sep 06 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
输入框过滤非数字的js代码
Sep 18 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
js显示当前日期时间和星期几
Oct 22 Javascript
CSS3+JavaScript实现翻页幻灯片效果
Jun 28 Javascript
vue中的event bus非父子组件通信解析
Oct 27 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 Javascript
微信小程序实现同时上传多张图片
Feb 03 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
JS倒计时两种实现方式代码实例
Jul 27 Javascript
使用Typescript开发微信小程序的步骤详解
Jan 12 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
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
thinkPHP模型初始化实例分析
2015/12/03 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
PHP将MySQL的查询结果转换为数组并用where拼接的示例
2016/05/13 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
php微信公众号开发之校园图书馆
2018/10/20 PHP
PHP实现的文件浏览器功能简单示例
2019/09/12 PHP
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
Jquery插件编写简明教程
2014/03/25 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
2014/05/11 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
2014/10/16 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
2017/06/20 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
2018/10/19 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
在vue中利用v-html按分号将文本换行的例子
2019/11/14 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
python实现无证书加密解密实例
2014/10/27 Python
Python字符串、整数、和浮点型数相互转换实例
2018/08/04 Python
Python从文件中读取指定的行以及在文件指定位置写入
2019/09/06 Python
Python列表操作方法详解
2020/02/09 Python
Python3爬虫发送请求的知识点实例
2020/07/30 Python
Python如何使用神经网络进行简单文本分类
2021/02/25 Python
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
党员违纪检讨书
2014/02/18 职场文书
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
井冈山红色之旅心得体会
2014/10/07 职场文书
金陵十三钗观后感
2015/06/04 职场文书
第一书记观后感
2015/06/08 职场文书
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang