拿到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')
}