open-index/open-npm huggingface dataset:
npm package: @monkey4cloud/avue-plugin-ueditor
Description: <p align="center">   <img width="600" src="https://gitee.com/smallweigit/avue-plugin-ueditor/raw/master/packages/demo/demo.png"> </p>
Latest version: 0.1.7

## avue 富文本编辑器
<p align="center">
  <img width="600" src="https://gitee.com/smallweigit/avue-plugin-ueditor/raw/master/packages/demo/demo.png">
</p>

## Avue官网
[https://avuejs.com](https://avuejs.com)

## 介绍
- [demo](https://avuejs.com/doc/plugins/ueditor-plugins)
- [npm](https://www.npmjs.com/package/avue-plugin-ueditor)
- [git](https://gitee.com/smallweigit/avue-plugin-ueditor)

## 三方编辑器wangEditor

- [文档](https://www.kancloud.cn/wangfupeng/wangeditor3/332599)
- 组件配置中customConfig属性为wangEditor编辑器的配置

## 使用
```
1.安装
npm install avue-plugin-ueditor --save

2.导入
import AvueUeditor from 'avue-plugin-ueditor'
Vue.use(AvueUeditor);

3.使用(双击图片可改变大小)
...
column:[
  ...
    {
      label:'test',
      prop:'test',
      component: "avueUeditor",
      params:{
        options:{
          //普通图片上传
          action: "https://avuejs.com/upload",
          customConfig: {},//wangEditor编辑的配置
          props: {
            res: "data",
            url:'url'
          },
          //七牛云oss配置
          qiniu: {
            AK: "",
            SK: "",
            scope: "test",
            url: "http://pm7cc17lu.bkt.clouddn.com/",
            deadline: 1
          },
          //阿里云oss配置
          ali: {
            region: "oss-cn-beijing",
            endpoint: "oss-cn-beijing.aliyuncs.com",
            accessKeyId: "",
            accessKeySecret: "",
            bucket: "avue"
          }
        }
      }
    }
  ...
]
或者直接
<avue-ueditor v-model="text" :options="options"></avue-ueditor>

4.图片上传配置————(支持oss,支持ctrl+v粘贴图片)
具体用法参考https://avuex.avue.top/#/doc/form-upload
options: {
  //普通图片上传
  action: "https://avuejs.com/upload",
  customConfig: {},//wangEditor编辑的配置
  props: {
    res: "data",
    url:'url'
  },
  //七牛云oss配置
  qiniu: {
    AK: "",
    SK: "",
    scope: "test",
    url: "http://pm7cc17lu.bkt.clouddn.com/",
    deadline: 1
  },
  //阿里云oss配置
  ali: {
    region: "oss-cn-beijing",
    endpoint: "oss-cn-beijing.aliyuncs.com",
    accessKeyId: "",
    accessKeySecret: "",
    bucket: "avue"
  }
}
...
```
npm package: @monkey4cloud/vue-bpmn-element
Description: ``` 1、调整设计器UI布局，基于vue-elementui美化属性面板 2、支持设置任务变量、表达式、分支条件等，满足90%以上的业务需求 3、支持flowable和activiti ``` ## 组件常用方法 1、配置支持flowable(activiti) ```vue <vue-bpmn product="flowable"></vue-bpmn> ``` 2、组件还在完善中，如果有需要扩展需求，可以参考以下三个事件： ```vue // 监听选择事件，改变属性栏表单的显示与隐藏 this.mo
Latest version: 1.0.1

# bpmn.js流程设计器组件
```
1、调整设计器UI布局，基于vue-elementui美化属性面板
2、支持设置任务变量、表达式、分支条件等，满足90%以上的业务需求
3、支持flowable和activiti
```
## 组件常用方法
1、配置支持flowable(activiti)
```vue
<vue-bpmn product="flowable"></vue-bpmn>
```
2、组件还在完善中，如果有需要扩展需求，可以参考以下三个事件：
```vue
// 监听选择事件，改变属性栏表单的显示与隐藏
this.modeler.on("selection.changed", e => {
  // TODO
})
// 监听内容变化事件，改变属性栏的值
this.modeler.on("element.changed", e => {
  // TODO
})
// 监听点击事件
this.modeler.on("element.click", e => {
  // TODO
})
```
## 安装运行
```
yarn install
yarn serve
yarn build
```
## 调整后的截图
![UI布局](http://47.108.140.13/images/pic11.jpg?raw=true)
---
![UI布局](http://47.108.140.13/images/pic12.jpg?raw=true)
---
![UI布局](http://47.108.140.13/images/pic13.jpg?raw=tru)
---

## 
##### 在线demo: [](http://47.108.140.13/bpmn/)
##### 后端代码，参照：[https://github.com/fengli01/bpmn-spring-boot.git](https://github.com/fengli01/bpmn-spring-boot.git)