TinyMCE 图像自定义哈希

Question

我正在使用 TinyMCE 编辑器处理一些旧网页内容。 所有 HTML 内容都可以包含格式为“.. <img src="##IMAGE:1234##"/> ..”的图像的“链接”。 我需要在 HTML 预览中显示图像，但在代码中它必须保持格式“..<img src="##IMAGE:1234##"/>..”

我知道下载/内联所有图片的 URL => http://example.com/images/1234

我是否需要解析编辑器内容，将 IMG src 替换为来自原始 IMG src (##IMAGE:1234##) 的 URL + ID。

有什么办法，如何在 HTML 代码模式下有类似“..<img src="##IMAGE:1234##"/>..”的东西，但在预览模式下显示图像？

谢谢

Answer 1

TinyMCE 依赖浏览器来呈现您提供给编辑器的 HTML。由于您提供的当前src 无效，因此图像不会显示。

我的建议是使用data-xxx 来存储您需要的值，并在将内容放入编辑器时以编程方式设置src 属性。

例如...

您可以将图像标签作为<img data-imgsrc="##IMAGE:1234##" /> 存储在数据库中。当您准备好将内容加载到编辑器中时，将src 属性添加到图像标签，这样您就可以得到<img data-imgsrc="##IMAGE:1234##" src='http://example.com/images/1234' />。这允许编辑器渲染图像。

当您将 HTML 内容保存回数据库时，您可以从任何也具有 data-imgsrc 属性的图像中删除 src 属性（假设您出于某种原因需要这样做）。