这是我的前端代码:script setupimport wangeditoreditordistcssstylecss 引入 cssimport onBeforeUnmount ref shallowRef onMounted from vue;import getNewsById from apisNewsAPI;import useRoute useRouter from vue-route
要将wangEditor中的HTML格式信息和纯文本信息提交到后台,可以按照以下步骤进行操作:
- 在data中定义一个变量,用来保存纯文本信息:
data() {
return {
plainText: ''
}
}
- 在wangEditor的Editor组件中,添加一个监听事件,用来实时更新纯文本信息:
<Editor
...
@onChange="handleEditorChange"
/>
- 在methods中添加handleEditorChange方法,用来更新纯文本信息:
methods: {
handleEditorChange() {
this.plainText = this.newsForm.content.replace(/<[^>]+>/g, '')
},
...
}
- 在updateOneNews方法中,将wangEditor中的HTML格式信息(newsForm.content)和纯文本信息(plainText)一起提交到后台:
const updateOneNews = async () => {
this.newsForm.contentPlain = this.plainText // 将纯文本信息添加到newsForm中
const resp = await updateNews(this.newsForm)
console.log(resp.data)
await router.push({path: '/news_manager'})
}
这样,在点击提交按钮时,updateOneNews方法会将wangEditor中的HTML格式信息和纯文本信息一起提交到后台
原文地址: https://www.cveoy.top/t/topic/iYlv 著作权归作者所有。请勿转载和采集!