将SVG视为Silverstepe中的图像


Treat SVG as an image in Silverstripe

我正在尝试在Silversstripe中上传图像,并将其视为图像而非文档链接。

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

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

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

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

实现这一目标的最佳方式是什么?

在围绕HtmlEditorField.js进行调试后,我发现SVG不显示的问题是"插入媒体"屏幕的上传字段不将SVG视为图像。(我原本以为问题出在TinyMCE,但事实并非如此)

我知道File类有一个名为app_categories的静态属性,其中包含SS认为是图像的所有扩展。默认情况下,SVG不在此列表中。

在Silversstripe 3.1中,如果指定以下内容,它将把SVG添加到"图像"类别中:

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

或者作为YAML配置:

File:
  app_categories:
    image: 
      - svg

这个简单的更改足以让上传到"插入媒体"屏幕上的文件正确地将SVG视为图像,从而触发右纠缠函数使用<img>标签而不是锚。

虽然这种方法解决了您的特定问题,但在Silversstripe的其他部分中,将SVG添加到图像应用程序类别可能会产生副作用。

还有一件事,我需要更新资产文件夹中的.htaccess文件,以便查看SVG文件,否则我会出现403 Forbidden错误。

在SS3中,只需在config.yml:中使用即可

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

我已经编写了一个SilverStripe模块来做到这一点(将SVG视为图像而非文件):https://github.com/micschk/silverstripe-svg-images/

如果您不想使用该模块,请参阅README,了解如何将SVG设置为图像的一般指针。