/* 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*'