美文网首页
vue集成editormd编辑器

vue集成editormd编辑器

作者: 深吸一口气 | 来源:发表于2020-06-30 11:23 被阅读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>

相关文章

网友评论

      本文标题:vue集成editormd编辑器

      本文链接:https://www.haomeiwen.com/subject/nngfvctx.html