# Augular中接入tinymce富文本本文主要介绍了如何在augular中接入tinymce富文本编辑器，并且实现图片和音频自定义上传的逻辑。 # 一、参考文档 * 中文文档：http://tinymce.ax-z.cn/ * 英文文档：https://www.tiny.cloud/ * github：https://github.com/tinymce/ # 二、富文本编辑器的接入 ## 1、tiny插件的安装执行命令：npm install tinymce@5.2.0 @tinymce/tinymce-angular@3.4.0 注意： + 要根据augular的版本来选择第二个插件的版本，一般来说augular8以下的用@tinymce/tinymce-angular@3.0.0版本的，augular9以上用4.0版本的，augular4版本以下的不支持使用该插件，请注意升级 + 如果是安装了3.0版本之后，在package.json中要把对应的插件版本固定下来，要不然的话在其他环境装包的时候可能会出现自动升级的情况，从而导致错误的出现 ## 2、插件的引入 ### (1)、在项目的components目录下添加tiny-editor文件夹在下面创建tiny-editor.component.html、tiny-editor.component.scss、tiny-editor.component.ts文件 ### (2)、在tiny-editor.component.html文件中添加tiny-editor的引用,代码如下： ```html

``` 其中，editorConfig中存储的是tiny的配置信息，也可以不传，不传的话tiny默认提供了几个功能可以使用，editContent中存储的是富文本编辑器的内容，是字符串的形式 ### (3)、完善tiny-editor.component.ts文件内容根据上面，我们发现了两个参数，所以其实我们要做的很简单，就是把editorConfig的内容丰富好就行了，代码如下，以下会在代码中进行介绍： ```typescript // 编辑器配置 editorConfig = { base_url: '/tinymce', // 设置编辑器的目录，指定一些自定义的文件的目录 height: 500, // 编辑器的高度 menubar: false, // // 需要用到的插件，可以根据自己的需要进行选择，对应关系可以前往官网查看 plugins: 'print preview searchreplace autolink fullscreen image media imagetools link code codesample table charmap hr pagebreak nonbreaking anchor advlist lists textpattern help autosave', // 当前版本这四个插件用不了bdmap indent2em formatpainter axupimgs，想要用需要单独去下载相关包 // 菜单栏配置，这里设置决定了你需要向用户提供哪些功能的icon，具体功能的实现还是得plugins中实现 toolbar: 'code undo redo restoredraft | cut copy | forecolor backcolor bold italic underline strikethrough link | alignleft aligncenter alignright alignjustify | bullist numlist blockquote subscript superscript removeformat | formatselect fontselect fontsizeselect | table image media charmap hr fullscreen', // 设置语言，另外默认的是英文包，需要自己卸载中文语言包放在项目目录下，后续会展开说明 language: 'zh_CN', language_url: '/tinymce/lang/zh_CN.js', toolbar_mode : 'wrap', // 当菜单栏的总宽度超过编辑器的总宽度时，会折叠按钮，要想全部展示，设置为wrap换行展示，设置为scrolling在同一行滑动展示 branding: false, // 是否展示右下角tiny支持字样 autosave_ask_before_unload: false, // 不关闭的话，每次上传了图片之后再刷新都会提示是否重新加载页面 // 自定义字体大小选择内容 fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px', // 自定义字体的中英文难对照关系，默认英文 font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;', media_live_embeds: true, // 网上说开启该设置，视频上传后会自动播放，目测暂时不生效 file_picker_types: 'media', // 指定文件上传类型参数可为media(媒体)、image(图片)、file(文件) /* * @desc 自定义图片上传逻辑，否则的话就要服务端配合去tiny进行一些注册 * @param blobInfo 文件信息，blobInfo.blob()文件流，blobInfo.filename()文件名称 * @param succFun 成功回调，需要将成功的url放在这里，会回显到成功的框内 * @param failFun 失败回调，上传失败后的提示 */ images_upload_handler: (blobInfo, succFun, failFun) => { // 这里去实现自己公司的图片上传的功能即可 this.post('xxx', {chunk: blobInfo.blob()}) .then(res => { succFun(res.url) }) .catch(err => { failFun(err) }) }, //自定义文件选择器的回调内容 file_picker_callback: (callback, value, meta) => { if (meta.filetype === 'media') { let input = document.createElement('input'); input.setAttribute('type', 'file'); let _this = this; input.onchange = function () { // @ts-ignore let file = this.files[0]; // 上传视频方法 _this.uploadMv(file); // 因为只有这个callback才能够将他回显到页面上，所以要在这里callback if(_this.uploaded) { callback(_this.mvUrl); } else { setTimeout(() => { callback(_this.mvUrl); }, 1000) } } // 触发点击 input.click() // callback('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'); } else { this.commonMethodService.toast('请选择正确的音频文件'); } }, // tiny上传完音频返回的是一张封面图，而不是可播放的音频，要想可播放的话，需要加以下的方法，来渲染一个可以播放音频的video出来 media_url_resolver: function (data, resolve) { try { console.log('data', data) let videoUri = encodeURI(data.url); let embedHtml = `

