微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

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

我正在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 举报,一经查实,本站将立刻删除。