build.js 29 KB

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