` resolve({ html: embedHtml }); } catch (e) { resolve({ html: "" }); } } }; ``` ## 3、其他配置信息修改 ### （1）、修改augular.json 主要是在assets下指定将node_modules里面插件的内容部署到我们指定的文件目录下，从而让timy编辑器能够找到，完整代码如下 ``` json { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "web-template": { "root": "", "sourceRoot": "src", "projectType": "application", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.app.json", "assets": [ "src/favicon.ico", "src/assets", { "glob": "**/*", "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/", "output": "/assets/" }, { "glob": "**/*", "input": "node_modules/tinymce/skins", "output": "/tinymce/skins/" }, { "glob": "**/*", "input": "node_modules/tinymce/themes", "output": "/tinymce/themes/" }, { "glob": "**/*", "input": "node_modules/tinymce/plugins", "output": "/tinymce/plugins/" }, { "glob": "**/*", "input": "src/tinymce/lang", "output": "/tinymce/lang/" }, { "glob": "**/*", "input": "node_modules/tinymce/icons", "output": "/tinymce/icons/" }, { "glob": "**/*", "input": "node_modules/tinymce", "output": "/tinymce/" } ], "styles": [ "node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css", "node_modules/@jdb-ui/core/publish/src/jdb-plg-ui.min.css", "src/styles.scss", "src/jdb-ui.scss" ], "scripts": [ "src/assets/laydate.js", "node_modules/tinymce/tinymce.min.js" ] }, "configurations": { "serve": { "fileReplacements": [{ "replace": "src/environments/environment.ts", "with": "src/environments/environment.serve.ts" }] }, "debug": { "fileReplacements": [{ "replace": "src/environments/environment.ts", "with": "src/environments/environment.test.ts" }] }, "test": { "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "fileReplacements": [{ "replace": "src/environments/environment.ts", "with": "src/environments/environment.test.ts" }] }, "huidu": { "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "fileReplacements": [{ "replace": "src/environments/environment.ts", "with": "src/environments/environment.huidu.ts" }] }, "betaProd": { "fileReplacements": [{ "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" }], "optimization": true, "outputHashing": "all", "sourceMap": true, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true }, "production": { "fileReplacements": [{ "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" }], "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true } } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "web-template:build" }, "configurations": { "serve": { "browserTarget": "web-template:build:serve", "proxyConfig": "proxy.serve.js" }, "debug": { "browserTarget": "web-template:build:debug", "proxyConfig": "proxy.debug.json" } } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "web-template:build" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "src/test.ts", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.spec.json", "karmaConfig": "src/karma.conf.js", "styles": [ "node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css", "node_modules/@jdb-ui/core/publish/src/jdb-plg-ui.min.css", "src/styles.scss" ], "scripts": [ "src/assets/laydate.js" ], "assets": [ "src/favicon.ico", "src/assets", { "glob": "**/*", "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/", "output": "/assets/" } ] } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ "src/tsconfig.app.json", "src/tsconfig.spec.json" ], "exclude": [ "**/node_modules/**" ] } } } }, "web-template-e2e": { "root": "e2e/", "projectType": "application", "architect": { "e2e": { "builder": "@angular-devkit/build-angular:protractor", "options": { "protractorConfig": "e2e/protractor.conf.js", "devServerTarget": "web-template:serve" }, "configurations": { "production": { "devServerTarget": "web-template:serve:production" } } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": "e2e/tsconfig.e2e.json", "exclude": [ "**/node_modules/**" ] } } } } }, "defaultProject": "web-template", "schematics": { "@schematics/angular:component": { "styleext": "scss", "spec": false }, "@schematics/angular:directive": { "spec": false }, "@schematics/angular:service": { "spec": false }, "@schematics/angular:pipe": { "spec": false }, "@schematics/angular:module": { "spec": false } } } ``` # 三、常见问题解决 ## 1、富文本编辑器报icons文件找不到了或者说warning提示你说要先注册此时你F12打开你的netWork查看的话，你会发现你的浏览器加载的tiny.min.js文件的话，是走的cdn加载，也就是从网络上获取的文件。从网络上获取的文件，他本身是不会有icons相关内容的，所以他才会给你报错说，有个icons.js文件找不到了，然后那个注册的提示也是同理，因为你走的是cdn在线的一个文件，而且此时其实文件加载也是比较慢的解决方法：在augular.json中增加scripts配置，配置内容为，即为指定从node_modules中加载tiny.min.js文件，就可以了，详细配置位置等参考上满augular.json中配置 ``` json "scripts": [ "node_modules/tinymce/tinymce.min.js" ] ``` 注意： 1、关于提示没有在tiny注册这个东西还有一个解决方法就是去tiny那边注册一下，然后把你的域名添加到白名单就好了 2、为什么要配置本地加载也有一个好处，虽然说cdn是就近加速，但是其实还是会受到网络状态的影响，会导致富文本的加载速度和体验都不会很好，所以换成本地加载的话也能有效的解决这一个问题 ## 2、关于图片上传 tiny提供了自定义图片上传的参数images_upload_handler，在这里可以拦截自定义图片上传的逻辑 ```typescript /* * @param blobInfo -- 图片的文件流，提供了很多方法可以获得文件的名字、内容等信息 * @param succFun 成功的回调，将上传成功的图片url放在回调中即可 * @param failFun 失败回调 */ images_upload_handler: (blobInfo, succFun, failFun) => { this.post('xxxx', params) .then((res) => { succFun(res.data && res.data.url); }) .catch((err) => { failFunn(err); }) } ``` ## 3、关于音频上传 tiny提供了自定义文件上传的参数file_picker_callback，在这里可以拦截自定义文件上传的逻辑，这里面包括了media（媒体），image（图片），file（文件） ``` typescript file_picker_callback: (callback, value, meta) => { if (meta.filetype === 'media') { // 创建一个input框，来触发文件选择的逻辑 let input = document.createElement('input'); input.setAttribute('type', 'file'); let _this = this; input.onchange = function () { // @ts-ignore let file = this.files[0]; // 自定义音频上传逻辑，业务自己实现 _this.uploadMv(file); if(_this.uploaded) { // 上传成功之后，将url回调回去 callback(_this.mvUrl); } else { setTimeout(() => { callback(_this.mvUrl); }, 1000) } } // 触发点击 input.click() // callback('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'); } else { this.commonMethodService.toast('请选择正确的音频文件'); } }, ``` ## 4、音频上传之后，只能展示封面，无法播放视频核心思路就是我们构建一个可以播放音频的html的片段，插入到富文本中，利用tiny提供的media_url_resolver方法 ``` typescript // tiny上传完音频返回的是一张封面图，而不是可播放的音频，要想可播放的话，需要加以下的方法，来渲染一个可以播放音频的video出来 media_url_resolver: function (data, resolve) { try { console.log('data', data) let videoUri = encodeURI(data.url); let embedHtml = `

` resolve({ html: embedHtml }); } catch (e) { resolve({ html: "" }); } } ```