vue整合editor.md

editor.md是一个很好的开源markdown编辑器,editor.md没有提供与vue整合的直接方案,需要自己将 editor.md 封装到vue组件中。

首先 editor.md 使用原始的;(function(factory){...}(function(){...}));进行模块化的,它会最终将editormd暴露给用户用,该对象附着在windows上,并且editormd的初始化依赖jQuery对象,所以整合思路是:

  1. 先将 editor.md 库文件放入public/lib目录下
  2. 引入jQuery,并附着在window上,editormd初始化时能够访问到
  3. 当vue组件挂载时(mounted),异步获取editor.md的js和css文件
  4. 创建editor实例

代码如下:

<template>
    <div :id="id">
    </div>    
</template>
<script>
import $ from "jquery";
import uuid from "uuid/v4";

export default {
    name:"MarkdownEditor",
    data:function(){
        return {
            //最终生成的编辑器
            editor:null,
            //默认选项
            defaultOptions:{
                //width: "90%",
                //height: 740,
                path : "/lib/editor.md/lib/",
                theme : "dark",
                previewTheme : "dark",
                editorTheme : "pastel-on-dark",
                //markdown : md,   //动态设置的markdown文本
                codeFold : true,
                //syncScrolling : false,
                saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
                searchReplace : true,
                //watch : false,                // 关闭实时预览
                htmlDecode : "style,script,iframe|on*",            // 开启 HTML 标签解析,为了安全性,默认不开启    
                //toolbar  : false,             //关闭工具栏
                //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮,默认开启
                emoji : true,
                taskList : true,
                tocm            : true,         // Using [TOCM]
                tex : true,                   // 开启科学公式TeX语言支持,默认关闭
                flowChart : true,             // 开启流程图支持,默认关闭
                sequenceDiagram : true,       // 开启时序/序列图支持,默认关闭,
                //dialogLockScreen : false,   // 设置弹出层对话框不锁屏,全局通用,默认为true
                //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层,全局通用,默认为true
                //dialogDraggable : false,    // 设置弹出层对话框不可拖动,全局通用,默认为true
                //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度,全局通用,默认值为0.1
                //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色,全局通用,默认为#fff
                imageUpload : true,
                imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL : "./php/upload.php",
                onload : function() {
                    //console.log('onload', this);
                    //this.fullscreen();
                    //this.unwatch();
                    //this.watch().fullscreen();

                    //this.setMarkdown("#PHP");
                    //this.width("100%");
                    //this.height(480);
                    //this.resize("100%", 640);
                }
            }
        }
    },
    props:{
        /**
         * editormd挂载元素的id
         */
        id:{
            type:String,
            default:uuid()
        },
        /**
         * editormd的选项对象
         */
        options:{
            type:Object
        }
    },
    mounted(){
        let vm=this;
        //加载editormd
        this.requireEditor(function(){
            vm.editor=editormd(vm.id,vm.getOptions());
        })
        
    },
    methods:{
        /**
         * 异步加载editormd
         * callback 成功后的回调函数
         */
        requireEditor(callback){
            let vm=this;
            //设置全局变量,因为editormd依赖jquery
            window.$=window.jQuery=$;
            //异步加载并执行
            $.getScript("/lib/editor.md/editormd.min.js",function(script){
                callback();
            })
            //加载css
            $('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', '/lib/editor.md/css/editormd.min.css') );
        },
        /**
         * 得到最终的options,组件属性上获得的选项覆盖此处的默认选项
         */
        getOptions(){
            return Object.assign(this.defaultOptions,this.options);
        }
    }
}
</script>
<style>

</style>

参考:
Vue中如何引入一个html(包含css/js)作为一个模块

  • 7
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值