js中想使用mavonEditor(markdown编辑器)

很久没写blog了,多说两句交流一哈,哈哈。不想看就去页底吧 O(∩_∩)O

为什么有这个奇葩的需求的?在vue里面直接写不就好了

本人是个前端小白,就总结一下学习路上的经验
最近想写一个系统,没办法前端、后台得我一个人搞,于是就想找一个前端框架。
去bootstrap官网看了一下
在这里插入图片描述
我cao,这么厉害,“第一款mobile”,“世界上most流行的…”
于是我就开始使用bootstrap了

现在有个需求是啥呢?想要一个markdown编辑器,可以实现实时预览
上网搜了一下,markdown的插件还挺多的,搞了一两款。
在这里插入图片描述
这个是我找的感觉最好的jquery的markdown插件,一切准备就绪,准备写代码,突然发现上传图片怎么如此恶心
在这里插入图片描述
他会把图片全部都base64编码后放到文本里面。
划重点:我刚在阿里云上买了OSS,怎么会允许图片存到本地数据库呢。
于是我又找到了mavonEditor,界面炫酷,功能齐全,图片存储方式也和我心意,完美
在这里插入图片描述
问题来了,它是基于vue的,但我没有使用过这个框架,而且我现在这个项目都写的差不多了,不可能换框架。于是我看bootstap和vue能不能共存,发现是可以的。
划重点网上所有教程都是关于vue使用mavonEditor的
https://gitee.com/gaoyoubo/mavonEditor

终于在我不懈的努力下发现了如何在js中使用mavonEditor

写一个完整代码,就放到一个html页面中了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dong blog</title>
    <link href="/mavonEditor/css/index.css" rel="stylesheet">

    <script src="/mavonEditor/mavon-editor.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="main">
</div>

<script src="/js/user/mavonEditor.js"></script>

<script>
    Vue.use(window['mavon-editor'])
    new Vue({
        'el': '#main',
        data:{
            value: "帅东"
        },
        template:'<mavon-editor v-model="value" ref=md @imgAdd="$imgAdd"></mavon-editor>',
        methods: {
            $imgAdd: function (pos, file) {
            //在这里上传图片
            }
        }
    })
</script>
</body>
</html>

至于怎么把返回的url回写到图片上,留个secret

评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值