Markdown-topology-editor NPM

-基于Le5le-Topology-Core写关于编辑器拓展插件的在线拓扑绘图组件，方便一边编写文章一边画图。 -内置了完整的markdown富文本编辑器mavon-editor

安装

$ npm install markdown-topology-editor --save

使用

带有topology的mavon-editor编辑器：

<template>
    <markdown-editor 
        :options="options" 
        :upload-image="uploadImage"
        :value.sync="content"
    ></markdown-editor>
</template>
import {MarkdownEditor} from 'markdown-topology-editor'
export default {
    components: {
        MarkdownEditor
    },
    data(){
        return {
            options : {},
            content : ''
        }
    },
    methods:{
        //上传方法，文档后面有上传方法示例
        uploadImage(){}
    }
};

单独引入topology,如果需要mavon-editor额外拓展可以单独引入topology

<template>
    <topology-editor 
        :options="options" 
        :is-callback="true"
        :visible.sync="visibleTopology"
        :upload-image="uploadImage"
        @success="handleSuccess"
    ></topology-editor>
</template>
import {TopologyEditor} from 'markdown-topology-editor'
export default {
    components: {
        TopologyEditor
    },
    data(){
        return {
            options : {},
            visibleTopology :false,
            
        }
    },
    methods:{
        //上传方法，文档后面有上传方法示例
        uploadImage(){},
        handleSuccess(image){}
    }
};

使用topology-view来单独渲染预览绘图。topology-view的API接口与topology-editor的API接口一致

<template>
    <topology-view :data="data"/>
</template>
import {TopologyView} from 'markdown-topology-editor'
export default {
    components: {
        TopologyView
    },
    data(){
        return {
            data : {}, 
        }
    },
};

TopologyEditor API文档

Props

参数	说明	类型	必选	可选值	默认值
options	选项	Object	N	Options	null
isCallback	是否开启回调（即右上方的取消确定按钮）	Boolean	true、false	false
uploadImage	上传图片方法（格式详情Upload Function）	Function	N	-	null
visible	是否显示	Boolean	N	true、false	true
top	Body距离顶部位置（当自定义header的时候建议设置该属性）	Number	N	-	0
defaultOpenData	默认打开数据	Object	N	-	null

Options

参数	说明	类型	必选	可选值	默认值
resourcePath	图片资源根路径	String	N	-
scale	放大倍数	Number	N	-	1
lineName	线条类型	String	N	curve、polyline、line、mind	curve
lineWidth	线宽	Number	N	-	1
fromArrow	起点箭头	String	N	triangleSolid、triangle、diamondSolid、diamond、circleSolid、circle、line、lineDown、lineUp
toArrow	终点箭头	String	N	triangleSolid、triangle、diamondSolid、diamond、circleSolid、circle、line、lineDown、lineUp	triangleSolid
fontSize	字体大小	Number	N	-	12
grid	是否开启网格	Boolean	N	true、false	true
rule	是否显示标尺	Boolean	N	true、false	true
rotateCursor	鼠标图标路径	String	N	-
bkColor	背景颜色	String	N	-	#f8f8f8
logo	图标	String	N	-	/favicon.ico
valuePrecision	数值精度	Number	N	-	0
extendIcons	扩展图标,即为在iconfont下载图标库里面的xx.json文件格式	Array	N	-	-

UploadImage Function

下面示例方法为axios的上传文件示例，注意返回值须为Promise，值为图片路径

/**
 * 上传文件
 * @param {File} file 文件
 * @param {Object} data 数据
 * @param {Function} uploadProgress 上传进度方法
 * @return Promise
 */
function uploadFile(file,data,uploadProgress) {
	let postData = new FormData();
	postData.append('file',file);
	for(let key in data){
		postData.append(key,data[key]);
	}
    return new Promise(resolve => {
        axios({
    		url: '',
            method : 'POST',
    		data : postData,
    		onUploadProgress : uploadProgress,
    		timeout : 0,
    		headers: {
    			'Content-Type': 'multipart/form-data' 
    		}
    	}).then(response => {
            //判断上传是否成功
    	    if(response.success){
                //注意这个Promise回调须为图片路径
    	        resolve(response.data.url);
            }
        });
    });
	
}

Events

事件	说明	参数
success	开启回调模式、点击上方确定按钮	image
cancel	开启回调模式、点击上方取消按钮	-

Methods

方法名	说明	参数
toImage	把画布转为图片	File
getJson	获取画布数据	-
getConfig	获取当前画布配置	-
setConfig	设置画布配置	{name : value}
handleEvent	触发画布事件详情	{name:EventName,data:EventData}

Handle Events Payload

事件可用于自定义Header的时候触发

事件名称	说明	参数
AutoWindowSize	自适应窗口大小	-
SaveJson	保存JSON文件	fileName
SavePng	保存Png	fileName
SaveSvg	保存Svg	fileName
New	打开新画布	-
Undo	撤销	-
Redo	恢复	-
Copy	复制	-
Cut	剪切	-
Parse	粘贴	-
Open	打开	data
OpenFile	打开文件	-
SaveCache	保存缓存	-
ReadCache	读取缓存	-