This issue was generated by todo based on a TODO comment in 8b43fd9. It's been assigned to @ly525 because they committed the code.

编辑器模块

作品列表

基础数据统计（PV、UV 统计未完成）

表单统计

模板

This issue was generated by todo based on a TODO comment in eecd655. It's been assigned to @ly525 because they committed the code.

see more https://github.com/ly525/luban-h5/releases/tag/v1.4.0

#!zh

1. 获得编辑器的配置
2. 使用 Plugin的 Props 的 defaultValue 初始化 Element
3. 当点击画布元素的时候，设置其为 editingElement
4. 在右边属性编辑器部分，遍历所有可以编辑的的属性
5. 渲染属性对应的编辑器

$createElement(prop.editorType,  // 比如 el-input、el-input-number
  {
     props: 编辑器的一些props, // 比如编辑器的一些配置，比如el-range 需要max、min，
     value: 属性的对应初始值 // 一般取自 element  对应的 props 的值,
     on: { input: handler } // v-model 处理用户在编辑器改变了属性值
  }
}

6. 最重要就是在v-model 对应的 @input 事件中，改变了对应prop值之后，重新渲染canvas即可，不过这一步会自动执行，因为 renderCanvas 会根据 elements 的变化自动更新画布

#!en

1. getEditorConfigOfPlugin({name}}
2. new Element({name, editorConfig})
3. init Element with editorConfig(props default value)
4. set editing element when clicking some element
5. loop editable props of the editingElement
6. render the prop editor with {propEditorType, propEditorProps, propValue, @input} = plugin.editorConfig.propsConfig
7. when the value of prop is changed by editor, the canvas will be updated again.

置顶、置底

This issue was generated by todo based on a TODO comment in c305946. It's been assigned to @ly525 because they committed the code.

This issue was generated by todo based on a TODO comment in 9e8e89f. It's been assigned to @ly525 because they committed the code.

commit dcf9c06

实现思路：

点击插件 -> 添加到画布上 -> 点击画布上的插件 -> 右侧编辑面板显示可以编辑的属性、修改属性值 -> 更新画布

• 1. 通过 Vue.extends 集成核心编辑器
• 2. 通过 npm install 的形式集成各种插件，如按钮、图片等 #100
• 3. 点击插件列表中某个插件的时候，
  • 1. 获取该插件的可以配置的 props，设置默认值
  • 2. 将其映射到 Props Editor Panel，不同的prop 调用不同的编辑器即可
  • 3. 执行 currentPage.elements.push(new Element({ pluginName} = pluginMeta, defaultProps))
• 6. vueInstance.render('div', {}, currentPage.elements)，将该插件绘制到 中间画布上

This issue was generated by todo based on a TODO comment in 25dbd43. It's been assigned to @ly525 because they committed the code.

提供

1. 插件快速生成脚手架
2. 插件可视化生成工具，能够及时预览集成在鲁班H5中的效果

#!zh: 使用相对路径的图片 替换原来的 网络图片地址。防止因为网络延迟打开速度过慢，用户以为点击图片插件无效
#!en: using local image replace origin online image. Sometimes, user don't see the picture after they clicked the picture plugin, just because the network is very slow and it takes too much time to load image from network

This issue was generated by todo based on a TODO comment in 25dbd43. It's been assigned to @ly525 because they committed the code.

https://github.com/ly525/luban-h5-open/blob/d04cf043b7558729a15123456fbc2a0025f08c3e/front-end/h5/src/views/Editor.vue#L122-L125

This issue was generated by todo based on a TODO comment in d04cf04. It's been assigned to @ly525 because they committed the code.

• 七牛

• 阿里云

• 腾讯云

• AWS

主要目的是防止 plugin 的props 和 new Element() 的 属性冲突，造成this上的值被覆盖

将 插件的 EditorConfig.components 添加到 this.$options.components 上即可

需要在 v-for 的时候，取值，绘制对应的icon

错误写法

如下的写法会报错，因为此时的 ${item.value} 取的是在 Editor.vue 中声明的变量，而非v-for="(item, index) in textAlignTabs"中的 item

     template: `
          <div class="wrap">
            <el-radio-group v-model="value_" size="small">
              <el-tooltip effect="dark" :content="item.label" placement="top" :key="index" v-for="(item, index) in textAlignTabs">
                <el-radio-button :label="item.value">
                  <i :class="['fa', 'fa-align-${item.value}']" aria-hidden="true"></i>
                </el-radio-button>
              </el-tooltip>
            </el-radio-group>
          </div>
  `,

正确写法

template: `
          <div class="wrap">
            <el-radio-group v-model="value_" size="small">
              <el-tooltip effect="dark" :content="item.label" placement="top" :key="index" v-for="(item, index) in textAlignTabs">
                <el-radio-button :label="item.value">
                  <i :class="['fa', 'fa-align-'+item.value]" aria-hidden="true"></i>
                </el-radio-button>
              </el-tooltip>
            </el-radio-group>
          </div>
`,

This issue was generated by todo based on a TODO comment in eecd655. It's been assigned to @ly525 because they committed the code.

https://github.com/ly525/luban-h5-open/blob/d04cf043b7558729a15123456fbc2a0025f08c3e/front-end/h5/src/views/Editor.vue#L288-L293

This issue was generated by todo based on a TODO comment in d04cf04. It's been assigned to @ly525 because they committed the code.

85b6cf6