vue 中实现markdown编辑器

2019-10-23 admin

在vue中使用markdown我使用到了mavon-editor组件,mavon-editor组件github地址:https://github.com/hinesboy/m…

一:下载mavon-editor

npm install mavon-editor

二:mavon-editor使用

html代码:

<template>
<div>
<mavon-editor v-model="content" ref="md" @change="change" @imgAdd="$imgAdd" style="min-height: 600px" />
</div>
</template>

js代码:

前提:需要引入mavon-editor

import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

完整的js代码如下:

<script type="text/ecmascript-6">
// 导入组件 及 组件样式
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
export default {
 components: {
        mavonEditor,//mavon-editor组件
    },
data() {
 return {
            content:'', // 输入的markdown
            html:'',    // 转成的html
        }
},
methods: {
    change(value, render) {
        //实时获取转成html的数据
        this.html = render
        console.log(this.html)
    },
    // 将图片上传到服务器,返回地址替换到md中 
    $imgAdd(pos, $file){ 
        let formdata = new FormData(); 
     formdata.append('image', $file);
     this.$ajax({
       url: 'http://local.basic.com/index.php?r=markdown/upload',
       method: 'post',
       data: formdata,
     }).then((data) => {
        //将返回的url替换到文本原位置
               if (data.data.success == 1) {
               this.$refs.md.$img2Url(pos, data.data.url);
               console.log(data.data.url)
               }

           })
},
},
}
</script>

上面使用到了调取外部接口进行上传,调取外部接口方法可参考:vue.js结合axios实现跨域访问接口

上传接口可以参考:html+js 实现markdown编辑器效果 中的上传接口

到此在vue中实现markdown编辑器功能实现完成

现象如下: image.png

[转载]原文链接:https://segmentfault.com/a/1190000020774766

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-78065.html

文章标题:vue 中实现markdown编辑器

相关文章
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
jsdom 中文文档(纯翻译)
jsdom是一个纯粹由 javascript 实现的一系列 web标准,特别是 WHATWG 组织制定的DOM和 HTML 标准,用于在 nodejs 中使用。大体上来说,该项目的目标是模拟足够的Web浏览器子集,以便用于测试和挖掘真实世界...
2018-05-14
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot; style=&quot;width: 100%; height:100%;&quot;&gt...
2017-02-17
JS中的语音合成——Speech Synthesis API
JS中的语音合成——Speech Synthesis API 简介 HTML5中和Web Speech相关的API实际上有两类,一类是“语音识别(Speech Recognition)”,另外一个就是“语音合成(Speech Synthes...
2018-05-17
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 ...
2017-03-16
js实现手机拍照上传功能
在前段时间的项目开发中,用到了拍照上传的地方,后来发现了最为简单的一种方法,现总结如下: &lt;form id=&quot;form&quot; method=&quot;post&quot; action=&quot;http:&#x2...
2017-03-06
jQuery中DOM树操作之使用反向插入方法实例分析
本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用...
2015-11-13
回到顶部