时间戳

首页 > 解决方案 > 在 tinymce 中添加自定义图片上传

javascript - 在 tinymce 中添加自定义图片上传

问题描述

tinymce 并使用图片上传，我已经修改了我的配置并从系统添加了图片上传。这工作正常并获得了新标签上传，下面是我的配置：

config: any = {
    height: 250,
    theme: 'modern',
    // powerpaste advcode toc tinymcespellchecker a11ychecker mediaembed linkchecker help
    plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image imagetools link media template codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists textcolor wordcount contextmenu colorpicker textpattern',
    toolbar: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent fontselect fontsizeselect | removeformat',
    image_advtab: true,
    imagetools_toolbar: 'rotateleft rotateright | flipv fliph | editimage imageoptions',
    menubar: true,
    statusbar: false,
    images_upload_handler: (blobInfo, success, failure) => {
      let firmuseracctid;
      let loggedInUserData = JSON.parse((sessionStorage.getItem('userDetails')));
      if (loggedInUserData && loggedInUserData.useracctid) {
        firmuseracctid = loggedInUserData.useracctid
      }
      var formData;
      formData = new FormData();
      let s3signatureKey = 'path';
      let headerImageName = blobInfo.filename();
      let status: any = 0;
      formData.append('status', status);
      formData.append('signatureKey', s3signatureKey);
      formData.append("file", blobInfo.blob(), blobInfo.filename());
      //console.log(formData);
      this.uploadFile(formData).subscribe(response => {
        if (response) {
          this.headerImageUrl = 'myURL';
          success(this.headerImageUrl);
        }
      });
    },
    content_css: [
      '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
      '//www.tinymce.com/css/codepen.min.css'
    ]
  };

现在我需要添加另一个选项卡，我必须从我的服务端加载所有图像，为此如何添加配置，对此有任何帮助。

标签： javascriptangulartinymce

解决方案

TinyMCE 没有配置选项来创建用于浏览图像存储库的整个 UI。为此，您有几个选择。

TinyMCE 生产两种可以为您做到这一点的产品：

  • 莫西管理器
  • 微型驱动器

有 3rd 方插件可以为您执行此操作，例如：

  • 响应式文件管理器
  • Roxy Fileman

最后，您可以选择创建自己的文件管理器并使用 TinyMCE 的 API 与您创建的内容进行交互（以上工具都可以这样做）。

推荐阅读