Captions do not display for Images inserted from Media Library

[mahangu]

Expected behavior

When you insert Images from the Media Library, and set a caption for them, the caption should show up in the Post when Previewed and Published.

Actual behavior

The captions do not show up in the post when Previewed and Published.

The caption for the Image inserted from the Media Library shows up in the Editor:

But not in the Preview:

Or in the Published Post:

Steps to reproduce the behavior

1. Switch to Media LIbrary and upload a few Images
2. Create a new Post
3. In this post, insert images from the Media Library to the post and add caption. Observe that the caption shows up in the Editor.
4. Hit Preview, then Publish. Notice that the caption does not display in Preview or Published Post.

Tested on iPhone XR / iOS 13.2.3 / WordPress for iOS 13.7 / NOT using block editor

First tested by @melindahelt, and reported by a user in 2370166-zen and 2532609-zen.

Originally reported it on the WordPress iOS GitHub repo - wordpress-mobile/WordPress-iOS#13058 - but was asked to cross-post it here because it's an Aztec Editor issue.

cc @designsimply @yaelirub

[designsimply]

Noting the comment I left on the other issue after testing on 2019-12-09:

Tested and confirmed that captions added to images in the Aztec editor on the iOS app don't show up in previews or the published post viewed on the front end. (46s)

When I add a caption to an image in the Aztec editor, the HTML source looks something like this:

[caption id=""]<img src="https://madefortesting190318.files.wordpress.com/2019/11/img_20191012_104210.jpg" class="size-full">Lots of plums[/caption]

^{Tested with WPiOS 13.8.0.0 TestFlight beta on iPhone 6S iOS 13.2.3.}

When I add a caption to an image using the classic editor on the web, the caption shows up normally and the HTML source looks something like this:

[caption id="attachment_450" align="alignnone" width="3931"]<img class="alignnone size-full wp-image-450" src="https://madefortesting190318.files.wordpress.com/2019/11/img_20191031_175455.jpg" alt="IMG_20191031_175455" width="3931" height="2948" /> Peppers[/caption]

^{Tested with WPiOS 13.8.0.0 TestFlight beta on iPhone 6S iOS 13.2.3.}

The caption shortcode meta data is missing when you add an image from the media library to a post using Aztec on the iOS app.

[cc9166]

WKWebView 中无法显示 file:// 协议的本地文件链接，原因通常是出于安全考虑，iOS 系统限制了从 Web 内容加载本地文件。file:// 协议的文件路径是在本地文件系统上的，而 WKWebView 默认不允许加载本地文件或通过 file:// 访问它们。

解决方案：
1.使用 file:// 的正确路径：

2.确保文件路径正确且已授权给 WKWebView。例如，文件路径必须指向一个有效的路径，并且该文件必须存在于沙盒中的正确目录。
允许 file:// 协议的加载：

3.需要通过设置 WKPreferences 来允许加载本地文件。你可以通过 WKWebViewConfiguration 来设置允许访问本地文件。
使用 data:// 或 base64 格式来加载图片：

4.另一种方法是将图像文件转换为 base64 编码，并将其嵌入 HTML 中，这样就不依赖本地路径。
通过 file:// 访问本地资源时，设置合适的 WKWebView 配置：
如果你依然希望通过 file:// 访问文件，确保配置正确。

最后我选择将html字符串里面的本地图片或视频的路径替换成base64字符串成功显示在了wkWebView上

// 将文件转为 Base64 字符串
func fileToBase64(filePath: String) -> String? {
let fileURL = URL(fileURLWithPath: filePath)
do {
let fileData = try Data(contentsOf: fileURL)
return fileData.base64EncodedString()
} catch {
print("Error reading file at (filePath): (error)")
return nil
}
}
// 将HTML字符串中的本地图片或视频路径替换为Base64字符串
func replaceLocalPathsWithBase64(in htmlString: String) -> String {
let regex = try! NSRegularExpression(pattern: "file://([^\"]+)", options: [])
let nsString = htmlString as NSString
let results = regex.matches(in: htmlString, options: [], range: NSRange(location: 0, length: nsString.length))

    var modifiedHtml = htmlString
    
    // 遍历所有匹配的路径，替换为Base64编码
    for result in results.reversed() {
        let filePathRange = result.range(at: 1)
        let filePath = nsString.substring(with: filePathRange)
        
        if let base64String = fileToBase64(filePath: filePath) {
            // 构造替换的 Base64 图片 URL
            let base64ImageURL = "data:image/jpeg;base64,\(base64String)"
            modifiedHtml = (modifiedHtml as NSString).replacingCharacters(in: result.range, with: base64ImageURL)
        }
    }
    return modifiedHtml
}

// 测试
let modifiedHtml = replaceLocalPathsWithBase64(in: htmlString)
print(modifiedHtml)