您现在的位置是:网站首页>>前端技术>>Vue

vue 中实现markdown编辑器

发布时间:2019-10-23 09:30:34作者:wangjian浏览量:35点赞量:1

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

    一:下载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

1 +1