精华内容
下载资源
问答
  • // 导入markdown编辑器 import mavonEditor from "mavon-editor"; import "mavon-editor/dist/css/index.css";3 // 使用MarkDown编辑器 Vue.use(mavonEditor); 在组件中使用 <template> <div cla.

    这里我们选择的插件是editor.md的插件

    首先我们先下载这个插件到本地
    官网有提供github下载和npm下载两种方式 , 这里我选择npm下载

    npm install editor.md
    

    下载后我们需要拷贝一些文件到自己的项目中
    在这里插入图片描述
    将上面的八个文件拷贝到自己的vue项目的static目录中的editormd文件夹下面

    然后在我们的vue项目中的index.html文件中引入editormd的样式文件和js文件

      <!--引入MarkDown编辑器的样式-->
      <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
      <link rel="stylesheet" href="./static/lib/editormd/css/editormd.min.css" />
    
    <!--jQuery-->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!--引入MarkDown插件的js-->
    <script src="./static/lib/editormd/editormd.min.js"></script>
    

    这里要特别注意 , 我们必须要先引入jquery再引入editormd , 注意代码的顺序

    在vue组件中集成editormd的代码

    <div class="field">
      <div id="md-content" style="z-index: 1 !important; opacity: 1">
          <textarea style="display:none;">[TOC]#### Disabled options</textarea>
      </div>
    </div>
    

    在mounted钩子函数中编写下面的代码

    	  // 对MarkDown插件编辑器的引入
          var testEditor;
          $(function() {
            testEditor = editormd("md-content", {
              width   : "100%",
              height  : 640,
              syncScrolling : "single",
              path    : "../../../static/lib/editormd/lib/"
            });
          });
    

    这里注意两点:

    • editormd中的md-content和上面div的id值一致

    • path中的路径写的是editormd下面的那个lib文件的路径

    效果图
    在这里插入图片描述

    展开全文
  • Markdown 介绍 1. 什么是Markdown   首先,各位框架玩家一定不会陌生,...  Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。   Markdow..

    转自:https://www.jianshu.com/p/474197c1f7cc 谨用于记录

     

    Markdown 介绍

    1. 什么是Markdown
      首先,各位框架玩家一定不会陌生,因为无论是在各类框架下还是开源项目中,都会有一个.md的文件,该文件一般是项目说明文件,不仅语法简洁,而且所生成的“页面”也要比普通标记语言更加整洁明了。那么它到底是什么呢?
      Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。
      Markdown具有一系列衍生版本,用于扩展Markdown的功能(如表格、脚注、内嵌HTML等等),这些功能原初的Markdown尚不具备,它们能让Markdown转换成更多的格式,例如LaTeX,Docbook。Markdown增强版中比较有名的有Markdown Extra、MultiMarkdown、 Maruku等。这些衍生版本要么基于工具,如Pandoc;要么基于网站,如GitHub和Wikipedia,在语法上基本兼容,但在一些语法和渲染效果上有改动。

    2. Markdown用途
      Markdown的语法简洁明了、学习容易,而且功能比纯文本更强,因此有很多人用它写博客。世界上最流行的博客平台WordPress和大型CMS如Joomla、Drupal都能很好的支持Markdown。完全采用Markdown编辑器的博客平台有Ghost和Typecho。
      用于编写说明文档,并且以“README.md”的文件名保存在软件的目录下面。
    除此之外,由于我们有了RStudio这样的神级编辑器,我们还可以快速将Markdown转化为演讲PPT、Word产品文档、LaTex论文甚至是用非常少量的代码完成最小可用原型。在数据科学领域,Markdown已经广泛使用,极大地推进了动态可重复性研究的历史进程。

    vue 中如何使用

    注: 本示例选用的是mavon-editor
    很明显,所有组件逃不过三步走原则:

    1. 安装
    2. 引入、配置
    3. 使用

    1. 安装

    安装mavon-editor:npm install mavon-editor --save

    2. 引入、配置

    在要使用markdown编辑器的组件内操作:

     

    <script>
    // 导入组件 及 组件样式
    import { mavonEditor } from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    </script>
    

    3. 使用

    注意:

    1. 绑定model
    2. 实时改变:将markdown实时转化为html

    在要使用markdown编辑器的组件内操作:

     

    <template>
        <div>
            <mavon-editor 
                v-model="content" 
                ref="md" 
                @change="change" 
                style="min-height: 600px"
            />
    
            <button @click="submit">提交</button>
        </div>
    </template>
    
    
    
    <script>
    export default {
        // 注册
        components: {
            mavonEditor,
        },
        data() {
            return {
                content:'', // 输入的markdown
                html:'',    // 及时转的html
            }
        },
        methods: {
            // 所有操作都会被解析重新渲染
            change(value, render){
                // render 为 markdown 解析后的结果[html]
                this.html = render;
            },
            // 提交
            submit(){
                console.log(this.content);
                console.log(this.html);
            }
        },
        mounted() {
    
        }
    }
    </script>
    

    问题

    那么,在常用的操作里面,例如各级标题、表格、加粗加斜、标记、图文……图?此时,我们发现一个问题:如何添加本地图片呢?

    Q

    在某些IDE里面使用markdown时,可以自由的插入本地图片,那我们在页面中使用此编译器组件如何添加图片呢?

    A

    监听。没错,就是监听输入框变化。如果监听到有图片插入,那么我们可以先将图片上传至服务器,然后获取到线上url,拿到该url再插入到该位置。那么具体过程就很明显了:

    1. 选择本地图片,插入
    2. 监听到有图片插入
    3. 将该图上传至服务器
    4. 获取到服务器返回的图片url
    5. 将该线上url冬天插入到输入框中

    代码如下

     

    <template>
        <div class="markdown">
            <div class="container">
                <mavon-editor v-model="content" ref="md" @imgAdd="$imgAdd" @change="change" style="min-height: 600px"/>
                <button @click="submit">提交</button>
            </div>
        </div>
    </template>
    
    <script>
        import { mavonEditor } from 'mavon-editor'
        import 'mavon-editor/dist/css/index.css'
    
        export default {
            name: "",
            props: [],
            components: {
                mavonEditor,
            },
            data() {
                return {
                    content:'',
                    html:'',
                    configs: {}
                }
            },
            methods: {
                // 将图片上传到服务器,返回地址替换到md中
                $imgAdd(pos, $file){
                    let formdata = new FormData();
    
                    this.$upload.post('/上传接口地址', formdata).then(res => {
                        console.log(res.data);
                        this.$refs.md.$img2Url(pos, res.data);
                    }).catch(err => {
                        console.log(err)
                    })
                },
                // 所有操作都会被解析重新渲染
                change(value, render){
                    // render 为 markdown 解析后的结果[html]
                    this.html = render;
                },
                // 提交
                submit(){
                    console.log(this.content);
                    console.log(this.html);
                    this.$message.success('提交成功,已打印至控制台!');
                }
            },
            mounted() {
    
            }
        }
    </script>
    
    

     

    展开全文
  • VUE集成markdown

    千次阅读 2020-12-30 14:45:54
    继上次跳转完页面后,需要继承一个编辑器嘛,博客首先选择的肯定是markdown啦。 经过一系列百度和以前多次尝试集成失败的经验最终在github上找打一款高星的组件。 贴出它的地址点击跳转github:...

    0.前言

    身为攻城狮没有自己搭建的博客略微显得有的low,经过一系列拖延,开始慢慢搭建我的自制博客。
    继上次跳转完页面后,需要继承一个编辑器嘛,博客首先选择的肯定是markdown啦。
    经过一系列百度和以前多次尝试集成失败的经验最终在github上找到一款高星的组件。

    贴出它的地址点击跳转github:https://github.com/hinesboy/mavonEditor

    1.盘他

    1.1项目架构

    依然优先贴出架构
    在这里插入图片描述

    1.2引入

    按官网指挥引入组件
    npm install mavon-editor --save
    效果:以后想用代码高亮就把highlight.js,虽然还不知咋用以后再研究

    先把官网贴在这highlight.js

    npm install highlight.js
    在这里插入图片描述

    1.3VUE使用

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

    在main.js里的new Vue上贴上这个代码,至于main.js是哪个看上面组织结构
    在这里插入图片描述

    1.4实现

    methods 里的方法先不用管(还在调,是上传下载图片和发布文章的方法,下篇帖子),不贴也行,就可以跑起来看效果了。npm run dev

    <template>
        <div>
            <div class="leftMenu">
                <li>保存</li>
                <li>预览</li>
                <li @click="updateArticle">发布</li>
            </div>
    
            <div id="editor">
                <div>
                    <p>文章标题</p>
                    <input type="text" v-model="push.articleName">
                </div>
                <mavon-editor v-model="push.articleBody" ref="md" @imgAdd="imgAdd" @imgDel="imgDel" />
            </div>
    
        </div>
    </template>
    
    <script>
    
    export default {
        name: 'editor',
        data(){
            return {
                push:{
                    articleBody: "",
                    articleDescription: "",
                    articleFlag: 0,
                    articleId: 0,
                    articleImgUrl: "",
                    articleName: "",
                    classifyIdList: [
                        1
                    ],
                    collectStatus: true,
                    commentStatus: true,
                    starStatus: true
                }
            }
        },
        components: {
            // mavonEditor
            // or 'mavon-editor': mavonEditor
        },
        methods : {
            imgAdd (pos, $file) {
                let formdata = new FormData()
                formdata.append('file', $file)
                this.$axios({
                   url: '/file/upload',
                   method: 'post',
                   data: formdata,
                   headers: { 'Content-Type': 'multipart/form-data;charset=UTF-8' ,
                    'aaa':'aaa'
                   },
               }).then((url) => {
                   // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
                //    this.$vm.$img2Url(pos, url.data);
                   this.$refs.md.$img2Url(pos, url.data);
               })
            },
            imgDel (pos) {
                delete this.imgFile[pos]
            },
            updateArticle(){
                var add = {
                    articleBody: "",
                    articleDescription: "",
                    articleFlag: 0,
                    articleImgUrl: "",
                    articleName: "",
                    classifyIdList: [
                        1
                    ],
                    collectStatus: true,
                    commentStatus: true,
                    starStatus: true
                }
                add.articleBody = this.push.articleBody
                add.articleDescription = this.push.articleDescription
                add.articleFlag = this.push.articleFlag
                add.articleImgUrl = this.push.articleImgUrl
                add.articleName = this.push.articleName
                add.classifyIdList = this.push.classifyIdList
                add.collectStatus =  this.push.collectStatus
                add.commentStatus = this.push.commentStatus
                add.starStatus = this.push.starStatus
                document.cookie="user_info=1;path = /"
                this.$axios({
                    url :'/admin/updateArticle',
                    method : 'post',
                    data: add
                }).then((url) => {
                    if(url.data.Result == 1){
                        alert(url.data.Message)
                    }else{
                        alert(url.data.Message)
                    }
                })
            }
    
        }
    }
    </script>
    
    <style scoped>
    .leftMenu{
        float: left;
        height: 100%;
    }
    #editor {
            margin: auto;
            padding: 10px auto;
            width: 70%;
            height: 100%;
        }
    </style>
    

    ok大功告成,展示下效果
    在这里插入图片描述

    躬身自省,淳朴而谦逊否——文文的博客
    前辈见之,如有问题,麻烦留言斧正。

    展开全文
  • 这里使用的v-md-editor 是基于 Vue 开发的 markdown 编辑器组件 安装支持vue3的版本: # 使用 npm npm i @kangc/v-md-editor@next -S 在vue3中注册: import { createApp } from 'vue'; import VueMarkdownEditor ...

    这里使用的v-md-editor 是基于 Vue 开发的 markdown 编辑器组件

    安装支持vue3的版本:

    # 使用 npm
    npm i @kangc/v-md-editor@next -S
    

    在vue3中注册:

    import { createApp } from 'vue';
    import VueMarkdownEditor from '@kangc/v-md-editor';
    import '@kangc/v-md-editor/lib/style/base-editor.css';
    import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
    import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
    
    import Prism from 'prismjs';
    
    VueMarkdownEditor.use(vuepressTheme, {
      Prism,
    });
    
    const app = createApp(/*...*/);
    
    app.use(VueMarkdownEditor);
    

    使用:

    <template>
      <v-md-editor v-model="text" height="400px"></v-md-editor>
    </template>
    
    <script>
    export default {
      data() {
        return {
          text: '',
        };
      },
    };
    </script>
    

    效果:

    在这里插入图片描述
    打印出的text数据结构:
    在这里插入图片描述

    预览组件:

    在vue3中引用

    import { createApp } from 'vue';
    import VMdPreview from '@kangc/v-md-editor/lib/preview';
    import '@kangc/v-md-editor/lib/style/preview.css';
    import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
    import '@kangc/v-md-editor/lib/theme/style/github.css';
    
    // highlightjs
    import hljs from 'highlight.js';
    
    VMdPreview.use(githubTheme, {
      Hljs: hljs,
    });
    
    const app = createApp(/*...*/);
    
    app.use(VMdPreview);
    

    使用:

    <template>
      <v-md-preview :text="text"></v-md-preview>
    </template>
    
    <script>
    export default {
      data() {
        return {
          text: '',
        };
      },
    };
    </script>
    

    效果:

    在这里插入图片描述

    图片上传问题:

    在这里插入图片描述

    上传图片菜单默认为禁用状态 设置 disabled-menus 为空数组可以开启。

    示例:

    <template>
      <v-md-editor
        v-model="text"
        :disabled-menus="[]"
        @upload-image="handleUploadImage"
        height="500px"
      />
    </template>
    
    <script>
    export default {
      data() {
        return {
          text: '',
        };
      },
      methods: {
        handleUploadImage(event, insertImage, files) {
          // 拿到 files 之后上传到文件服务器,然后向编辑框中插入对应的内容
          console.log(files);
    
          // 此处即为向编辑框中插入的内容,url即为图片上传后返回的链接
          // 此处只做示例
          insertImage({
            url:
              'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1269952892,3525182336&fm=26&gp=0.jpg',
            desc: '七龙珠',
            // width: 'auto',
            // height: 'auto',
          });
        },
      },
    };
    </script>
    

    效果:

    在这里插入图片描述

    v-md-editor官方网站

    展开全文
  • 0.前言 继上传文档到服务器后,需要展示文章,使用markdown解析框架 百度了一下发现用marked的人不少,过去看看 csdn加速过的地址 1.盘他 1.1引入 npm install --save marked
  • Vue实现一个MarkDown编辑器 Vue实现一个markdown编辑器 前段时间做项目的时候,需要一个Markdown编辑器,在网上找了一些开源的实现,但是都不满足需求 说实话,这些开源项目也很难满足需求公司项目的需求...
  • Vue集成Markdown插件

    千次阅读 2017-09-05 15:48:56
    目前发现的Markdown插件有vue-markdown和mavon-editor,这里选择mavon-editor 引入依赖: 带Markdown编辑器的组件 <mavon-editor style="height: 100%"></mavon-editor> i
  • 插件将prosemirror与Vue 2集成 用法 import Vue from 'vue' import ProseMirror from 'vue2-prosemirror-markdown' import App from './App.vue' Vue . use ( ProseMirror ) new Vue ( { // eslint-disable-line no...
  • 因为,需要在vue项目中实现markdown编辑与展示,调研了很多markdown编辑插件和一些富文本编辑工具,最后还是选择了mavonEditor,比较简洁,需要基本可以满足 安装 npm install mavon-editor --save 使用 &...
  • vue项目中如何使用markdown编辑器插件

    千次阅读 2019-06-24 09:03:43
    1.安装mavon-editor ...需要使用Markdown编辑器的页面js中: import { mavonEditor } from ‘mavon-editor’ import ‘mavon-editor/dist/css/index.css’ export default { components: { mavonEdi...
  • 文章目录目的开发文档整理基础工具的集成初始化项目框架引入按需引用和 SASS引入验证utools 开发配置调试和打包插件功能实现依赖库的安装调用布局实现Editor.vue调用 utools 能力做保存preload.jsApp.vue打包 upx 或...
  • vue version: vue 2.5.* 安装 github地址 npm install mavon-editor --save 引入 引入有多种方式,但是我常使用的是以组件的形式来引入 &lt;template&gt; &lt;div&gt; &lt;mavon-editor ...
  • 维基 一个简洁的个人 wiki,使用 vue.js 和 markdown-js。
  • vue 项目接入 markdown

    2019-11-01 16:53:30
    最近做一个项目,需要在vue项目中接入 markdown 编辑器,其实这个好接,他没有什么特别的样式,男的就是图片的上传。 今天给大家推荐一个插件 :mavonEditor 这个是他的github:...
  • 主要介绍了Vue中Quill富文本编辑器的使用教程,包括自定义工具栏、自定义字体选项、图片拖拽上传、图片改变大小等使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Vue 中使用 mavon-editor 组件实现Markdown编辑器 这里使用的是mavon-editor 组件 GitHub地址 首先安装 cnpm i mavon-editor --save 在需要使用的地方调用 import {mavonEditor} from 'mavon-editor' ...
  • Vue中使用Markdown

    2021-06-26 06:05:29
    Vue中使用Markdown本篇主要讲解了在Vue项目里如何集成和使用Markdown (mavonEditor)编辑器的,以及如何接入一款非常简洁强大的 Markdown的样式 (github-markdown-css),本博客系统就是使用了 mavonEditor 和 github-...
  • 精选30+云产品,助力企业轻松上云!>>> 简易Markdown编辑器 立即提交 重置 markdown文本展示渲染 ### 二级标题 ### 三级标题 #### 四级标题
  • Markdown is a popular text format written in an easy-to-read way and is convertible to HTML. It is a markup format that has been popularized by sites such as Github and Stack Overflow. Tod...
  • 但本文重点在于如何使用 Electron 和 Vue 打造一款桌面应用,因此 Markdown 渲染组件便不再重复造轮子,而是直接采用了 mavon-editor。 因此,如果是想要学习如何自己写一个 Markdown 文本渲染组件的读者不必在本文...
  • 手把手带你10分钟手撸一个简易的Markdown编辑器

    万次阅读 多人点赞 2021-06-01 09:35:17
    于是我在我的前端群里问了很多群友,他们都给了甩过来一堆开源的markdown编辑器项目,但我一看全是基于Vue使用的,不符合我的预期,逛了一下github,也没看到我满意的项目,所以就想自己实现一个啦 需要实现的功能 ...
  • 实现功能 ...由于Markdown编辑器原因,返回的图片路径不能有\与空格 如果遇到第二次进入编辑页面不能显示文章内容,那么在下方getArticle()方法中,处理响应的最后一行加入// 解决第二次进入不能显示...
  • yafelement在这个版本markdown编辑器(editor.md)组件化了,只要在模型中设置字段类型未editor该模块将自动加载markdown编辑器;看一下效果:该编辑器支持很强大的功能、比如公式、流程图、目录生成等等:说到这里,...
  • 随着Markdown布局方式的普及,越来越多的应用开始集成Markdown编辑器。当前主流可集成的Markdown编辑器现状如下: 有的唯一支持分屏预览,即编辑区和预览区分离 有的同时支持所见即所得和分屏预览,但所见即所得模式...
  • 始化项目,建立并编辑 package.json 建立基本目录 修改配置文件 - config.js 修改README.md 运行项目 深度开发 配置导航 配置侧边栏 总结 模板主题设置 其它插件 一份完整的源码 介绍 VuePress是一个用来构建...

空空如也

空空如也

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

vue集成markdown编辑器

vue 订阅