vue中添加markdown编辑器

Vue 专栏收录该内容
2 篇文章 0 订阅

我使用的mavonEditor编辑器,文档齐全传送门

  1. 安装

    npm install mavon-editor --save
    
  2. 引入

     #在main.js中 -- 全局引入
     import mavonEditor from 'mavon-editor';
     import 'mavon-editor/dist/css/index.css';
     Vue.use(mavonEditor);
    
  3. 使用

    <!-- vue中使用markdown编辑器 -->
    <template>
        <div>
            <mavon-edtior v-model="content" />
        </div>
    </template>
    <script>
    import { mavonEditor } from "mavon-editor"; // 页面引入
    import "mavon-editor/dist/css/index.css";
    export default {
      components: {
        mavonEditor,
      },
    </script>
    
  4. 更多使用信息及api点击这里

  5. 解决解析后的数据回显到页面样式丢失的问题

    1). 安装支持markdown样式插件

    npm install github-markdown-css
    

    2). 在main.js中引入

     #在main.js中 -- 全局引入
     #markdown编辑器
     import mavonEditor from 'mavon-editor';
     import 'mavon-editor/dist/css/index.css';
    
     #markdown样式
     import 'github-markdown-css';
     Vue.use(mavonEditor);
    

    3). 使用

    <!-- markdown数据回显 -->
    <template>
        <div>
            <!-- 将class加上markdown-body 即可 -->
            <article class="markdown-body" v-model="htmlData"></article>
        </div>
    </template>
    <script>
        export default{
            data(){
                return{
                    htmlData:"...", // 解析后的html数据
                }
            }
        }
    </script>
    
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

BUG编写师

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值