IMG.LY Creative Editor SDK 的自托管默认字体是从错误的网址提供的

Question

我正在使用 IMG.LY 的创意编辑器，并希望从我的应用程序而不是 IMG.LY CDN 提供字体。我的默认资产源配置如下所示：

instance.addDefaultAssetSources({
  baseURL: '/public/cesdk/assets/',
});

预期行为

我希望在选择时直接从 addDefaultAssetSources 中指定的 URL 应用字体。

实际行为

字体从附加到 CreativeEditorSDK 配置中定义的基本 URL 的 URL 加载。

重现步骤

如果我更改文本元素的字体，选择器中显示的所有字体都会从预期的 URL 加载：

http://localhost:9000/public/cesdk/assets//ly.img.typeface/fonts/imgly_font_abril_fatface_regular.ttf

但是，当我单击字体将其应用到文本元素时，该字体将从以下位置加载：

http://localhost:9000/public/cesdk/engine/public/cesdk/assets//ly.img.typeface/fonts/imgly_font_bungee_inline.ttf

默认资源源的基本 URL 似乎已附加到 CreativeEditorSDK 配置中指定的基本 URL。

此处提供了重现该问题的示例：https://github.com/rtm-celum/imgly-hosted-fonts

详情

我遵循了这些指南

• 集成创意编辑器
• 字体和字体

IMG.LY 设置：

import CreativeEditorSDK from '../node_modules/@cesdk/cesdk-js/index.js';

const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  // Serve assets from IMG.LY cdn or locally
  // baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.35.1/assets',
  baseURL: '/public/cesdk/engine',
  locale: 'en',
};

CreativeEditorSDK.create('#cesdk_container', config).then(async (instance) => {
  await instance.addDefaultAssetSources({
    baseURL: '/public/cesdk/assets/',
    excludeAssetSourceIds: [
      'ly.img.vectorpath',
      'ly.img.filter.duotone',
      'ly.img.filter.lut',
      'ly.img.sticker',
      'ly.img.image',
      'ly.img.colors.defaultPalette',
      'ly.img.effect',
      'ly.img.blur',
    ],
  });

  const engine = instance.engine;
  const scene = engine.scene.create();
  const page = engine.block.create('page');
  engine.block.appendChild(scene, page);
});

截图

字体选择器

字体选择器 - 网络跟踪

应用字体

应用字体 - 网络跟踪

Answer 1

问题的根本原因是我使用了

relative URL

作为

baseURL

。创意编辑器 SDK 期望

baseURL

为

absolute URL

。

所以而不是

instance.addDefaultAssetSources({
    baseURL: '/public/cesdk/assets/',
});

我需要使用绝对 URL，例如：

instance.addDefaultAssetSources({
    baseURL: 'https://mywebsite.com/public/cesdk/assets/',
});

有关提供资产的更多信息请参阅本指南：https://img.ly/docs/cesdk/engine/guides/assets-served-from-your-own-servers/