链接始终在草稿js编辑器的顶部呈现，无论它们在数据库中的位置如何

编程问答 2022-07-20

问题描述

这让我很困惑。但是，这可能与我编写的一些自定义代码有关。

我正在Laravel / React项目中使用draft-js在博客页面中实现。我还使用linkify插件来处理粘贴的链接。问题在于，当链接保存到数据库中时，链接不会出现，因此我编写了一些代码来处理YouTube链接（嵌入视频）和所有其他链接：

getContentAsHtml() {
let options = {
    blockRenderers: {
        atomic: block => {
            let text = block.getText();
            if (text.includes('https://youtu') || text.includes('https://www.youtu')) {
                return `<figure>
                        <div id="video-preview-container"><iframe id="video-preview" width="100%" height="100%" src="${this.convertYouTubeURL(text)}" frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen>${text}</iframe></div>
                    </figure>`;
            } else if (text.includes('http://') || text.includes('https://') || text.includes('www.')) {
                return `<a href="${text}" target="_blank">${text}</a>`;
            }
        },unstyled: block => {
            let text = block.getText();
            if (text.includes('https://youtu') || text.includes('https://www.youtu')) {
                return `<figure>
                        <div id="video-preview-container"><iframe id="video-preview" width="100%" height="100%" src="${this.convertYouTubeURL(text)}" frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen>${text}</iframe></div>
                    </figure>`;
            } else if (text.includes('http://') || text.includes('https://') || text.includes('www.')) {
                return `<a href="${text}" target="_blank">${text}</a>`;
            }
        }
    }
};

return stateToHTML(this.state.editorState.getCurrentContent(),options);

}

这是将锚标签环绕所有非YouTube视频URL的链接。假设我是在编辑器中编写的：

这是链接：
https://www.google.com

Linkify处理外观在编辑器框本身中，并且在保存时在数据库中看起来像这样：

<p>Here is a link:</p>
<p><br></p>
<a href="https://www.google.com" target="_blank">https://www.google.com</a>

但是当我在网站上编辑帖子时，链接总是会移到顶部，就像这样：

enter image description here

如果我现在保存它，它将改变数据库中内容的顺序。我不明白的是，为什么它首先要这样做？这是其他人遇到的问题吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

draft-js-pluginsdraftjs