精华内容
下载资源
问答
  • vue-markdown 一个基于vue.js的markdown语法解析插件
  • module.exports = {... {config.module.rule(‘md‘).test(/\.md$/).use(‘html-loader‘).loader(‘html-loader‘).end().use(‘markdown-loader‘).loader(‘markdown-loader‘).end()}}这是 vue.confi...

    module.exports = {

    chainWebpack: config => {

    config.module

    .rule(‘md‘)

    .test(/\.md$/)

    .use(‘html-loader‘)

    .loader(‘html-loader‘)

    .end()

    .use(‘markdown-loader‘)

    .loader(‘markdown-loader‘)

    .end()

    }

    }

    这是 vue.config.js 配置方法

    需要安装的依赖:

    cnpm i html-loader markdown-loader --save-dev

    文件里使用

    import demo from "../../assets/demo.md";

    console.log(demo)

    export default {

    data() {

    return {

    md:demo

    };

    }

    };

    // 这里可以约束解析出来后的 markdown 标签样式,如设置 h3{...}

    如果不配置 md  loader ,引入demo.md 后 的console.log() 输出的是一个vue模板解析对象(vue-loader处理后的对象)。 配置后输出的是 将 md 语法解析后的 html 字符串

    原文:https://www.cnblogs.com/winyh/p/11934129.html

    展开全文
  • 既可以用来编辑Markdown语法,又可以用来解析 效果图 安装 npm install mavon-editor --save or cnpm install mavon-editor --save 引入 全局注册(大部分页面都需要markdown解析的推荐使用) /...

    Markdown编辑器的使用

    • 我们这里推荐使用 mavonEditor,这是一款基于Vue的markdown编辑器。既可以用来编辑Markdown语法,又可以用来解析
    • 效果图

    安装

    npm install mavon-editor --save
    or
    cnpm install mavon-editor --save	
    

    引入

    全局注册(大部分页面都需要markdown解析的推荐使用)

       // import with ES6
        import Vue from 'vue'
        import { mavonEditor } from 'mavon-editor'
        import 'mavon-editor/dist/css/index.css'
        // use
        Vue.use(mavonEditor)
        new Vue({
            'el': '#main',
            data() {
                return { value: '' }
            }
        })
    

    局部注册(只有一到连个页面会用到markdown推荐使用这个)

    import { mavonEditor } from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    export default({
    	components:{// 在页面中注册组件
    		mavonEditor 
    	}
    })
    

    使用

    <template>
      <div class="mavonEditor">
       	  <!-- markdownText: 双向绑定的数据 
       	  	   toolbars:编辑器的配置	-->
          <mavon-editor
           v-model="markdownText" 
           :toolbars="markdownOption" 
           @change="change" 
           style="min-height: 500px"
          />
          <button  @click="submit">提交</button>
      </div>
    </template>
    <script>
    export default {
    /*
        默认工具栏按钮全部开启, 传入自定义对象
        例如: {
             bold: true, // 粗体
             italic: true,// 斜体
             header: true,// 标题
        }
        此时, 仅仅显示此三个功能键
     */
      data() {
        return {
          markdownOption: {
    	      bold: true, // 粗体
    	      italic: true, // 斜体
    	      header: true, // 标题
          },
          markdownText: ''//传至服务器的数据
        },
        method: {
        // 所有操作都会被解析重新渲染
        change (value, render) {
          // render 为 markdown 解析后的结果(转化成了HTML格式)
          this..markdownText = render;
        }
      }
    };
    </script>
    

    markdownOption 配置项

    在这里插入图片描述

    解析markdown语法

    <telmplate>
    	<div class="content">
              <mavon-editor
                class="md"
                :value="htmlContent" // 渲染解析的数据绑定
                :subfield="prop.subfield" 
                :defaultOpen="prop.defaultOpen"
                :toolbarsFlag="prop.toolbarsFlag"
                :editable="prop.editable"
                :scrollStyle="prop.scrollStyle"
              />
    	</div>
    </template>	
    import { mavonEditor } from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    
    <script>
    import { mavonEditor } from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    export default {
      components: {
        mavonEditor
      }, 
      computed: {
      // 解析器配置
        prop () {
          let data = {
            subfield: false,// 单双栏模式
            defaultOpen: 'preview',//edit: 默认展示编辑区域 , preview: 默认展示预览区域 
            editable: false,	// 是否允许编辑
            toolbarsFlag: false,
            scrollStyle: true
          }
          return data
        }
      },
      data() {
          return{
            htmlContent: ''
          }
      },
      mounted () {
      //从后台获取数据
        getInfo(){
          this.htmlContent = data;
        }
      }
        
    </script>
    

    图片上传

    
    <template>
        <mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
    </template>
    exports default {
        methods: {
            // 绑定@imgAdd event
            $imgAdd(pos, $file){
                // 第一步.将图片上传到服务器.
               var formdata = new FormData();
               formdata.append('image', $file);
               axios({
                   url: 'server url',
                   method: 'post',
                   data: formdata,
                   headers: { 'Content-Type': 'multipart/form-data' },
               }).then((url) => {
                   // 第二步.将返回的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`
                   */
                   $vm.$img2Url(pos, url);
               })
            }
        }
    }
    
    展开全文
  • vue markdown 降价 (vue-markdown) A Powerful and Highspeed Markdown Parser for Vue. Vue的强大,高速Markdown解析器。 Quick start: i am a tast test. 快速开始: 我是一个TAST... 支持的Markdown语法: au...

    vue markdown

    降价 (vue-markdown)

    A Powerful and Highspeed Markdown Parser for Vue.

    Vue的强大,高速Markdown解析器。

    Quick start: i am a tast test.

    快速开始: 我是一个TAST 测试

    Supported Markdown Syntax:

    支持的Markdown语法:

    automatic table of contents table & class customize *SyntaxHighlighter definition list strikethrough abbreviation superscript subscript footnote insert emoji mark

    自动目录表和类自定义* SyntaxHighlighter定义列表删除线缩写上标下标脚注插入表情符号

    现场演示 (live demo)

    https://miaolz123.github.io/vue-markdown/

    https://miaolz123.github.io/vue-markdown/

    翻译自: https://vuejsexamples.com/a-powerful-and-highspeed-markdown-parser-for-vue/

    vue markdown

    展开全文
  • mavonEditor既可作为编辑使用,也可作为解析使用 API:https://github.com/hinesboy/mavonEditor 注意:识别h5语法以及LaTex计算公式 用法 引入 npm install mavon-editor --save // main.js全局注册 // ...

    最全能的非mavonEditor莫属了

    mavonEditor既可作为编辑使用,也可作为解析使用

    API:https://github.com/hinesboy/mavonEditor

    注意:识别h5语法以及LaTex计算公式

    用法

    引入

    npm install mavon-editor --save
    // main.js全局注册
        // import with ES6
        import Vue from 'vue'
        import mavonEditor from 'mavon-editor'
        import 'mavon-editor/dist/css/index.css'
        // use
        Vue.use(mavonEditor)
    • 作为编辑器使用
    <mavon-editor v-model="context" :toolbars="toolbars" @keydown="" />
    data(){
      return {
          context: ' ',//输入的数据
          toolbars: {
                  bold: true, // 粗体
                  italic: true, // 斜体
                  header: true, // 标题
                  underline: true, // 下划线
                  mark: true, // 标记
                  superscript: true, // 上角标
                  quote: true, // 引用
                  ol: true, // 有序列表
                  link: true, // 链接
                  imagelink: true, // 图片链接
                  help: true, // 帮助
                  code: true, // code
                  subfield: true, // 是否需要分栏
                  fullscreen: true, // 全屏编辑
                  readmodel: true, // 沉浸式阅读
                  /* 1.3.5 */
                  undo: true, // 上一步
                  trash: true, // 清空
                  save: true, // 保存(触发events中的save事件)
                  /* 1.4.2 */
                  navigation: true // 导航目录
                }
      }
    }
    • 解析:从数据库中获取刚刚存入的markdown文字解析到页面来
    <mavon-editor
          class="md"
         :value="articleDetail.context"//获取数据
         :subfield = "prop.subfield"
         :defaultOpen = "prop.defaultOpen"
         :toolbarsFlag = "prop.toolbarsFlag"
         :editable="prop.editable"
         :scrollStyle="prop.scrollStyle"
      ></mavon-editor>
    
        computed: {
            prop () {
              let data = {
                subfield: false,// 单双栏模式
                defaultOpen: 'preview',//edit: 默认展示编辑区域 , preview: 默认展示预览区域 
                editable: false,
                toolbarsFlag: false,
                scrollStyle: true
              }
              return data
            }
          },
    

     

    单独解析LaTex计算公式

     

    安装引入

    import VueKatex from 'vue-katex'

    Vue.use(VueKatex)

    import "katex/dist/katex.min.css";

    使用(注意:要加转义\)

    <div v-katex="'\\frac{a_i}{1+x}'"></div>

     

     

     

    展开全文
  • 修改配置文件 - config.js 修改README.md 运行项目 深度开发 配置导航 配置侧边栏 总结 模板主题设置 ...基于这样的系统,可以方便用于小型文章发布,如帮助中心、官方博客,支持解析md...
  • Vue源码解析

    2019-11-12 09:28:08
    Vue源码解析 欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。 新的改变 我们对...
  • Webpack加载器,用于将Markdown文件转换为ALIVE Vue组件。 可配置的解析器。 内置带有语法。 现场演示支持。 对于文档示例极为有用。 热装。 例 该页面由markdown文件生成。 来源: 安装 NPM: npm install ...
  • vue-markdown-loader' } </code></pre> <p>.md中的内容大致如下: <pre><code>md </code></pre> <p>vue </p><div id="app"> Content Fullscreen <p></p> <pre><code>. </code></pre> ...
  • 富文本有很多款,但我用的比较好的还是这款Markdown编辑器,因为Markdown存在语法支持,以及上传图片自带的函数调用支持,可以快速高效的编辑,有一点是要解析成html需要marked插件。 (CSDN博客也支持这款编辑器,...
  • vue axios 普通对象转form对象(支持深度解析) 今天在用 vue axios 向后端传 post 请求时,请求参数死活传不过去,然后就百度看了下解决方案, 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想...
  • 让页面支持markdown

    2021-02-04 22:06:49
    在最近的开发中,遇到一个问题,就是博客都是使用markdown语法写的,我在自己的页面中怎么才能很好的渲染它们。 确定两种方法 1.将markdown转为html,网页读取html内容进行渲染。 2.网页直接读取markdown内容,然后...
  • md解密 vue_VueMdEditor

    2020-12-19 23:51:56
    web markdown 在线编辑器涵盖了大多数 markdown 语法的快捷操作,实时编译实时预览,支持...技术vue less iview markdown-it iconfont hotkeys-js插件markdown-it-mark 标记功能markdown-it-emoji emoji 表情解析hig...
  • vue

    2018-12-29 19:06:47
    marked是一个markdown 解析、编译器 以下代码是如何将md文件转为html import marked from 'marked' let renderMD = new marked.Renderer(); let index = 0; renderMD.heading = function (text, level) { ...
  • 主要来介绍下用的几个插件 的使用mavon-editor 基于Vuemarkdown编辑器 github项目地址marked 解析预览markdown文本highlight.js 语法高亮1. mavon-editor使用我这里是全局注册使用;也可局部使用,详细请看 github...
  • 美团点评近日开源了 mpvue ,这是一个使用 Vue.js 开发小程序的前端...框架提供了完整的 Vue.js 开发体验,开发者编写 Vue.js 代码,mpvue 将其解析转换为小程序并确保其正确运行。此外,框架还通过 vue-cli 工具向开发
  • marked是对markdown进行解析的插件,它可以把markdown语法解析成html语法,从而实现页面效果,而highlight.js是对解析出的代码实现高亮效果,在实现代码高亮的时候我也用了其他方式,效果并不理想,踩了一些坑,下面...
  • Vue资源收录

    2019-06-04 23:59:26
    SimpleMDE Markdown Editor:一个简单美观的 Markdown 编辑器 ; highlight.js:一个用 Javascript 写的语法高亮工具; Moment.js: 一个用 Javascript 写的日期处理工具 node-emoji 是一个简单的 emoji 处理工具,...
  • 编辑区发生变化的回调事件(render: value 经过markdown解析后的结果) save String: value , String: render ctrl + s 的回调事件(保存按键,同样触发该回调) fullScreen Boolean: status , String: value 切换...
  • 支持通用 Markdown / CommonMark 和 GFM (GitHub Flavored Markdown) 风格的语法,也可变身为代码编辑器; 支持实时预览、图片(跨域)上传、预格式文本/代码/表格插入、代码折叠、跳转到行、搜索替换、只读模式、...

空空如也

空空如也

1 2
收藏数 37
精华内容 14
关键字:

vue解析markdown语法

vue 订阅