/* global getTop */ module.exports = { style: `/* #ifndef H5 || MP-ALIPAY || APP-PLUS */ ._address, ._article, ._aside, ._body, ._caption, ._center, ._cite, ._footer, ._header, ._html, ._nav, ._pre, ._section { display: block; } /* #endif */ ._video { width: 300px; height: 225px; display: inline-block; background-color: black; }`, methods: { /** * @description 开始编辑文本 * @param {Event} e */ editStart (e) { if (this.opts[5]) { const i = e.currentTarget.dataset.i if (!this.ctrl['e' + i]) { // 显示虚线框 this.$set(this.ctrl, 'e' + i, 1) setTimeout(() => { this.root._mask.push(() => this.$set(this.ctrl, 'e' + i, 0)) }, 50) this.root._edit = this this.i = i this.cursor = this.childs[i].text.length } else { this.root._mask.pop() this.root._maskTap() // 将 text 转为 textarea this.$set(this.ctrl, 'e' + i, 2) // 延时对焦,避免高度错误 setTimeout(() => { this.$set(this.ctrl, 'e' + i, 3) }, 50) } } }, /** * @description 输入文本 * @param {Event} e */ editInput (e) { const i = e.target.dataset.i // 替换连续空格 const value = e.detail.value.replace(/ {2,}/, $ => { let res = '\xa0' for (let i = 1; i < $.length; i++) { res += '\xa0' } return res }) this.root._editVal(`${this.opts[7]}.${i}.text`, this.childs[i].text, value) // 记录编辑历史 this.cursor = e.detail.cursor }, /** * @description 完成编辑文本 * @param {Event} e */ editEnd (e) { const i = e.target.dataset.i this.$set(this.ctrl, 'e' + i, 0) // 更新到视图 this.root._setData(`${this.opts[7]}.${i}.text`, e.detail.value.replace(/ {2}/g, '\xa0 ')) if (e.detail.cursor !== undefined) { this.cursor = e.detail.cursor } }, /** * @description 插入一个标签 * @param {Object} node 要插入的标签 */ insert (node) { setTimeout(() => { const childs = this.childs.slice(0) if (!childs[this.i]) { childs.push(node) } else if (childs[this.i].text) { // 在文本中插入 const text = childs[this.i].text if (node.type === 'text') { if (this.cursor) { childs[this.i].text = text.substring(0, this.cursor) + node.text + text.substring(this.cursor) } else { childs[this.i].text += node.text } } else { const list = [] if (this.cursor) { list.push({ type: 'text', text: text.substring(0, this.cursor) }) } list.push(node) if (this.cursor < text.length) { list.push({ type: 'text', text: text.substring(this.cursor) }) } childs.splice(this.i, 1, ...list) } } else { childs.splice(parseInt(this.i) + 1, 0, node) } this.root._editVal(this.opts[7], this.childs, childs, true) this.i = parseInt(this.i) + 1 }, 200) }, /** * @description 移除第 i 个标签 * @param {Number} i */ remove (i) { const arr = this.childs.slice(0) const delEle = arr.splice(i, 1)[0] if (delEle.name === 'img' || delEle.name === 'video' || delEle.name === 'audio') { let src = delEle.attrs.src if (delEle.src) { src = delEle.src.length === 1 ? delEle.src[0] : delEle.src } this.root.$emit('remove', { type: delEle.name, src }) } this.root._edit = undefined this.root._maskTap() this.root._editVal(this.opts[7], this.childs, arr, true) }, /** * @description 标签被点击 * @param {Event} e */ nodeTap (e) { if (this.opts[5]) { if (this.root._lock) return this.root._lock = true setTimeout(() => { this.root._lock = false }, 50) if (this.ctrl['e' + this.i] === 3) return this.root._maskTap() this.root._edit = this let start = this.opts[7].lastIndexOf('children.') if (start !== -1) { start += 9 } else { start = 6 } const i = parseInt(this.opts[7].substring(start, this.opts[7].lastIndexOf('.children'))) let parent = this.$parent while (parent && parent.$options.name !== 'node') { parent = parent.$parent } if (!parent || this.opts[7].length - parent.opts[7].length > 15) return // 显示实线框 this.$set(this.ctrl, 'root', 1) this.root._mask.push(() => this.$set(this.ctrl, 'root', 0)) if (this.childs.length === 1 && this.childs[0].type === 'text' && !this.ctrl.e0) { this.$set(this.ctrl, 'e0', 1) this.root._mask.push(() => this.$set(this.ctrl, 'e0', 0)) this.i = 0 this.cursor = this.childs[0].text.length } const items = this.root._getItem(parent.childs[i], i !== 0, i !== parent.childs.length - 1) this.root._tooltip({ top: getTop(e), items, success: tapIndex => { if (items[tapIndex] === '大小') { // 改变字体大小 const style = parent.childs[i].attrs.style || '' let value = style.match(/;font-size:([0-9]+)px/) if (value) { value = parseInt(value[1]) } else { value = 16 } this.root._slider({ min: 10, max: 30, value, top: getTop(e), changing: val => { if (Math.abs(val - value) > 2) { // 字号变换超过 2 时更新到视图 parent.changeStyle('font-size', i, val + 'px', value + 'px') value = e.detail.value } }, change: val => { if (val !== value) { parent.changeStyle('font-size', i, val + 'px', value + 'px') } this.root._editVal(`${parent.opts[7]}.${i}.attrs.style`, style, parent.childs[i].attrs.style) } }) } else if (items[tapIndex] === '颜色') { // 改变文字颜色 const items = this.root._getItem('color') this.root._color({ top: getTop(e), items, success: tapIndex => { const style = parent.childs[i].attrs.style || '' const value = style.match(/;color:([^;]+)/) parent.changeStyle('color', i, items[tapIndex], value ? value[1] : undefined) this.root._editVal(`${parent.opts[7]}.${i}.attrs.style`, style, parent.childs[i].attrs.style) } }) } else if (items[tapIndex] === '上移' || items[tapIndex] === '下移') { const arr = parent.childs.slice(0) const item = arr[i] if (items[tapIndex] === '上移') { arr[i] = arr[i - 1] arr[i - 1] = item } else { arr[i] = arr[i + 1] arr[i + 1] = item } this.root._editVal(parent.opts[7], parent.childs, arr, true) } else if (items[tapIndex] === '删除') { parent.remove(i) } else { const style = parent.childs[i].attrs.style || '' let newStyle = '' const item = items[tapIndex] let name let value if (item === '斜体') { name = 'font-style' value = 'italic' } else if (item === '粗体') { name = 'font-weight' value = 'bold' } else if (item === '下划线') { name = 'text-decoration' value = 'underline' } else if (item === '居中') { name = 'text-align' value = 'center' } else if (item === '缩进') { name = 'text-indent' value = '2em' } if (style.includes(name + ':')) { // 已有则取消 newStyle = style.replace(new RegExp(name + ':[^;]+'), '') } else { // 没有则添加 newStyle = style + ';' + name + ':' + value } this.root._editVal(`${parent.opts[7]}.${i}.attrs.style`, style, newStyle, true) } } }) } }, /** * @description 音视频被点击 * @param {Event} e */ mediaTap (e) { if (this.opts[5]) { const i = e.target.dataset.i const node = this.childs[i] const items = this.root._getItem(node) this.root._maskTap() this.root._edit = this this.i = i this.root._tooltip({ top: e.target.offsetTop - 30, items, success: tapIndex => { switch (items[tapIndex]) { case '封面': // 设置封面 this.root.getSrc('img', node.attrs.poster || '').then(url => { this.root._editVal(`${this.opts[7]}.${i}.attrs.poster`, node.attrs.poster, url instanceof Array ? url[0] : url, true) }).catch(() => { }) break case '删除': this.remove(i) break case '循环': case '不循环': // 切换循环播放 this.root._setData(`${this.opts[7]}.${i}.attrs.loop`, !node.attrs.loop) uni.showToast({ title: '成功' }) break case '自动播放': case '不自动播放': // 切换自动播放播放 this.root._setData(`${this.opts[7]}.${i}.attrs.autoplay`, !node.attrs.autoplay) uni.showToast({ title: '成功' }) break } } }) // 避免上层出现点击态 this.root._lock = true setTimeout(() => { this.root._lock = false }, 50) } }, /** * 改变样式 * @param {String} name 属性名 * @param {Number} i 第几个标签 * @param {String} value 新值 * @param {String} oldVal 旧值 */ changeStyle (name, i, value, oldVal) { let style = this.childs[i].attrs.style || '' if (style.includes(';' + name + ':' + oldVal)) { // style 中已经有 style = style.replace(';' + name + ':' + oldVal, ';' + name + ':' + value) } else { // 没有则新增 style += ';' + name + ':' + value } this.root._setData(`${this.opts[7]}.${i}.attrs.style`, style) } }, handler (file) { if (file.isBuffer()) { let content = file.contents.toString() if (file.path.includes('mp-html.vue')) { // 传递 editable 属性和路径 content = content.replace(/opts\s*=\s*"\[([^\]]+)\]"/, 'opts="[$1,editable,placeholder,\'nodes\']"') .replace(/\s*<\/template>/, ` {{item}} `) // 添加 data .replace(/data\s*\(\)\s*{\s*return\s*{/, `data() { return { tooltip: null, slider: null, color: null,`) // 添加 editable 属性 .replace(/props\s*:\s*{/, `props: { editable: Boolean, placeholder: String,`) // 添加 watch .replace(/watch\s*:\s*{/, `watch: { editable(val) { this.setContent(val ? this.content : this.getContent()) if (!val) this._maskTap() },`) .replace(/if\s*\(this.content/, 'if ((this.content || this.editable)') // 处理各类弹窗的事件 .replace(/methods\s*:\s*{/, `methods: { _containTap() { if (!this._lock && !this.slider && !this.color) { this._edit = undefined this._maskTap() } }, _tooltipTap(e) { this._tooltipcb(e.currentTarget.dataset.i) this.$set(this, 'tooltip', null) }, _sliderChanging(e) { this._slideringcb(e.detail.value) }, _sliderChange(e) { this._slidercb(e.detail.value) }, _colorTap(e) { this._colorcb(e.currentTarget.dataset.i) this.$set(this, 'color', null) },`) // 工具弹窗的样式 .replace('', ` /* 提示条 */ ._tooltip_contain { position: absolute; right: 20px; left: 20px; text-align: center; } ._tooltip { box-sizing: border-box; display: inline-block; width: auto; max-width: 100%; height: 30px; padding: 0 3px; overflow: scroll; font-size: 14px; line-height: 30px; white-space: nowrap; } ._tooltip_item { display: inline-block; width: auto; padding: 0 2vw; line-height: 30px; background-color: black; color: white; } ._color_item { display: inline-block; width: 18px; height: 18px; margin: 5px 2vw; border:1px solid #dfe2e5; border-radius: 50%; } /* 图片宽度滚动条 */ ._slider { position: absolute; left: 20px; width: 220px; } ._tooltip, ._slider { background-color: black; border-radius: 3px; opacity: 0.75; } `) } else if (file.path.includes('parser.js')) { // 不做 expose 处理 content = content.replace(/parser.prototype.expose\s*=\s*function\s*\(\)\s*{/, `parser.prototype.expose = function () { if (this.options.editable) return`) .replace(/popNode\s*=\s*function\s*\(\)\s*{/, 'popNode = function () {\n const editable = this.options.editable') // 不转换标签名 .replace(/if\s*\(config.blockTags\[node.name\]\)\s*{[\s\S]+?}/, `if (config.blockTags[node.name]) { if (!editable) { node.name = 'div' } }`) // 转换表格和列表 .replace(/else\s*if\s*\(node.c\)/, 'else if (!editable && node.c )') .replace(/node.c(\)|\s*&&|\s*\n)/g, '(node.c || editable)$1') .replace(/while\s*\(map\[row\s*\+\s*'.'\s*\+\s*col\]\)\s*{[\s\S]+?}/, `while (map[row + '.' + col]) { col++ } if (editable) { td.r = row }`) .replace(/let\s+str\s*=\s*'