vue集成editormd编辑器

2020-06-30  本文已影响0人  深吸一口气

editormd官网
1、将edmitor.md-master目录放在Vue项目的public目录下
2、在 public/index.html下编辑

<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="<%= BASE_URL %>editor.md-master/css/editormd.css" />
<script src="<%= BASE_URL %>editor.md-master/editormd.min.js"></script>

3、将edmitormd封装成组件

<template>
    <div id="editormdid">
        <textarea v-model="content"></textarea>
    </div>
</template>

<script>
    export default {
        name: 'Editor',
        props: {
            content:{
                type: String,
                default: ''
            }
        },
        data() {
            return {
                instance: null,
            };
        },
        mounted() {
            this.initEditor();
        },
        methods: {
            initEditor() {
                this.instance = window.editormd("editormdid", {
                    height: 500,
                    emoji: true,
                    path: 'editor.md-master/lib/'
                });
            }
        },
    };
</script>
上一篇 下一篇

猜你喜欢

热点阅读