zoukankan      html  css  js  c++  java
  • mavon-editor 存储md文件以及md文件解析成html文件

    一、md文件的存储

    因为是vue-cli项目,所以使用的是mavonEditor.

    github地址:https://github.com/hinesboy/mavonEditor

    使用方法:

    首先安装:

    npm install mavon-editor --save

    然后在相应的组件里引用:

    //引入
    import {mavonEditor} from 'mavon-editor' import 'mavon-editor/dist/css/index.css'
    //标签使用,注意这里是mavon-editor
    <mavon-editor style="height: 100%; 100%;" v-model="form.content" ref="md" defaultOpen="edit" :toolbars="toolbarsValue" @imgAdd="$imgAdd" @change="changeMavon" @save="saveMavon" />

    //mavon-editor菜单栏的相关配置

    toolbarsValue: {
                    bold: true, // 粗体
                    italic: true, // 斜体
                    header: true, // 标题
                    underline: true, // 下划线
                    strikethrough: true, // 中划线
                    mark: true, // 标记
                    superscript: true, // 上角标
                    subscript: true, // 下角标
                    quote: true, // 引用
                    ol: true, // 有序列表
                    ul: true, // 无序列表
                    link: true, // 链接
                    imagelink: true, // 图片链接
                    code: true, // code
                    table: true, // 表格
                    fullscreen: true, // 全屏编辑
                    readmodel: true, // 沉浸式阅读
                    htmlcode: true, // 展示html源码
                    help: true, // 帮助
                    /* 1.3.5 */
                    undo: true, // 上一步
                    redo: true, // 下一步
                    trash: true, // 清空
                    save: false, // 保存(触发events中的save事件)
                    /* 1.4.2 */
                    navigation: true, // 导航目录
                    /* 2.1.8 */
                    alignleft: true, // 左对齐
                    aligncenter: true, // 居中
                    alignright: true, // 右对齐
                    /* 2.2.1 */
                    subfield: true, // 单双栏模式
                    preview: true, // 预览
                },
    

    //相关的方法

    //富文本保存的方法
            saveMavon(value,render){
                
              console.log("this is render"+render);
              console.log("this is value"+value);
            },
            // 绑定@imgAdd event
            $imgAdd(pos, $file){
                console.log("触发图片上传");
                console.log(pos);
                console.log($file);
                // 第一步.将图片上传到服务器.
               var formdata = new FormData();
               formdata.append('file', $file);
               console.log(formdata);
               imgeApi(formdata).then(res=>{
                   // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
                   /**
                   * $vm 指为mavonEditor实例,可以通过如下两种方式获取
                   * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后,`$vm`为`mavonEditor`
                   * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>,`$vm`为 `this.$refs.md`
                   */
                    console.log(res.data);
                    let url="/server/"+res.data.data;
                    this.$refs.md.$img2Url(pos, url);
    //相应的md格式的文件内容就是它绑定的变量
                                     //得到相应的html/文件
                                    console.log(this.$refs.md.d_render);
     
               });
            },  

    我选择的是直接将md格式的文本保存到数据库中,然后再将其从数据库中取出来解析。

    二、md格式的文本的解析

    使用marked框架来解析。

    方法步骤:

    npm install marked --save

    在组件中引用:

    import marked from 'marked'

    相应的标签:

    <div v-html="readmeContent" ></div>

    js方法:

    //这里的newDate[0].content就是取出来的md格式的文本内容  
    this.readmeContent=marked(newData[0].content||'',{
                        sanitize:true
                    })
    

      

    存在问题:现在纯粹的只是将其解析成了html文件,相应的样式查了下,可以用highlight.js,但折腾了好久都没引用成功,等之后再仔细看看marked的官方文档再说....

                      地址:https://marked.js.org/#/README.md#README.md 

  • 相关阅读:
    《应用Yii1.1和PHP5进行敏捷Web开发》学习笔记(转)
    YII 小模块功能
    Netbeans代码配色主题大搜集
    opensuse 启动巨慢 解决方法 90s多
    opensuse 安装 网易云音乐 rpm netease music
    linux qq rpm deb opensuse
    openSUSE 安装 alien
    第一行代码 Android 第2版
    Android Studio AVD 虚拟机 联网 失败
    docker error during connect: Get http://%2F%2F.%2Fpipe%2Fdocker_engine/v1.29/containers/json: open //./pipe/docker_engine: The system cannot find the file specified. In the default daemon configuratio
  • 原文地址:https://www.cnblogs.com/LULULI/p/10610136.html
Copyright © 2011-2022 走看看