浅谈前端可视化编辑器的实现

背景

目的

• 可视化编辑，可以在画布拖拽元素
• 丰富的样式配置
• 将常用业务抽离成组件，并可以配置组件的参数

设计思路

• 编辑器 提供用户管理项目、拖拽元素、配置参数、预览发布等能力
• 组件库 抽离业务逻辑，将其封装成组件库管理维护
• 服务端 存储管理项目，最重要的是将编辑器生产出来的数据进行解析生成页面

技术栈

1. 由于团队里对vue比较熟悉，前端的编辑器和组件库都使用 vue 作为开发框架
2. 服务端使用 egg.js，考虑到 egg 较为成熟，不需要自己再从0搭起。当然，也可以选择其他框架。

设计思路

一、JSON Schema

1. 项目级

{  id: '', // 项目唯一标志  name: '', // 项目名称  label: [], // 项目标签  description: '', // 项目描述  author: '', // 作者  pages: [] // 页面}

2. 页面级

{  id: '', // 页面唯一标志  type: '', // 页面类型  route: '', // 页面路由  title: '', // 页面标题  style: { // 页面根元素的样式    width: '',    height: '',    ......  },  elements: [], // 组件  plugins: [], // 页面插件服务}

3. 组件级

{  id: '', // 组件唯一标志  elementName: '', // 组件名  style: { // 组件通用样式    position: '',    width: '',    height: '',    border: ''  },  props: {}, // 组件属性参数  children: [], // 子组件  ......}

{  id: '_clv_fPQu',  name: 'FAB页',  label: ['fab', '游戏'],  description: 'Feature、Advantage和Benefit，按照这样的顺序来介绍，就是说服性演讲的结构，它达到的效果就是让客户相信你的是最好的',  author: 'lujintao',  pages: [    {      id: '_Tmy_CdpY',      type: 'pc',      route: 'fab',      title: '游戏页',      style: {        width: '750px',        height: '1334px',        position: 'relative',        margin: '0 auto',        padding: '',        overflow: '',        backgroundColor: '',        backgroundImage: '',        backgroundSize: '',        backgroundRepeat: '',        backgroundPosition: ''      },      elements: [        {          id: '_aIv_SesL',          elementName: 'aicc-image',          style: {            position: 'absolute',            width: '100px',            height: '100px',            border: '1px solid #eeeeee'          },          props: {            src: '***/test1.png'          },          children: [],        }      ],      plugins: [        {          name: 'mobile',          state: true        },        {          name: 'weixinShare',          state: true,          data: {            title: '微信分享的标题',            description: '微信分享的文案'，            img: '***/wxshare.png'          }        }      ],    }  ]}

二、组件库

1. 组件

<template>    <video :src="src" :autoplay="autoplay" /></template><script>export default {  name: 'aicc-video',  props: {    src: {      type: String,      default: ''    },    autoplay: {      type: String,      default: ''    }  }}</script>

• 在编辑器里的引入方式

import AICCVideo from '@/components/AICCVideo'

• 在服务端的引入方式，在浏览器环境下，组件是已经被打包好作为script脚本插入。

<script src="https:**/**/aiccvideo.min.js">

2. 组件配置面板

<template>  <div class="props-video">    <input v-model="propsValue.src" />    <input v-model="propsValue.autoplay" />  </div></template><script>export default {  name: 'props-video',  props: {    value: { // 配置面板在编辑器里挂载的时候是通过v-model="props"传入的      type: Object,      default: () => {}    }  },  data() {    propsValue: {}  },  watch: {    value(val) { this.propsValue = val },    // 配置面板更新的时候，子传父    propsValue(val) { this.$emit('input', val) }  }}</script>

三、编辑器

1. 如何维护数据

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

1. 写一个 name 为 editor 的 store

   const state = {  projectData: {}, // 工程项目数据  activePageUUID: '', // 当前正在编辑的页面  activeElementUUID: '', //当前被选中的组件UUID}
   

   // 初始化项目export function initProject({ commit, state }, data) { let projectData = data if (!data) projectData = initProject() // 空项目时生成默认 JSON Data dispatch('setActivePageUUID', projectData.pages[0].uuid)}// 设置当前被选中的页面的UUIDexport function setActivePageUUID({ commit }, uuid) {  state.activePageUUID = uuid}// 设置当前被选中的元素的UUIDexport function setActiveElementUUID({ commit }, uuid) {  state.activeElementUUID = uuid}
   

   // 当前选中页面的 JSON 数据export function activePage(state) {  const idx = state.projectData.pages.findIndex(p => { return state.activePageUUID === p.uuid })  return state.projectData.pages[idx]}// 当前选中组件的 JSON 数据export function activeElement(state) {  const pIdx = state.projectData.pages.findIndex(p => { return state.activePageUUID === p.uuid })  const activePage = state.projectData.pages[pIdx]  const eIdx = activePage.elements.findIndex(e => { return state.activeElementUUID === e.uuid })}
   

• getter.js
• action.js
• state.js: 存储要维护的数据

3. 编辑器里各页面绑定数据，通过 mapGetters 获取当前页面，当前元素，以及项目数据

<template>  <div>    <component :is="activeElement.elementName" v-model="activeElement.props" />  </div></template> <script>import { mapGetters, mapState } from 'vuex'export default {  computed: {    ...mapGetters({      'activeElement': 'editor/activeElement'    }),    ...mapState({      pages: state => state.editor.projectData.pages,      activePageUUID: state => state.editor.activePageUUID,      activeElementUUID: state => state.editor.activeElementUUID,    })  }}</script>

2. 如何实现画布拖拽

• 选中元素，监听 mousedown 事件
• 获取当前按下元素的 offsetTop 和 offsetLeft
• 获取当前按下鼠标的坐标位置（e.clientX, e.cliengY）
• 监听 mousemove 事件，获取鼠标移动的长度，计算出距离
• 元素的新坐标 = 距离 + 按下时元素的 offset 信息

function mousedown(e) {  let newTop = null  let newLeft = null  // 记录按下时当前元素位置  const cTop = e.currentTarget.offsetTop  const cLeft = e.currentTarget.offsetLeft  // 记录按下时当前鼠标位置  const mouseX = e.clientX  const mouseY = e.clientY    const move = mEvent => {    // 只是单纯移动位置，不需要传递事件给后代    mEvent.stopPropagation()    mEvent.preventDefault()    const cX = mEvent.clientX    const cY = mEvent.clientY    // 移动的位置    const distanceX = cX - mouseX    const distanceY = cY - mouseY    // 新坐标    newTop = distanceX + cTop    newLeft = distanceY + cLeft  }  const up = () => {    document.removeEventListener('mousemove', move, true)    document.removeEventListener('mouseup', up, true)  }  document.addEventListener('mousemove', move, true)  document.addEventListener('mouseup', up, true)}

四、服务端渲染

• 拿到页面的 page 信息生成页面的 title/seo 等页面配置信息，根据路由生成对应的 ${name}.html 文件
• 挂载打包好的组件库 <script src="*/*/aiccvideo.cdn.js">
• 由于使用的render函数，不需要编译器，只需要挂载 vue.runtime.js 脚本即可
• 使用模板引擎进行字符串替换，替换的信息有页面信息、render 函数里的组件数组等
• 遍历 elements，用 vue 的 render 函数 createElement('组件名', { props: { ...生产出来的element JSON数据 }})
• 解析 style 的 JSON 数据，生成 选择器{ ${key}: ${value} }的样式表
• 写入文件fs.writeFileSync(文件路径，htmlString)

结语

• 组件库如何打包
• 项目的管理维护，怎么使用 lerna 管理项目
• 如何实现拖拽元素实时改变元素大小
• 如何保证提交数据的格式符合要求
• 如何实现插件化服务，如微信分享等