精华内容
下载资源
问答
  • vueMarkdown插件
    千次阅读
    2020-03-16 20:46:12

    markdown编辑器

    mavon-editor

    官方文档:https://github.com/hinesboy/mavonEditor

    现介绍mavon-editor的使用

    安装

    npm install mavon-editor --save
    

    main.js

    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    
    Vue.use(mavonEditor);
    

    在组建里使用mavon-editor

    这里显示的图片上传只显示方式1:图片上传至服务器【每次添加图片触发上传】

    <mavon-editor 
        class="mavon"
        v-model="content"
        ref="md"
        @imgAdd="$imgAdd"
        @imgDel="$imgDel"
        @save="saveMavon"
    >
    </mavon-editor>
    
    <script>
    export default{
        data(){
            return{
                content:''
            }
        },
        methods:{
            // 保存按键
            saveMavon(value, render){
                console.log("this is render"+render);  //html内容
                console.log("this.is value"+value);   // md语法
                this.readmeContent=render;
            },
            // 绑定@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.$img2Url 详情见本页末尾
                   $vm.$img2Url(pos, url);
               })
            }
        }
    }
    </script>
    

    注意:

    $vm指为mavonEditor实例,可以通过如下两种方式获取

    通过引入对象获取: import {mavonEditor} from ... 等方式引入后,此时$vm即为mavonEditor
    通过$refs获取: html声明ref : <mavon-editor ref=md ></mavon-editor>, 此时$vmthis.$refs.md

    vue显示markdown文件

    Vue 引入 .md 文件,解析markdown语法

    安装:

    npm i html-loader markdown-loader --save-dev
    

    vue.config.js

    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组件里使用

    <template>
      <div>
        <div v-html="md">
                 
        </div>
      </div>
    </template>
     
    <script>
    import demo from "../../assets/demo.md";
     
    console.log(demo) // 这里打印出来的是html格式的内容
     
    export default {
      data() {
        return {
          md:demo
        };
      }
    };
    </script>
     
    <style lang="less" scoped>
    // 这里可以约束解析出来后的 markdown 标签样式,如设置 h3{...}
    </style>
    

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

    更多相关内容
  • 文章目录Vue.js 的 MarkDown 插件 MavonEditorMavonEditor 官方说明操作步骤安装全局声明在单模板中使用效果参考 Vue.js 的 MarkDown 插件 MavonEditor 比较简单 MavonEditor 官方说明 MavenEditor 操作步骤 安装 $ ...

    Vue.js 的 MarkDown 插件 MavonEditor

    比较简单

    MavonEditor 官方说明

    MavenEditor

    操作步骤

    安装

    $ npm install mavon-editor --save
    

    全局声明

    核心代码

    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    Vue.use(mavonEditor)
    

    在单模板中使用

    <template>
      <div>
        <mavon-editor v-model="value" :ishljs = "true"/>
      </div>
    </template>
    <style></style>
    <script>
      export default{
        data(){
         return {
          value:"请输入内容,或者从后端加载",
        }
      }
      }
    
    </script>
    <style>
      #editor {
        margin: auto;
        width: 80%;
        height: 580px;
        margin-top: 5rem;
      }
    </style>
    

    效果

    在这里插入图片描述

    参考

    [1]、https://www.npmjs.com/package/mavon-editor
    [2]、
    https://blog.csdn.net/cnds123321/article/details/109112408

    展开全文
  • vuemarkdown高亮插件

    2019-08-10 09:06:02
    vue markdown 高亮插件
  • 一款强大的基于Vuemarkdown编辑器插件.zip,mavonEditor - A markdown editor based on Vue that supports a variety of personalized features
  • vue-markdown 一个基于vue.js的markdown语法解析插件
  • 分享一个用于Vuemarkdown插件

    千次阅读 2020-04-11 21:32:21
    npm install markdown-it-vue 使用 <template> <div> <markdown-it-vue class="md-body" :content="content" /> </div> </template> <script> import Mar...

    官网:插件演示官网

    安装

    npm install markdown-it-vue
    

    使用

    <template>
      <div>
        <markdown-it-vue class="md-body" :content="content" />
      </div>
    </template>
    
    <script>
    import MarkdownItVue from 'markdown-it-vue'
    import 'markdown-it-vue/dist/markdown-it-vue.css'
    export default {
      components: {
        MarkdownItVue
      },
      data() {
        return {
          content: '# your markdown content'
        }
      }
    }
    </script>
    

    部分问题

    我这边遇到一个input不为String问题,解决方法是定义一个变量,然后赋值给这个变量,用这个赋值过的变量来做:content

    //部分代码省略
    <markdown-it-vue
              class="md-body"
              v-highlight
              :content="html"
              :options="options"
            />
    
    data() {
        return {
          html:"",
          options: {
            markdownIt: {
              linkify: true
            }
          }
        };
      },
    
    
    this.html = this.article.html
    

    效果

    效果与我之前的差别不是很大,但是在手机端的代码显示效果很不错!

    image-20200411212138695

    展开全文
  • 因为,需要在vue项目中实现markdown的编辑与展示,调研了很多markdown的编辑插件和一些富文本编辑工具,最后还是选择了mavonEditor,比较简洁,需要基本可以满足 安装 npm install mavon-editor --save 使用 &...

    因为,需要在vue项目中实现markdown的编辑与展示,调研了很多markdown的编辑插件和一些富文本编辑工具,最后还是选择了mavonEditor,比较简洁,需要基本可以满足

    安装

    npm install mavon-editor --save

    使用

    <template>
      <div style="width: 100%;height: 100%">
        <mavon-editor v-model="value" @save="save" :toolbarsFlag="!readOnly" :defaultOpen="readOnly?'preview':'edit'" :ishljs = "true" :subfield="readOnly"  :editable="readOnly"
                      @imgAdd="imgAdd" ref="md"
        />
      </div>
    </template>
    
    <script>
      import {mavonEditor} from 'mavon-editor'
      import 'mavon-editor/dist/css/index.css'
    export default {
      name: 'HelloWorld',
      components:{
        mavonEditor
      },
      props:{
        markContent:{
          type: String,
          default: ""
        },
        alikey:{
          type: String,
          default: ""
        },
        alisecret:{
          type: String,
          default: ""
        },
        readOnly:{
          type: Boolean,
          default: false
        },
      },
      data () {
        return {
          value: "",
          token:null,
        }
      },
      mounted(){
        this.value=this.markContent;   
    
      },
      methods:{
        save(value,render){
          this.$emit("save",value,render);
        },
        imgAdd(pos,file){
          // 第一步.将图片上传到服务器.
          let formdata = new FormData();
          axios({
            url: '',
            method: 'post',
            data: formdata,
            headers: { 'Content-Type': 'multipart/form-data', "Signature":this.token},
          }).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`
             */
            let url=res.data.data[0].url;
            console.log(this.$refs.md);
            this.$refs.md.$img2Url(pos, url);
          })
        }
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    
    </style>
    

    使用效果

    基于此组件,我也进行了简单的二次封装,支持图片的上传,保存到服务器可以参考https://www.npmjs.com/package/gykj-mark-down

    展开全文
  • :sparkles: vue3-markdown-it :sparkles: 一个很棒的 Vue 3 包装插件,甚至可以支持外部插件! :magnifying_glass_tilted_right: 安装 npm install vue3-markdown-it 支持的插件 -而其中,一切都开始它 - 添加...
  • 此篇文章讲解如何在vue项目中导入markdown插件 一、导入步骤 1.下载插件 地址如下: https://github.com/hinesboy/mavonEditor 2.将文件复制粘贴到vue文件的components文件夹下 如下(最后一行): 3.在需要引入的...
  • vue markdown_Vue的强大Markdown组件

    千次阅读 2020-07-27 06:38:24
    vue markdown 降价促销 (markdown-it-vue) The vue lib for markdown-it. markdown-it的Vue库。 View Demo 查看演示 Download Source 下载源 安装 (Install) npm install markdown-it-vue 支持 (Supports) ...
  • import Vue from 'vue' import App from './App.vue' // 全局注册 mavon-editor import mavonEditor from 'mavon-editor' import 'mavon-editor/dist/css/index.css' Vue.use(mavonEditor) Vue.con
  • 安装:npm install markdown-it --save // 引入 var MarkdownIt = require('markdown-it'), // 实例化 ...通过 v-html 插件markdown 转化的 HTML标签内容渲染到对应页面位置 <div v-html.
  • 一款强大的Vue-markdown编辑器插件

    万次阅读 2019-01-25 17:37:09
    为优化插件体积,从 v2.4.2 起以下文件将默认使用 cdnjs 外链: highlight.js github-markdown-css katex ( v2.4.7 ) 代码高亮 highlight.js 中的语言解析文件和代码高亮样式将在使用时按需加载. github-...
  • Vue中,,markdown插件并不是很多,特别是一直保持更新的,只有这一款,我用了下,有点"不好用",这个不好用并不是插件不好,而是官方文档里面的内容有些说的并不是很清楚,好多就得自己摸索 github demo 保存...
  • 安装mavon-editor插件 npm install mavon-editor --save 在main.js中引入mavon-editor // 导入markdown编辑器 import mavonEditor from "mavon-editor"; import "mavon-editor/dist/css/index.css";3 // 使用...
  • 在上面的基础上,怎样实现markdown在线编辑功能。 注: 博客:霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 1、插件...
  • github:vue-markdown 下面是vue组件化中使用stylus语法 其中>>> 是为了让组件内也生效 vue组件化开发 >>> * /* 设置滚动条的样式 */ ::-webkit-scrollbar height 5px /*设置横向滚动条的高度...
  • markdown高亮vue vue-markdown-highlight (vue-markdown-highlight) Highlight.js syntax highlighter component for Vue. Vue的Highlight.js语法荧光笔组件。 安装 (Installation) Via NPM: Install ...
  • Vuemarkdown-it, github-markdown-css和highligt.js实现markdown语法高亮
  • Vue渲染Markdown数据

    千次阅读 2020-04-29 18:46:50
    刚开始在网上找了一大圈,要么只能把md文件通过插件转换为vue组件来渲染,虽然有通过Markdown数据来渲染,但是出来的结果不太理想。在看完几篇关于vue渲染Markdown的文章后,经过一番尝试,终于弄好了。** 二,实现...
  • markdown-it的Vue库。 在线演示 安装 npm install markdown-it-vue 支持 图像大小和查看器 官方降价语法。 GFM目录 GFM风格 表情符号 仅简单 Flowcharts.js 下标/上标 信息| 错误警告信息提示 插件清单 降价 ...
  • vue markdown 降价促销 (markdown-it-vue) The vue lib for markdown-it. markdown-it的Vue库。 View Demo 查看演示 View Github 查看Github 安装 (Install) npm install markdown-it-vue 支持 (Supports) ...
  • Vue编写markdown或者展示markdown

    万次阅读 多人点赞 2018-08-28 16:41:07
    之前做博客开发的时候,需要markdown的支持,找了很多资料,但是都是七拼八凑的,要么是告诉你怎么编写markdown,要么是告诉你怎么展示,我把它们总结一下。 1、介绍mavonEditor 官网:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,954
精华内容 2,381
关键字:

vuemarkdown插件