js中想使用mavonEditor（markdown编辑器）

最新推荐文章于 2025-04-01 02:15:30 发布

帅东

最新推荐文章于 2025-04-01 02:15:30 发布

阅读量3.2k

点赞数 1

分类专栏：前端技术文章标签： mavonEditor js bootstrap

本文链接：https://blog.csdn.net/PROGRAM_anywhere/article/details/86579018

版权

前端技术专栏收录该内容

1 篇文章

订阅专栏

很久没写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