angular2 tinymce多图上传

多图上传(第三方插件,非官方插件使用方案)

由于tinymce官方并没有提供多图上传的功能,所以只能自己开发或者依赖于第三方开发者
在上文提供的文档中的中文文档地址中,无私的贡献者,为我们提供了更多插件 -> 图片批量上传, 此为使用说明地址

配置信息

    {
      selector: '#oneweek-editor',
      // plugins是tinymce的各种插件
      plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu codesample autosize axupimgs',
      // 语言包可以使用tinymce提供的网址,但是墙的原因,会连不上/网速慢,所以还是自行下载,下载地址:https://www.tiny.cloud/get-tiny/language-packages/
      language_url: 'zh_CN.js的地址',
      language: 'zh_CN',
      images_upload_handler: (blobInfo, success, failure) => {
        // blobInfo.blob()为file, blobInfo.blob().name为文件名称,调用成功后需要回调success(文件名称),向页面传递图片信息,如果失败了需要回调failure(失败信息)
        console.log('上传图片啦');
      },
      // toolbar定义快捷栏的操作, | 用来分隔显示
      toolbar: 'image axupimgs | codesample | bullist numlist | bold italic underline strikethrough | alignleft'
        + ' aligncenter alignright alignjustify | undo redo',
      // 这里是代码块的一些语言选择,好像暂时还没支持typescript
      codesample_languages: [
        {text: 'Python', value: 'python'},
        {text: 'HTML/XML', value: 'markup'},
        {text: 'JavaScript', value: 'javascript'},
        {text: 'CSS', value: 'css'},
        {text: 'Java', value: 'java'}
      ],
      autoresize_on_init: false,
      // 最小高度
      min_height: 350,
      // 最大高度
      max_height: 650
    }

问题

怎么使用第三方插件

使用说明截图如下:

说明中指明,要将zip下载后放置到tinymce主目录下的plugins文件夹内,此时就出现一个问题:angular安装的tinymce使用地址默认是官方地址,也没有在配置中提供使用自己的地址的参数,怎么放第三方插件

解决方案

下载tinymce到本地

下载地址
在官网上下载tinymce包,下载完成后解压到自己项目中,也可以放到第三方空间(如阿里云的oss,第三方文件托管平台,只要能在项目中访问到即可),再将下载到的axupimgs.zip解压,将解压得到的axupimgs整个文件夹都挪到tinymce文件夹下的plugins文件夹下即可
即

• tinymce
  • plugins
    • axupimgs

配置index.html

在index.html中加入对tinymce.min.js的引用

<script type="text/javascript" src="tinymce.min.js地址"></script>

若放在自己的项目中,还需要在angular.json中,加入对tinymce.min.js的引入

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/course",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "tinymce.min.js的地址,如src/assets/tinymce.min.js"
            ],

启动项目,可以看到

点击多图上传,会出现如下窗口,并且在console控制台中不会报错,功能都能正常使用

upfiles.html 出现iframe跨域

如果你的tinymce文件夹不是放在项目中,而是托管到第三方平台,如阿里云的oss,在点击多图上传时,在console中会打印跨域问题,并且你也无法在多图上传的窗口中进行操作
这是因为第三方开发者在编写程序时,使用的iframe嵌套,而此刻我们的项目和tinymce地址不同,出现了跨域

解决方案

修改axupimgs中的plugin.min.js文件

var baseURL=tinymce.baseURL;
var iframe1 = baseURL+'/plugins/axupimgs/upfiles.html';

改为

var baseURL = document.location.protocol + '//' + document.location.host;
var iframe1 = baseURL + '/assets/plugins/axupimgs/upfiles.html';

将 axupimgs文件夹下的loading.gif和upfiles.html都放到项目中

将axupimgs文件夹下的loading.gif和upfiles.html都放到项目的assets文件夹下,结构如下:
src

• assets
  • plugins
  • axupimgs
    • upfiles.html
    • loading.gif
      在angular.json文件中加入axupimgs文件夹:

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/course",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/assets/plugins/axupimgs"
            ],

重新启动项目,即可正常使用多图上传