html5编辑器哪个好用？

meta2d.emit('自定义事件',data)

const pen = {
  name: "rectangle",
  text: "矩形",
  x: 100,
  y: 100,
  width: 100,
  height: 100,
  events: [
    {
      name: "click",
      action: EventAction.Link, // 执行动作
      where: { type:'comparison',  key: "text", comparison: "==", value: "矩形" }, // 触发条件
      value: "2d.le5le.com",
    },
  ],
};

<script setup>
import {computed, onMounted, reactive, ref} from "vue";
import {eventType, eventBehavior} from "../../data/defaultsConfig.js";

let activePen = reactive({})
let event = reactive({
  name:"",
  action:"",
  value:""
})
let otherParams = []
let depList = computed(()=>{
  let _b =  b.find(i=>i.behavior===event.action)
  otherParams = _b?.depend.map(i=>i.params) || []
  return _b
})
let b = reactive(eventBehavior)
onMounted(()=>{
  meta2d.on('active',(pen)=>{
    if(pen.length === 1){
      activePen = pen[0]
      if(!activePen.events){
        activePen.events = []
      }else {
        // 有事件？
        const actEvent = activePen.events[0]
        if(actEvent){
          event.name = actEvent.name
          event.action = actEvent.action
          otherParams.forEach(i=>event[i]=actEvent[i])
        }else {
          event.name = ""
          event.action = ""
          event.value = ""
        }
      }
    }else {
      activePen = undefined
    }
  })
})
function removeEvent() {
  activePen.events = []
  event.name = ""
  event.action = ""
  event.value = ""

}
function confirmEvent() {
  let otherProps = depList.value.depend?.map(i=>{
    let p = {}
    p[i.bindProp] = i.bindData
    return p
  }
  ) || []
  const e = {
    name:event.name,
    action:event.action,
  }
  Object.assign(e,...otherProps)

  activePen.events = [e]
}
</script>

<template>
  <div class="event">
      <el-form @submit="(e)=>e.preventDefault()">
        <el-form-item label="事件类型" >
          <el-select v-model="event.name" placeholder="选择事件类型" >
          <el-option
              v-for="e in eventType"
              :key="e.event"
              :label="e.name"
              :value="e.event"
          >
          </el-option>
        </el-select>
        </el-form-item>

        <!--        行为类型-->
        <el-form-item label="行为类型">
          <el-select  v-model="event.action" placeholder="选择行为类型">
            <el-option
                v-for="i in eventBehavior"
                :key="i.behavior"
                :label="i.name"
                :value="i.behavior"
            >
            </el-option>
          </el-select>
        </el-form-item>

<!--        事件类型依赖表单-->
        <el-form-item :label="dep.name" v-for="dep in depList?.depend">
          <el-input v-model="dep.bindData" :placeholder="dep.option?.placeholder || '请输入'" v-if="dep.type==='input'" @[dep.event]="dep.func" :type="dep.option?.type||'text'"/>
          <!--          选择框-->
          <el-select v-model="dep.bindData" :placeholder="dep.option.placeholder" v-else-if="dep.type==='select'">
            <el-option
                v-for="item in dep.option.list"
                :key="item.value"
                :label="item.name"
                :value="item.value"
                :disabled="item.disabled"
            >
            </el-option>
          </el-select>
        </el-form-item>



        <div class="event_button">
          <el-button @click="confirmEvent" type="primary" style="width: 100%;margin-right: 14px">确认事件</el-button>
          <el-button @click="removeEvent" type="danger" style="width: 100%;margin-right: 14px">清除事件</el-button>

        </div>
      </el-form>
  </div>
</template>

