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 相关文章推荐
Ajax,UTF-8还是GB2312 eval 还是execScript
Nov 13 Javascript
Jquery通过Ajax访问XML数据的小例子
Nov 18 Javascript
jQuery中prepend()方法用法实例
Dec 25 Javascript
Bootstrap select实现下拉框多选效果
Dec 23 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
JavaScript实现的超简单计算器功能示例
Dec 23 Javascript
Angular利用trackBy提升性能的方法
Jan 26 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 Javascript
微信小程序实现简单文字跑马灯
May 26 Javascript
JavaScript语句错误throw、try及catch实例解析
Aug 18 Javascript
vue的项目如何打包上线
Apr 13 Vue.js
使用refresh_token实现无感刷新页面
Apr 26 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入门之连接mysql数据库的一个类
2012/04/21 PHP
php调用C代码的实现方法
2014/03/11 PHP
PHP调用wsdl文件类型的接口代码分享
2014/11/19 PHP
ecshop实现smtp发送邮件
2015/02/03 PHP
div层的移动及性能优化
2010/11/16 Javascript
javascript上传图片前预览图片兼容大多数浏览器
2013/10/25 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
js+canvas绘制五角星的方法
2016/01/28 Javascript
JavaScript File API文件上传预览
2016/02/02 Javascript
javascript对象的创建和访问
2016/03/08 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
快速处理vue渲染前的显示问题
2018/03/05 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
2018/08/16 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
python的绘图工具matplotlib使用实例
2014/07/03 Python
使用Python生成url短链接的方法
2015/05/04 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
python通过ffmgep从视频中抽帧的方法
2018/12/05 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
Python3最长回文子串算法示例
2019/03/04 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
scrapy数据存储在mysql数据库的两种方式(同步和异步)
2020/02/18 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
html5教你做炫酷的碎片式图片切换 (canvas)
2017/07/28 HTML / CSS
英国快时尚女装购物网站:PrettyLittleThing
2018/08/15 全球购物
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
牵手50香港:专为黄金岁月的单身人士而设的交友网站
2020/08/14 全球购物
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
店长岗位职责
2013/11/21 职场文书
三八妇女节慰问信
2015/02/14 职场文书
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript
详解JS数组方法
2021/11/20 Javascript