quilljs富文本编辑器在只读模式下链接无法跳转的解决办法

假设你的quilljs编辑器设置了只读模式

myEditor.disable()

如果你的项目部署到如下网址

https://my-website.com/id=1

https://my-website.com/id=1 这个链接中的富文本编辑器中有链接，富文本的delta数据如下

{
    "ops": [
        {
            "attributes": {
                "link": "test-link"
            },
            "insert": "你好"
        },
    ]
}

这个数据是，给【你好】两个字设置了值为【test-link】的链接，quilljs会把他渲染为如下的dom

<a href="test-link" rel="noopener noreferrer" target="_blank">你好</a>

如果点击【你好】，因为test-link前面没有协议（https或者http）就会跳转到，当前项目部署地址下面的路径

https://my-website.com/test-link

很显然这事不对的，所以，我们可以在数据渲染之前，手动给test-link前面加一个诸如https的协议，就可以正常跳转到https://test-link 地址了。

具体代码如下

// data 是原始的数据
const dataArr = data.ops || [];
const newDataArr = dataArr.map(item => {
    let newItem = item;
    if (item.attributes && item.attributes.link) {
        let linkValue = item.attributes.link;
        if (!linkValue.startsWith('http://') && !linkValue.startsWith('https://')) {
            linkValue = `https://${linkValue}`;
        }
        newItem.attributes.link = linkValue;
    }
    return newItem;
});
myEditor.setContent([{ ops: newDataArr }]);
myEditor.disable();

不过你最好是在给【你好】设置链接的时候就好好写，加上协议，就没有后面这些事情了。