<style scoped>
.event_button{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.event {
  margin: 10px;
}
</style>

// defaultsConfig.js
export const eventType = [
  {
      name: "鼠标移入",
      event: "enter"
  },
  {
      name: "鼠标移出",
      event: "leave"
  },
  {
      name: "选中",
      event: "active"
  },
  {
      name: "取消选中",
      event: "inactive"
  },
  {
      name:"单击",
      event:"click"
  },
  {
      name:"双击",
      event: "dbclick"
  }
]

// defaultsConfig.js
export const eventBehavior = [
  {
      name: "打开链接",
      behavior: EventAction.Link,
      depend:[
          {
              name:"链接地址",
              type:"input",
              bindProp:"value",
              option:{
                  placeholder:"URL"
              },
              bindData:""
          },
          {
              name:"打开方式",
              type:"select",
              bindProp:"params",
              option:{
                  list:[
                      {
                          name:"新窗口打开",
                          value:"_blank"
                      },{
                          name:"覆盖当前页面",
                          value:"self"
                      }
                  ]
              },
              bindData:""
          }
      ]
  },
  {
      name:"执行动画",
      behavior: EventAction.StartAnimate,
      depend:[
          {
              name:"目标id/tag",
              type:"input",
              bindProp:"value",
              option:{
                  placeholder:"id/tag"
              },
              bindData:""
          },
      ]
  },
  {
      name:"暂停动画",
      behavior: EventAction.PauseAnimate,
      depend:[
          {
              name:"目标id/tag",
              type:"input",
              bindProp:"value",
              option:{
                  placeholder:"id/tag"
              },
              bindData:""
          },
      ]
  },
  {
      name:"停止动画",
      behavior: EventAction.StopAnimate,
      depend:[
          {
              name:"目标id/tag",
              type:"input",
              bindProp:"value",
              option:{
                  placeholder:"id/tag"
              },
              bindData:""
          },
      ]
  },
  {
      name:"播放视频",
      behavior: EventAction.StartVideo,
      depend:[
          {
              name:"目标id/tag",
              type:"input",
              bindProp:"value",
              option:{
                  placeholder:"id/tag"
              },
              bindData:""
          },
      ]
  },
  {
      name:"暂停视频",
      behavior: EventAction.PauseVideo,
      depend:[
          {
              name:"目标id/tag",
              type:"input",
              bindProp:"value",
              option:{
                  placeholder:"id/tag"
              },
              bindData:""
          },
      ]
  },
  {
      name: "停止视频",
      behavior: EventAction.StopVideo,
      depend:[
          {
              name:"目标id/tag",
              type:"input",
              bindProp:"value",
              option:{
                  placeholder:"id/tag"
              },
              bindData:""
          },
      ]
  }
]

function confirmEvent() {
  let otherProps = depList.value.depend?.map(i=>{
    let p = {}
    p[i.bindProp] = i.bindData
    return p
  }
  ) || []  // 是否有其他附加属性
  const e = {
    name:event.name,
    action:event.action,
  }
  Object.assign(e,...otherProps) // 注册属性

  activePen.events = [e]
}

meta2d.on('active',(pen)=>{
  if(pen.length === 1){ // 长度唯一 说明选中了一个
    activePen = pen[0]   // 赋值
    if(!activePen.events){ 
      activePen.events = []  // 若没有events属性，则初始化一个
    }else { // 若有事件属性则赋值
      const actEvent = activePen.events[0] // 只处理第一个事件
      if(actEvent){ // 赋值
        event.name = actEvent.name
        event.action = actEvent.action
        otherParams.forEach(i=>event[i]=actEvent[i])
      }else {  // 否者初始化值
        event.name = ""
        event.action = ""
        event.value = ""
      }
    }
  }else {
    activePen = undefined
  }
})

{
  "name": "meta2d_vue",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "postinstall": "node ./src/test.js",
  "dependencies": {
    "@meta2d/activity-diagram": "^1.0.0",
    "@meta2d/chart-diagram": "^1.0.3",
    "@meta2d/class-diagram": "^1.0.1",
    "@meta2d/core": "^1.0.20",
    "@meta2d/flow-diagram": "^1.0.0",
    "@meta2d/form-diagram": "^1.0.4",
    "@meta2d/sequence-diagram": "^1.0.0",
    "@meta2d/svg": "^1.0.2",
    "axios": "^1.4.0",
    "element-plus": "^2.3.7",
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "vite": "^4.4.0"
  }
}

npm install @meta2d/core --save

npm install @meta2d/svg  --save

npm install element-plus --save