-基于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 : {},
}
},
};| 参数 | 说明 | 类型 | 必选 | 可选值 | 默认值 |
|---|---|---|---|---|---|
| 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 |
| 参数 | 说明 | 类型 | 必选 | 可选值 | 默认值 |
|---|---|---|---|---|---|
| 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 | - | - |
下面示例方法为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);
}
});
});
}| 事件 | 说明 | 参数 |
|---|---|---|
| success | 开启回调模式、点击上方确定按钮 | image |
| cancel | 开启回调模式、点击上方取消按钮 | - |
| 方法名 | 说明 | 参数 |
|---|---|---|
| toImage | 把画布转为图片 | File |
| getJson | 获取画布数据 | - |
| getConfig | 获取当前画布配置 | - |
| setConfig | 设置画布配置 | {name : value} |
| handleEvent | 触发画布事件详情 | {name:EventName,data:EventData} |
事件可用于自定义Header的时候触发
| 事件名称 | 说明 | 参数 |
|---|---|---|
| AutoWindowSize | 自适应窗口大小 | - |
| SaveJson | 保存JSON文件 | fileName |
| SavePng | 保存Png | fileName |
| SaveSvg | 保存Svg | fileName |
| New | 打开新画布 | - |
| Undo | 撤销 | - |
| Redo | 恢复 | - |
| Copy | 复制 | - |
| Cut | 剪切 | - |
| Parse | 粘贴 | - |
| Open | 打开 | data |
| OpenFile | 打开文件 | - |
| SaveCache | 保存缓存 | - |
| ReadCache | 读取缓存 | - |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent