前言
近期在项目中遇到一个比较常见的需求,需要把富文本内容展示在vue页面中,当时的想法是用一个第三方富文本编辑器进行展示,后来发现是否可以通过一个div把内容展示出来,经过测试可以通过v-html=变量或方法对div直接赋值
示例
parentContent为变量
data() {
return {
form: this.$store.state.newsitem,
parentContent: this.$store.state.newsitem.content,
};
},
div中使用v-html
完整代码
Create
Cancel
import Editor from "@/components/VueEditor";
export default {
components: {
Editor,
},
created() {
},
data() {
return {
form: this.$store.state.newsitem,
parentContent: this.$store.state.newsitem.content,
};
},
methods: {
parentEvent(data) {
this.parentContent = data;
},
onSubmit() {
let form = this.form;
const restweburl = "http://localhost:5000/";
const requestOptions = JSON.stringify({
id: form.id,
title: form.title,
publishDate: "2020-10-10",
pageUrl: form.pageUrl,
content: this.parentContent,
author: null,
});
console.log(requestOptions);
/*
this.$axios
.post(restweburl + "api/Article/UpdateNews", requestOptions)
.then(function (res) {
console.log(res);
})
.catch(function (err) {
console.log(err);
});
console.log("submit!");*/
},
onCancel() {
this.$router.push({ path: "/" });
},
},
};