代码之家 › 专栏 › 技术社区 › Zabs

将脚本标记插入HTML组件

photoeditorsdk html5 angular javascript

0

Zabs · 技术社区 · 6 年前

我正在尝试从这个网站实现PhotoeditorSDK的HTML5版本- https://docs.photoeditorsdk.com/guides/html5/v4/introduction/getting_started

我尝试使用 Angular Github repo 但是package.json似乎只对Angular 5&有效;6和我们的应用程序目前是有点过时的角度4.x(我们不能升级到5在这个时候)

在一个简单的应用程序中使用HTML5方法是相当容易的,但是在Angular 4中这似乎很棘手,因为我无法使用Angular限制 <script> 组件中的标记。

在索引中 <head>

<head>
  <!-- React Dependencies for the SDK UI -->
  <script src="js/vendor/react.production.min.js"></script>
  <script src="js/vendor/react-dom.production.min.js"></script>
  <!-- PhotoEditor SDK-->
  <script src="js/PhotoEditorSDK.min.js"></script>
  <!-- PhotoEditor SDK UI -->
  <script src="js/PhotoEditorSDK.UI.DesktopUI.min.js"></script>
  <link rel="stylesheet" href="css/PhotoEditorSDK.UI.DesktopUI.min.css"/>
</head>

在模板本身中有一个简单的 <div> 具体如下:

<div id="editor" style="width: 100vw; height: 100vh;"></div>

脚本标记本身如下所示-基本上会附加一个图像,该图像将显示在编辑器中进行编辑等。。

<script>
  window.onload = function () {
    var image = new Image()
    image.onload = function () {
      var container = document.getElementById('editor')
      var editor = new PhotoEditorSDK.UI.DesktopUI({
      container: container,
      // Please replace this with your license:    https://www.photoeditorsdk.com/dashboard/subscriptions
    license: '{"owner":"Imgly Inc.","version":"2.1", ...}',
    editor: {
      image: image
    },
    assets: {
      // This should be the absolute path to your `assets` directory
      baseUrl: '/assets'
    }
   })
  }
    image.src = './example.jpg'
}
</script>

我在想最好的使用方法 <脚本>

1 回复 | 直到 6 年前

1

2

Poul Kruijt 6 年前

您的组件有一个id为的元素 editor ngAfterViewInit window.onload 很久以前就有了。当 onload 被称为,元素根本不存在,所以把它放在那里也是个坏主意。

最好是从 ngAfterViewInit @ViewChild 注释:

declare const PhotoEditorSDK: any;

@Component({
  template: `<div style="width: 100vw; height: 100vh;" #editor></div>`
})
export class EditorComponent implements AfterViewInit {

  @ViewChild('editor') editor: ElementRef<HTMLElement>; 

  ngAfterViewInit(): void {
    const image = new Image();
    image.addEventListener('load', () => {
      const editor = new PhotoEditorSDK.UI.DesktopUI({
        container: this.editor.nativeElement,
        license: '{"owner":"Imgly Inc.","version":"2.1", ...}',
        editor: {
          image
        },
        assets: {
          baseUrl: '/assets'
        }
      });
    });

    image.src = './example.jpg'
  }
}