基于quill-editor富文本编辑器内容回显,及保存时makedown内容清洗

6 阅读1分钟

拿到content值,是带有\n换行符号的文档文本;此时直接在quill-editor富文本编辑器内无法直接回显; 需要使用marked进行转化

..其他内容....

import marked from 'marked'

..其他内容....


/**
 * 转换Markdown为HTML
 */
 
 content是获取来的文本数据
 this.markdownText = this.translate(content)
 
translate(content) {
    marked.setOptions({
            breaks: true
    })
    const result = marked.marked(content)
    return result
},

保存时需要将makedown的内容转换为文本,保留img标签

//编辑完保存时,需要进行转换
this.editorContent = this.advancedHtmlToText(this.markdownText)


/**
 * 将HTML内容转换为带样式的纯文本
 * @param {string} html - 富文本编辑器返回的HTML内容
 * @returns {string} - 转换后的带样式标记的文本
 */
advancedHtmlToText(htmlContent) {
        let plainText = this.stripTags(htmlContent)
        plainText = plainText.replace(/\s+/g, '\n').trim()
        return plainText
},
stripTags(html) {
        const parser = new DOMParser()
        const serializer = new XMLSerializer()
        const doc = parser.parseFromString(html, 'text/html')
        // 移除所有标签,保留img标签
        const regex = /<\/?(?!img\b)[^>]+>/gi
        return serializer.serializeToString(doc.body).replace(regex, '\n')
}