build.js 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744
  1. /* global getTop */
  2. module.exports = {
  3. style: `/* #ifndef H5 || MP-ALIPAY || APP-PLUS */
  4. ._address,
  5. ._article,
  6. ._aside,
  7. ._body,
  8. ._caption,
  9. ._center,
  10. ._cite,
  11. ._footer,
  12. ._header,
  13. ._html,
  14. ._nav,
  15. ._pre,
  16. ._section {
  17. display: block;
  18. }
  19. /* #endif */
  20. ._video {
  21. width: 300px;
  22. height: 225px;
  23. display: inline-block;
  24. background-color: black;
  25. }`,
  26. methods: {
  27. /**
  28. * @description 开始编辑文本
  29. * @param {Event} e
  30. */
  31. editStart (e) {
  32. if (this.opts[5]) {
  33. const i = e.currentTarget.dataset.i
  34. if (!this.ctrl['e' + i] && this.opts[5] !== 'simple') {
  35. // 显示虚线框
  36. this.$set(this.ctrl, 'e' + i, 1)
  37. setTimeout(() => {
  38. this.root._mask.push(() => this.$set(this.ctrl, 'e' + i, 0))
  39. }, 50)
  40. this.root._edit = this
  41. this.i = i
  42. this.cursor = this.childs[i].text.length
  43. } else {
  44. if (this.opts[5] === 'simple') {
  45. this.root._edit = this
  46. this.i = i
  47. this.cursor = this.childs[i].text.length
  48. }
  49. this.root._mask.pop()
  50. this.root._maskTap()
  51. // 将 text 转为 textarea
  52. this.$set(this.ctrl, 'e' + i, 2)
  53. // 延时对焦,避免高度错误
  54. setTimeout(() => {
  55. this.$set(this.ctrl, 'e' + i, 3)
  56. }, 50)
  57. }
  58. }
  59. },
  60. /**
  61. * @description 输入文本
  62. * @param {Event} e
  63. */
  64. editInput (e) {
  65. const i = e.target.dataset.i
  66. // 替换连续空格
  67. const value = e.detail.value.replace(/ {2,}/, $ => {
  68. let res = '\xa0'
  69. for (let i = 1; i < $.length; i++) {
  70. res += '\xa0'
  71. }
  72. return res
  73. })
  74. this.root._editVal(`${this.opts[7]}.${i}.text`, this.childs[i].text, value) // 记录编辑历史
  75. this.cursor = e.detail.cursor
  76. },
  77. /**
  78. * @description 完成编辑文本
  79. * @param {Event} e
  80. */
  81. editEnd (e) {
  82. const i = e.target.dataset.i
  83. this.$set(this.ctrl, 'e' + i, 0)
  84. // 更新到视图
  85. this.root._setData(`${this.opts[7]}.${i}.text`, e.detail.value.replace(/ {2}/g, '\xa0 '))
  86. if (e.detail.cursor !== undefined) {
  87. this.cursor = e.detail.cursor
  88. }
  89. },
  90. /**
  91. * @description 插入一个标签
  92. * @param {Object} node 要插入的标签
  93. */
  94. insert (node) {
  95. setTimeout(() => {
  96. const childs = this.childs.slice(0)
  97. if (!childs[this.i]) {
  98. childs.push(node)
  99. } else if (childs[this.i].text) {
  100. // 在文本中插入
  101. const text = childs[this.i].text
  102. if (node.type === 'text') {
  103. if (this.cursor) {
  104. childs[this.i].text = text.substring(0, this.cursor) + node.text + text.substring(this.cursor)
  105. } else {
  106. childs[this.i].text += node.text
  107. }
  108. } else {
  109. const list = []
  110. if (this.cursor) {
  111. list.push({
  112. type: 'text',
  113. text: text.substring(0, this.cursor)
  114. })
  115. }
  116. list.push(node)
  117. if (this.cursor < text.length) {
  118. list.push({
  119. type: 'text',
  120. text: text.substring(this.cursor)
  121. })
  122. }
  123. childs.splice(this.i, 1, ...list)
  124. }
  125. } else {
  126. childs.splice(parseInt(this.i) + 1, 0, node)
  127. }
  128. this.root._editVal(this.opts[7], this.childs, childs, true)
  129. this.i = parseInt(this.i) + 1
  130. }, 200)
  131. },
  132. /**
  133. * @description 移除第 i 个标签
  134. * @param {Number} i
  135. */
  136. remove (i) {
  137. const arr = this.childs.slice(0)
  138. const delEle = arr.splice(i, 1)[0]
  139. if (delEle.name === 'img' || delEle.name === 'video' || delEle.name === 'audio') {
  140. let src = delEle.attrs.src
  141. if (delEle.src) {
  142. src = delEle.src.length === 1 ? delEle.src[0] : delEle.src
  143. }
  144. this.root.$emit('remove', {
  145. type: delEle.name,
  146. src
  147. })
  148. }
  149. this.root._edit = undefined
  150. this.root._maskTap()
  151. this.root._editVal(this.opts[7], this.childs, arr, true)
  152. },
  153. /**
  154. * @description 标签被点击
  155. * @param {Event} e
  156. */
  157. nodeTap (e) {
  158. if (this.opts[5]) {
  159. if (this.root._lock) return
  160. this.root._lock = true
  161. setTimeout(() => {
  162. this.root._lock = false
  163. }, 50)
  164. if (this.ctrl['e' + this.i] === 3) return
  165. this.root._maskTap()
  166. this.root._edit = this
  167. if (this.opts[5] === 'simple') return
  168. let start = this.opts[7].lastIndexOf('children.')
  169. if (start !== -1) {
  170. start += 9
  171. } else {
  172. start = 6
  173. }
  174. const i = parseInt(this.opts[7].substring(start, this.opts[7].lastIndexOf('.children')))
  175. let parent = this.$parent
  176. while (parent && parent.$options.name !== 'node') {
  177. parent = parent.$parent
  178. }
  179. let remove = () => {
  180. parent.remove(i)
  181. }
  182. if (this.opts[7].length - parent.opts[7].length > 15) {
  183. const parts = this.opts[7].split('.')
  184. let childs = parent.childs
  185. const i = parseInt(parts[parent.opts[7].split('.').length])
  186. const oldParent = parent
  187. // 删除整个表格
  188. remove = () => {
  189. oldParent.remove(i)
  190. }
  191. for (let i = parent.opts[7].split('.').length; i < parts.length - 2; i++) {
  192. childs = childs[parts[i]]
  193. }
  194. const that = this
  195. parent = {
  196. childs,
  197. opts: [undefined, undefined, undefined, undefined, undefined, undefined, undefined, parts.slice(0, parts.length - 2).join('.')],
  198. changeStyle (name, i, value, oldVal) {
  199. let style = this.childs[i].attrs.style || ''
  200. if (style.includes(';' + name + ':' + oldVal)) {
  201. style = style.replace(';' + name + ':' + oldVal, ';' + name + ':' + value)
  202. } else {
  203. style += ';' + name + ':' + value
  204. }
  205. that.root._setData(`${this.opts[7]}.${i}.attrs.style`, style)
  206. }
  207. }
  208. }
  209. if (!parent) return
  210. // 显示实线框
  211. this.$set(this.ctrl, 'root', 1)
  212. this.root._mask.push(() => this.$set(this.ctrl, 'root', 0))
  213. if (this.childs.length === 1 && this.childs[0].type === 'text' && !this.ctrl.e0) {
  214. this.$set(this.ctrl, 'e0', 1)
  215. this.root._mask.push(() => this.$set(this.ctrl, 'e0', 0))
  216. this.i = 0
  217. this.cursor = this.childs[0].text.length
  218. }
  219. const items = this.root._getItem(parent.childs[i], i !== 0, i !== parent.childs.length - 1)
  220. this.root._tooltip({
  221. top: getTop(e),
  222. items,
  223. success: tapIndex => {
  224. if (items[tapIndex] === '大小') {
  225. // 改变字体大小
  226. const style = parent.childs[i].attrs.style || ''
  227. let value = style.match(/;font-size:([0-9]+)px/)
  228. if (value) {
  229. value = parseInt(value[1])
  230. } else {
  231. value = 16
  232. }
  233. this.root._slider({
  234. min: 10,
  235. max: 30,
  236. value,
  237. top: getTop(e),
  238. changing: val => {
  239. if (Math.abs(val - value) > 2) {
  240. // 字号变换超过 2 时更新到视图
  241. parent.changeStyle('font-size', i, val + 'px', value + 'px')
  242. value = e.detail.value
  243. }
  244. },
  245. change: val => {
  246. if (val !== value) {
  247. parent.changeStyle('font-size', i, val + 'px', value + 'px')
  248. }
  249. this.root._editVal(`${parent.opts[7]}.${i}.attrs.style`, style, parent.childs[i].attrs.style)
  250. }
  251. })
  252. } else if (items[tapIndex] === '颜色') {
  253. // 改变文字颜色
  254. const items = this.root._getItem('color')
  255. this.root._color({
  256. top: getTop(e),
  257. items,
  258. success: tapIndex => {
  259. const style = parent.childs[i].attrs.style || ''
  260. const value = style.match(/;color:([^;]+)/)
  261. parent.changeStyle('color', i, items[tapIndex], value ? value[1] : undefined)
  262. this.root._editVal(`${parent.opts[7]}.${i}.attrs.style`, style, parent.childs[i].attrs.style)
  263. }
  264. })
  265. } else if (items[tapIndex] === '上移' || items[tapIndex] === '下移') {
  266. const arr = parent.childs.slice(0)
  267. const item = arr[i]
  268. if (items[tapIndex] === '上移') {
  269. arr[i] = arr[i - 1]
  270. arr[i - 1] = item
  271. } else {
  272. arr[i] = arr[i + 1]
  273. arr[i + 1] = item
  274. }
  275. this.root._editVal(parent.opts[7], parent.childs, arr, true)
  276. } else if (items[tapIndex] === '删除') {
  277. remove()
  278. } else {
  279. const style = parent.childs[i].attrs.style || ''
  280. let newStyle = ''
  281. const item = items[tapIndex]
  282. let name
  283. let value
  284. if (item === '斜体') {
  285. name = 'font-style'
  286. value = 'italic'
  287. } else if (item === '粗体') {
  288. name = 'font-weight'
  289. value = 'bold'
  290. } else if (item === '下划线') {
  291. name = 'text-decoration'
  292. value = 'underline'
  293. } else if (item === '居中') {
  294. name = 'text-align'
  295. value = 'center'
  296. } else if (item === '缩进') {
  297. name = 'text-indent'
  298. value = '2em'
  299. }
  300. if (style.includes(name + ':')) {
  301. // 已有则取消
  302. newStyle = style.replace(new RegExp(name + ':[^;]+'), '')
  303. } else {
  304. // 没有则添加
  305. newStyle = style + ';' + name + ':' + value
  306. }
  307. this.root._editVal(`${parent.opts[7]}.${i}.attrs.style`, style, newStyle, true)
  308. }
  309. }
  310. })
  311. }
  312. },
  313. /**
  314. * @description 音视频被点击
  315. * @param {Event} e
  316. */
  317. mediaTap (e, index) {
  318. if (this.opts[5]) {
  319. const i = e.target.dataset.i || index
  320. const node = this.childs[i]
  321. const items = this.root._getItem(node)
  322. this.root._maskTap()
  323. this.root._edit = this
  324. this.i = i
  325. this.root._tooltip({
  326. top: e.currentTarget.offsetTop - 30,
  327. items,
  328. success: tapIndex => {
  329. switch (items[tapIndex]) {
  330. case '封面':
  331. // 设置封面
  332. this.root.getSrc('img', node.attrs.poster || '').then(url => {
  333. this.root._editVal(`${this.opts[7]}.${i}.attrs.poster`, node.attrs.poster, url instanceof Array ? url[0] : url, true)
  334. }).catch(() => { })
  335. break
  336. case '删除':
  337. this.remove(i)
  338. break
  339. case '循环':
  340. case '不循环':
  341. // 切换循环播放
  342. this.root._setData(`${this.opts[7]}.${i}.attrs.loop`, !node.attrs.loop)
  343. uni.showToast({
  344. title: '成功'
  345. })
  346. break
  347. case '自动播放':
  348. case '不自动播放':
  349. // 切换自动播放播放
  350. this.root._setData(`${this.opts[7]}.${i}.attrs.autoplay`, !node.attrs.autoplay)
  351. uni.showToast({
  352. title: '成功'
  353. })
  354. break
  355. }
  356. }
  357. })
  358. // 避免上层出现点击态
  359. this.root._lock = true
  360. setTimeout(() => {
  361. this.root._lock = false
  362. }, 50)
  363. }
  364. },
  365. /**
  366. * 改变样式
  367. * @param {String} name 属性名
  368. * @param {Number} i 第几个标签
  369. * @param {String} value 新值
  370. * @param {String} oldVal 旧值
  371. */
  372. changeStyle (name, i, value, oldVal) {
  373. let style = this.childs[i].attrs.style || ''
  374. if (style.includes(';' + name + ':' + oldVal)) {
  375. // style 中已经有
  376. style = style.replace(';' + name + ':' + oldVal, ';' + name + ':' + value)
  377. } else {
  378. // 没有则新增
  379. style += ';' + name + ':' + value
  380. }
  381. this.root._setData(`${this.opts[7]}.${i}.attrs.style`, style)
  382. }
  383. },
  384. handler (file) {
  385. if (file.isBuffer()) {
  386. let content = file.contents.toString()
  387. if (file.path.includes('mp-html.vue')) {
  388. // 传递 editable 属性和路径
  389. content = content.replace(/opts\s*=\s*"\[([^\]]+)\]"/, 'opts="[$1,editable,placeholder,\'nodes\']"')
  390. .replace(/<view(.*?):style\s*=\s*"containerStyle"/, '<view$1:style="(editable?\'min-height:200px;\':\'\')+containerStyle" @tap="_containTap"')
  391. // 工具弹窗
  392. .replace(/<\/view>\s*<\/template>/, ` <view v-if="tooltip" class="_tooltip_contain" :style="'top:'+tooltip.top+'px'">
  393. <view class="_tooltip">
  394. <view v-for="(item, index) in tooltip.items" v-bind:key="index" class="_tooltip_item" :data-i="index" @tap="_tooltipTap">{{item}}</view>
  395. </view>
  396. </view>
  397. <view v-if="slider" class="_slider" :style="'top:'+slider.top+'px'">
  398. <slider :value="slider.value" :min="slider.min" :max="slider.max" handle-size="14" block-size="14" show-value activeColor="white" style="padding:3px" @changing="_sliderChanging" @change="_sliderChange" />
  399. </view>
  400. <view v-if="color" class="_tooltip_contain" :style="'top:'+color.top+'px'">
  401. <view class="_tooltip" style="overflow-y: hidden;">
  402. <view v-for="(item, index) in color.items" v-bind:key="index" class="_color_item" :style="'background-color:'+item" :data-i="index" @tap="_colorTap"></view>
  403. </view>
  404. </view>
  405. </view>
  406. </template>`)
  407. // 添加 data
  408. .replace(/data\s*\(\)\s*{\s*return\s*{/, `data() {
  409. return {
  410. tooltip: null,
  411. slider: null,
  412. color: null,`)
  413. // 添加 editable 属性
  414. .replace(/props\s*:\s*{/, `props: {
  415. editable: [Boolean, String],
  416. placeholder: String,`)
  417. // 添加 watch
  418. .replace(/watch\s*:\s*{/, `watch: {
  419. editable(val) {
  420. this.setContent(val ? this.content : this.getContent())
  421. if (!val)
  422. this._maskTap()
  423. },`)
  424. .replace(/if\s*\(this.content/, 'if ((this.content || this.editable)')
  425. // 处理各类弹窗的事件
  426. .replace(/methods\s*:\s*{/, `methods: {
  427. _containTap() {
  428. if (!this._lock && !this.slider && !this.color) {
  429. this._edit = undefined
  430. this._maskTap()
  431. }
  432. },
  433. _tooltipTap(e) {
  434. this._tooltipcb(e.currentTarget.dataset.i)
  435. this.$set(this, 'tooltip', null)
  436. },
  437. _sliderChanging(e) {
  438. this._slideringcb(e.detail.value)
  439. },
  440. _sliderChange(e) {
  441. this._slidercb(e.detail.value)
  442. },
  443. _colorTap(e) {
  444. this._colorcb(e.currentTarget.dataset.i)
  445. this.$set(this, 'color', null)
  446. },`)
  447. // 工具弹窗的样式
  448. .replace('</style>', `
  449. /* 提示条 */
  450. ._tooltip_contain {
  451. position: absolute;
  452. right: 20px;
  453. left: 20px;
  454. text-align: center;
  455. }
  456. ._tooltip {
  457. box-sizing: border-box;
  458. display: inline-block;
  459. width: auto;
  460. max-width: 100%;
  461. height: 30px;
  462. padding: 0 3px;
  463. overflow: scroll;
  464. font-size: 14px;
  465. line-height: 30px;
  466. white-space: nowrap;
  467. }
  468. ._tooltip_item {
  469. display: inline-block;
  470. width: auto;
  471. padding: 0 2vw;
  472. line-height: 30px;
  473. background-color: black;
  474. color: white;
  475. }
  476. ._color_item {
  477. display: inline-block;
  478. width: 18px;
  479. height: 18px;
  480. margin: 5px 2vw;
  481. border:1px solid #dfe2e5;
  482. border-radius: 50%;
  483. }
  484. /* 图片宽度滚动条 */
  485. ._slider {
  486. position: absolute;
  487. left: 20px;
  488. width: 220px;
  489. }
  490. ._tooltip,
  491. ._slider {
  492. background-color: black;
  493. border-radius: 3px;
  494. opacity: 0.75;
  495. }
  496. </style>`)
  497. } else if (file.path.includes('parser.js')) {
  498. // 不做 expose 处理
  499. content = content.replace(/parser.prototype.expose\s*=\s*function\s*\(\)\s*{/, `parser.prototype.expose = function () {
  500. if (this.options.editable) return`)
  501. .replace(/popNode\s*=\s*function\s*\(\)\s*{/, 'popNode = function () {\n const editable = this.options.editable')
  502. // 不转换标签名
  503. .replace(/if\s*\(config.blockTags\[node.name\]\)\s*{[\s\S]+?}/, `if (config.blockTags[node.name]) {
  504. if (!editable) {
  505. node.name = 'div'
  506. }
  507. }`)
  508. // 转换表格和列表
  509. .replace(/else\s*if\s*\(node.c\)/, 'else if (!editable && node.c )')
  510. .replace(/node.c(\)|\s*&&|\s*\n)/g, '(node.c || editable)$1')
  511. .replace(/while\s*\(map\[row\s*\+\s*'.'\s*\+\s*col\]\)\s*{[\s\S]+?}/, `while (map[row + '.' + col]) {
  512. col++
  513. }
  514. if (editable) {
  515. td.r = row
  516. }`)
  517. .replace(/let\s+str\s*=\s*'<video style="width:100%;height:100%"'/, `let str = '<video style="width:100%;height:100%"'
  518. if (editable) {
  519. attrs.controls = ''
  520. }`)
  521. } else if (file.path.includes('node.vue')) {
  522. content =
  523. // 传递 opts
  524. content.replace(/:childs\s*=\s*"tbody.children"\s*:opts="opts"/, ':childs="tbody.children" :opts="[opts[0],opts[1],opts[2],opts[3],opts[4],opts[5],opts[6],opts[7]+\'.\'+i+\'.children.\'+x+\'.children\']"')
  525. .replace(/:childs\s*=\s*"n2.children"\s*:opts="opts"/, ':childs="n2.children" :opts="[opts[0],opts[1],opts[2],opts[3],opts[4],opts[5],opts[6],opts[7]+\'.\'+i+\'.children.\'+j+\'.children\']"')
  526. .replace(/:childs\s*=\s*"tr.children"\s*:opts="opts"/, ':childs="tr.children" :opts="[opts[0],opts[1],opts[2],opts[3],opts[4],opts[5],opts[6],opts[7]+\'.\'+i+\'.children.\'+x+\'.children.\'+y+\'.children\']"')
  527. .replace(/:childs\s*=\s*"td.children"\s*:opts="opts"/, ':childs="td.children" :opts="[opts[0],opts[1],opts[2],opts[3],opts[4],opts[5],opts[6],opts[7]+\'.\'+i+\'.children.\'+x+\'.children.\'+y+\'.children.\'+z+\'.children\']"')
  528. .replace(/opts\s*=\s*"opts"/g, 'opts="[opts[0],opts[1],opts[2],opts[3],opts[4],opts[5],opts[6],opts[7]+\'.\'+i+\'.children\']"')
  529. // 不使用 rich-text
  530. .replace(/!n.c/g, '!opts[5]&&!n.c').replace('&&n.c', '&&(n.c||opts[5])')
  531. // 修改普通标签
  532. .replace(/<view\s+:id(.+?)style="/, '<view @tap="nodeTap" :id$1style="(ctrl.root&&opts[5]!==\'simple\'?\'border:1px solid black;padding:5px;display:block;\':\'\')+')
  533. // 修改文本块
  534. .replace(/<!--\s*文本\s*-->[\s\S]+?<!--\s*链接\s*-->/,
  535. `<!-- 文本 -->
  536. <text v-else-if="n.type==='text'&&!ctrl['e'+i]" :data-i="i" :user-select="opts[4]" :decode="!opts[5]" @tap="editStart">{{n.text}}
  537. <text v-if="!n.text" style="color:gray">{{opts[6]||'请输入'}}</text>
  538. </text>
  539. <text v-else-if="n.type==='text'&&ctrl['e'+i]===1" :data-i="i" style="border:1px dashed black;min-width:50px;width:auto;padding:5px;display:block" @tap.stop="editStart">{{n.text}}
  540. <text v-if="!n.text" style="color:gray">{{opts[6]||'请输入'}}</text>
  541. </text>
  542. <textarea v-else-if="n.type==='text'" :style="opts[5]==='simple'?'':'border:1px dashed black;'+'min-width:50px;width:auto;padding:5px'" auto-height maxlength="-1" :focus="ctrl['e'+i]===3" :value="n.text" :data-i="i" @input="editInput" @blur="editEnd" />
  543. <text v-else-if="n.name==='br'">\\n</text>
  544. <!-- 链接 -->`)
  545. // 修改图片
  546. .replace(/<image(.+?)id="n.attrs.id/, '<image$1id="n.attrs.id||(\'n\'+i)')
  547. .replace('height:1px', "height:'+(ctrl['h'+i]||1)+'px")
  548. .replace(/:style\s*=\s*"\(ctrl\[i\]/g, ':style="(ctrl[\'e\'+i]&&opts[5]!==\'simple\'?\'border:1px dashed black;padding:3px;\':\'\')+(ctrl[i]')
  549. .replace(/show-menu-by-longpress\s*=\s*"(\S+?)"\s*:image-menu-prevent\s*=\s*"(\S+?)"/, 'show-menu-by-longpress="!opts[5]&&$1" :image-menu-prevent="opts[5]||$2"')
  550. // 修改音视频
  551. .replace('v-else-if="n.html"', 'v-else-if="n.html" :data-i="i" @tap="mediaTap"')
  552. .replace('<video', '<video :show-center-play-btn="!opts[5]" @tap="mediaTap"')
  553. .replace('<audio ', '<audio @tap="mediaTap" ')
  554. .replace('<my-audio ', '<my-audio @onClick="mediaTap($event, i)" ')
  555. .replace('card ', 'card @click="mediaTap($event, i)" ')
  556. .replace('<script>',
  557. `<script>
  558. import Parser from '../parser'
  559. function getTop(e) {
  560. let top
  561. // #ifdef H5 && VUE3
  562. top = e.pageY
  563. // #endif
  564. // #ifdef (H5 && VUE2) || APP-PLUS
  565. top = e.touches[0].pageY
  566. // #endif
  567. // #ifdef MP-ALIPAY
  568. top = e.detail.pageY
  569. // #endif
  570. // #ifndef H5 || MP-ALIPAY || APP-PLUS
  571. top = e.detail.y
  572. // #endif
  573. if (top - e.currentTarget.offsetTop < 150 || top < 600) {
  574. top = e.currentTarget.offsetTop
  575. }
  576. if (top < 30) {
  577. top += 70
  578. }
  579. return top - 30
  580. }`)
  581. // 周期处理
  582. .replace(/beforeDestroy\s*\(\)\s*{/, `beforeDestroy () {
  583. if (this.root && this.root._edit === this) {
  584. this.root._edit = undefined
  585. }`)
  586. // 记录图片宽度
  587. .replace(/imgLoad\s*\(e\)\s*{/, `imgLoad(e) {
  588. // #ifdef MP-WEIXIN || MP-QQ
  589. if (this.opts[5])
  590. this.$nextTick(() => {
  591. const id = this.childs[i].attrs.id || ('n' + i)
  592. uni.createSelectorQuery().in(this).select('#' + id).boundingClientRect().exec(res => {
  593. this.$set(this.ctrl, 'h'+i, res[0].height)
  594. })
  595. })
  596. // #endif`)
  597. .replace(/if\s*\(!this.childs\[i\].w\)\s*{[\s\S]+?}/,
  598. `if (!this.childs[i].w) {
  599. this.$set(this.ctrl, i, e.detail.width)
  600. if (this.opts[5]) {
  601. const path = this.opts[7] + '.' + i + '.attrs.'
  602. if (e.detail.width < 150)
  603. this.root._setData(path + 'ignore', 'T')
  604. this.root._setData(path + 'width', e.detail.width.toString())
  605. }
  606. }`)
  607. // 处理图片长按
  608. .replace(/imgLongTap\s*\(\)\s*{/, `imgLongTap() {
  609. if (this.opts[5]) return`)
  610. // 处理图片点击
  611. .replace(/imgTap\s*\(e\)\s*{([\s\S]+?)},\s*\/\*/,
  612. `imgTap (e) {
  613. if (!this.opts[5]) {$1} else {
  614. const i = e.currentTarget.dataset.i
  615. const node = this.childs[i]
  616. const items = this.root._getItem(node)
  617. const parser = new Parser(this.root)
  618. this.root._edit = this
  619. this.i = i
  620. this.root._maskTap()
  621. this.$set(this.ctrl, 'e' + i, 1)
  622. this.root._mask.push(() => this.$set(this.ctrl, 'e' + i, 0))
  623. this.root._tooltip({
  624. top: getTop(e),
  625. items,
  626. success: tapIndex => {
  627. if (items[tapIndex] === '换图') {
  628. // 换图
  629. this.root.getSrc('img', node.attrs.src || '').then(url => {
  630. this.root._editVal(this.opts[7] + '.' + i + '.attrs.src', node.attrs.src, parser.getUrl(url instanceof Array ? url[0] : url), true)
  631. }).catch(() => { })
  632. } else if (items[tapIndex] === '宽度') {
  633. // 更改宽度
  634. const style = node.attrs.style || ''
  635. let value = style.match(/max-width:([0-9]+)%/)
  636. if (value) {
  637. value = parseInt(value[1])
  638. } else {
  639. value = 100
  640. }
  641. this.root._slider({
  642. min: 0,
  643. max: 100,
  644. value,
  645. top: getTop(e),
  646. changing: val => {
  647. // 变化超过 5% 更新时视图
  648. if (Math.abs(val - value) > 5) {
  649. this.changeStyle('max-width', i, val + '%', value + '%')
  650. value = val
  651. }
  652. },
  653. change: val => {
  654. if (val !== value) {
  655. this.changeStyle('max-width', i, val + '%', value + '%')
  656. value = val
  657. }
  658. this.root._editVal(this.opts[7] + '.' + i + '.attrs.style', style, this.childs[i].attrs.style)
  659. }
  660. })
  661. } else if (items[tapIndex] === '超链接') {
  662. // 将图片设置为链接
  663. this.root.getSrc('link', node.a ? node.a.href : '').then(url => {
  664. // 如果有 a 标签则替换 href
  665. if (node.a) {
  666. this.root._editVal(this.opts[7] + '.' + i + '.a.href', node.a.href, parser.getUrl(url), true)
  667. } else {
  668. const link = {
  669. name: 'a',
  670. attrs: {
  671. href: parser.getUrl(url)
  672. },
  673. children: [node]
  674. }
  675. node.a = link.attrs
  676. this.root._editVal(this.opts[7] + '.' + i, node, link, true)
  677. }
  678. wx.showToast({
  679. title: '成功'
  680. })
  681. }).catch(() => { })
  682. } else if (items[tapIndex] === '预览图') {
  683. // 设置预览图链接
  684. this.root.getSrc('img', node.attrs['original-src'] || '').then(url => {
  685. this.root._editVal(this.opts[7] + '.' + i + '.attrs.original-src', node.attrs['original-src'], parser.getUrl(url instanceof Array ? url[0] : url), true)
  686. uni.showToast({
  687. title: '成功'
  688. })
  689. }).catch(() => { })
  690. } else if (items[tapIndex] === '删除') {
  691. this.remove(i)
  692. } else {
  693. // 禁用 / 启用预览
  694. this.root._setData(this.opts[7] + '.' + i + '.attrs.ignore', !node.attrs.ignore)
  695. uni.showToast({
  696. title: '成功'
  697. })
  698. }
  699. }
  700. })
  701. this.root._lock = true
  702. setTimeout(() => {
  703. this.root._lock = false
  704. }, 50)
  705. }
  706. },
  707. /*`)
  708. // 处理链接点击
  709. .replace(/linkTap\s*\(e\)\s*{([\s\S]+?)},\s*\/\*/,
  710. `linkTap (e) {
  711. if (!this.opts[5]) {$1} else {
  712. const i = e.currentTarget.dataset.i
  713. const node = this.childs[i]
  714. const items = this.root._getItem(node)
  715. this.root._tooltip({
  716. top: getTop(e),
  717. items,
  718. success: tapIndex => {
  719. if (items[tapIndex] === '更换链接') {
  720. this.root.getSrc('link', node.attrs.href).then(url => {
  721. this.root._editVal(this.opts[7] + '.' + i + '.attrs.href', node.attrs.href, url, true)
  722. uni.showToast({
  723. title: '成功'
  724. })
  725. }).catch(() => { })
  726. } else {
  727. this.remove(i)
  728. }
  729. }
  730. })
  731. }
  732. },
  733. /*`)
  734. }
  735. file.contents = Buffer.from(content)
  736. }
  737. }
  738. }