vue集成editormd编辑器

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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。