Open demigodliu opened 5 years ago
大佬,我也遇到这个问题,还有一个就是我用md编写保存为html,在网页上加载出来的样式有些不一样
第一:最好把markdown语法内容和html代码都保存数据库。 第二:根据后台返回的markdown内容,直接绑定到mavon的v-model上。 第三:网页上预览文章,直接用后台返回的html代码,而不是用markdown内容。 第四:文章html没有样式的,请引入这个文件https://github.com/hinesboy/mavonEditor/blob/3a97f3fb8d0a586de6635debb9d830bd8931f00b/src/lib/css/markdown.css
第五:代码没有高亮的,在highlight的样式文件里,https://github.com/highlightjs/highlight.js/tree/master/src/styles 在这里面选择自己喜欢的风格,放在项目了,就可以完美使用了。
我代码这样的
<template lang="html">
<div class="detail">
<div class="container">
<h1 class="title">{{detailData.title}}</h1>
<p v-html="detailData.content" style="margin-top: 15px"></p>
</div>
</div>
</template>
<script>
export default {
created() {
this.detailId = this.$route.params.id
this.initData();
},
data() {
return {
detailData: {
id: "",
title: "",
intro: "",
createDate: 1554274818529,
thumb: "",
typeOne: "11",
typeTwo: null,
typeTwoName: null,
typeOneName: "",
likes: 0,
content: "",
shareUrl: ""
},
loading: false,
detailId: ''
}
},
methods: {
initData() {
const self = this;
self.url = self.$global.baseUrl + "detail/getNewsDetail?id=" + this.detailId;
console.log(self.url);
this.loading = true;
self.$axios.get(self.url).then((response) => {
if (response.data.error_code === '0') {
self.detailData = response.data.result;
} else {
this.$message.error(response.data.reason);
}
this.loading = false;
}).catch((error) => {
this.loading = false;
this.$message.error('加载失败,后台bug');
});
}
}
}
</script>
<style lang="css" scoped>
@import "../../../static/css/markdown.css";
@import "../../../static/css/idea.css";
.detail {
overflow: hidden;
background: none repeat scroll 0 0 #e6ffe3;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom:0;
width: auto;
box-sizing: border-box;
overflow-y: auto;
min-width: 1200px;
}
.container {
padding: 60px;
border: 1px solid #d4d4d4;
width: 800px;
margin: 0 auto;
background-image: linear-gradient(#fff,#e5eecc 100px);
min-height: 700px;
}
.container p {
line-height: 1.4em;
width: 98%;
background-color: #fff;
padding: 5px;
border: 1px solid #d4d4d4;
font-size: 110%;
font-family: Menlo,Monaco,Consolas,"Andale Mono","lucida console","Courier New",monospace;
word-break: break-all;
word-wrap: break-word;
}
.title {
font-size: 24px;
font-weight: bold;
}
</style>
效果是这样的,还是有问题呀 JIZHODNQT7~6UPEX7AM.png
不要觉得引入了markdown.css就可以了,都没看过里面css怎么写的吗?里面有个markdown-body好像,你不把这个class加在你要渲染的div上,别人怎么会渲染?
可以了,谢谢啦,我只是一个初学者
客气了~
第一:最好把markdown语法内容和html代码都保存数据库。 第二:根据后台返回的markdown内容,直接绑定到mavon的v-model上。 第三:网页上预览文章,直接用后台返回的html代码,而不是用markdown内容。 第四:文章html没有样式的,请引入这个文件https://github.com/hinesboy/mavonEditor/blob/3a97f3fb8d0a586de6635debb9d830bd8931f00b/src/lib/css/markdown.css
第五:代码没有高亮的,在highlight的样式文件里,https://github.com/highlightjs/highlight.js/tree/master/src/styles 在这里面选择自己喜欢的风格,放在项目了,就可以完美使用了。
请问支持直接读服务器的目录文件,然后修改保存吗?
需求:编辑器保存内容为html到数据库,便于前端网页直接展示看文章内容。
问题:数据库保存的是html,如果要修改文章,我把html代码放在编辑器内,显示的依然是html代码,怎么让他还原成markdown语法内容???