美文网首页
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