在 Silverstripe 中将 SVG 视为图像

Question

我正在尝试在 Silverstripe 中上传图像并将它们视为图像而不是文档 link。

我已经将 SVG 添加到允许的文件类型中，并且可以上传 SVG 文件，但是当我点击插入时，编辑器将标签插入为

<a href="/assets/uploads/somefile.svg">somefile.svg</a>

我想将 SVG 视为任何其他图像格式，插入时会将标签作为常规图像插入

<img src="/assets/uploads/somefile.svg">

实现此目标的最佳方法是什么？

Answer 1

在 HtmlEditorField.js 左右调试后，我发现 SVG 不显示的问题是 "Insert Media" 屏幕的上传字段没有将 SVG 视为图像。（我原本以为问题出在 TinyMCE 但事实并非如此）

我知道 File class has a static property called app_categories 包含诸如 SS 认为是图像的所有扩展名之类的东西。默认情况下，SVG 不在此列表中。

在 Silverstripe 3.1 中，如果您指定以下内容，它会将 SVG 添加到 "image" 类别：

$categories = File::config()->app_categories;
$categories['image'][] = 'svg';
File::config()->app_categories = $categories;

或者作为 YAML config:

File:
  app_categories:
    image: 
      - svg

这个简单的更改足以让 "Insert Media" 屏幕上的文件上传正确地将 SVG 视为图像，进而触发正确的 entwine 函数使用 <img> 标签而不是主播.

虽然此方法解决了您的特定问题，但在将 SVG 添加到图像应用类别时，Silverstripe 的其他部分可能会产生副作用。

还有一件事，我需要更新我的资产文件夹中的 .htaccess 文件，以允许查看 SVG 文件，否则我会收到 403 Forbidden 错误。

Answer 2

在 SS3 中只需在 config.yml:

中使用它

File:
    allowed_extensions:
        - svg
Image:
    allowed_extensions:
        - svg

Answer 3

我已经编写了一个 SilverStripe 模块来完全做到这一点（将 SVG 视为图像而不是文件）：https://github.com/micschk/silverstripe-svg-images/

如果您不想使用该模块，请参阅自述文件以获取有关如何设置 SVG-as-image 的一般指示。

Treat SVG as an image in Silverstripe