一、安装插件

npm install mavon-editor -S 或 yarn add mavon-editor -S

二、在main.js中引入插件及css样式

import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

三、使用插件

Vue.use(mavonEditor)

四、在所需要展示富文本编辑器插件的地方写上

<mavon-editor v-model="addForm.articleContent" />

效果如下:


五、客户端界面前台展示

  • 后台录入markdown语法后,获取文章,此时数据是markdown语法格式。在前台展示需要利用marked插件highlight.js处理转换为可识别的HTML语法

1. marked插件将markdown语法渲染成html语法

  • 下载插件

    npm install marked -S 或者 yarn add marked -S
  • 在所需要将md语法渲染为html语法的地方引入插件

    <script>
    import marked from 'marked'
    </script>
  • 转换

    // 循环遍历文章列表中的文章内容信息并进行md转html
    for (let index = 0; index < this.articleList.length; index++) {
    // 获取内容
    var markdowncontent = this.articleList[index].articleContent
    // md转html
    this.articleList[index].articleContent = marked(markdowncontent)
    }
  • 显示

    <!-- 文章内容 -->
    <div v-html="article.articleContent"></div>

    效果如下:

最后修改:2021 年 08 月 07 日
如果觉得我的文章对你有用,请随意赞赏