vue组件直接读取本地静态.md文档并展示配合mavon-editor

djl11

已于 2022-12-15 13:24:06 修改

阅读量1k

点赞数 1

文章标签： vue.js npm 前端

于 2022-12-14 17:54:24 首次发布

本文链接：https://blog.csdn.net/djl11/article/details/128319804

版权

思路先读取本地md文档拿到读取的md文档，展示在mavon-editor组件里

1、首先安装text-loader

npm install text-loader

2、修改webpack.base.config.js，我用的cli所以自己加了一个vue.config.js

module.exports = {
//此部分
configureWebpack: {
module: {
rules: [
{
test: /\.md$/,
use: ["text-loader"]
}
]
}
}
}

3、安装vue-markdown

npm install vue-markdown

4、vue-markdown 要引入过来，以便展示 .md里的内容能够展示出来。

代码示例

        <div class="mavonEditor">
          <mavon-editor
            v-if="MdValue"
            v-model="MdValue"
            :editable="false"
            :value="MdValue"
            :subfield="false"
            :defaultOpen="'preview'"
            :toolbarsFlag="false"
            :scrollStyle="true"
            :ishljs="true"
            :navigation= "true"
            @navigationToggle	="onAddUrl"
            style="max-height: 1000px"
          />
          </div>
      </div>