build.js 27 KB

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