mavon-editor保存的html显示问题

梦里梦外; 2021-09-29 22:36 972阅读 0赞

## 一、mavon-editor在Vue中的使用 ##

**安装mavon-editor插件：**  
cnpm install mavon-editor --save

**项目中引入mavon-editor：**  
import \{ mavonEditor \} from ‘mavon-editor’

**使用mavon-editor：**

布局部分： <mavon-editor v-model="content" ref="md" @imgAdd="$imgAdd" @change="change" style="min-height: 800px"/>
     
       js部分：
          export default {
        name: 'markdown',
        data: function(){
            return { 
                content:'',
                html:'',
            }
        },
        components: {
            mavonEditor
        },
        methods: {
            // 将图片上传到服务器，返回地址替换到md中
            $imgAdd(pos, $file){
                var formdata = new FormData();
                formdata.append('file', $file);
                this.$axios({
                    url: '这里是服务端url',
                    method: 'post',
                    data: formdata,
                    headers: { 'Content-Type': 'multipart/form-data' },
                }).then((url) => {
                    console.log(url);
                    this.$refs.md.$img2Url(pos, url.data);
                })
            },
            change(value, render){
                // render 为 markdown 解析后的结果
                this.html = render;
            }
          }

## 二、html显示异常问题（无样式） ##

对解析后的html在 v-html中显示无样式，原因是只有在使用了的地方，样式才会引入。

**解决办法：**

在你需要展示html的模块引入`import "mavon-editor/dist/css/index.css";`  
并且加上 `*class="markdown-body"*`，如下

如果还是不行的话就通过cdn引入样式，

就可以正常显示了。