Squashed commit of the following:

commit d67be37 Author: Jin Yufeng <1750665@tongji.edu.cn> Date: Sun May 14 21:00:47 2023 +0800 release v2.4.2 commit 9acb1d3 Author: Jin Yufeng <1750665@tongji.edu.cn> Date: Sun May 14 20:06:00 2023 +0800 修复了 editable 插件点击音视频时其他标签框不消失的问题 commit 09c8d42 Author: Jin Yufeng <1750665@tongji.edu.cn> Date: Sun May 14 19:39:26 2023 +0800 editable 插件支持修改文字颜色 jin-yufeng#254 commit 0a18c02 Author: Jin Yufeng <1750665@tongji.edu.cn> Date: Sun May 14 11:47:55 2023 +0800 修复了 uni-app 包使用旧版编译器可能报错的问题 jin-yufeng#472 commit 2d0821f Author: Jin Yufeng <1750665@tongji.edu.cn> Date: Sat May 13 17:25:52 2023 +0800 修复了 svg 中有 style 不生效的问题 jin-yufeng#505 commit 8e50ea7 Author: Jin Yufeng <1750665@tongji.edu.cn> Date: Sat May 13 16:20:05 2023 +0800 修复了 uni-app 包 app 端可能出现无法读取 lazyLoad 的问题 jin-yufeng#513 commit 38402ca Author: Jin Yufeng <1750665@tongji.edu.cn> Date: Sat May 13 15:32:39 2023 +0800 修复了latex插件部分情况下不显示的问题 jin-yufeng#515 commit ca66d5e Merge: c0b780b 380c674 Author: jin-yufeng <48236054+jin-yufeng@users.noreply.github.com> Date: Fri Mar 24 21:21:55 2023 +0800 Merge pull request jin-yufeng#497 from TwoKe945/master fix: 修复editable插件在点击换图时,出现的domain前缀未添加的问题 commit 380c674 Author: TwoKe <twoke945@163.com> Date: Mon Mar 13 15:58:43 2023 +0800 fix: 图片设置超链接以及预览图链接url转化 commit ebd1bba Author: TwoKe <twoke945@163.com> Date: Sun Mar 12 23:01:07 2023 +0800 fix: miniprogram平台node.js Parser引入路径错误 commit 4060075 Author: TwoKe <twoke945@163.com> Date: Sun Mar 12 22:57:23 2023 +0800 chore: 更换getImgUrl为通用url解析函数Parser.getUrl commit 467cc0f Author: TwoKe <twoke945@163.com> Date: Sun Mar 12 21:09:38 2023 +0800 fix: 修复editable插件在点击换图时,出现的domain前缀未添加的问题
sonofmagic · Jun 26, 2023 · e33680c · e33680c
1 parent 1c6dc68
commit e33680c
Show file tree

Hide file tree

Showing 18 changed files with 173 additions and 54 deletions.
diff --git a/README.md b/README.md
@@ -233,6 +233,15 @@
   ![支持](docs/assets/sponsor.png)   
 
 ## 更新日志
+- v2.4.2 (20230514)
+  1. `A` `editable` 插件支持修改文字颜色 [详细](https://github.com/jin-yufeng/mp-html/issues/254)
+  2. `F` 修复了 `svg` 中有 `style` 不生效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/505)
+  3. `F` 修复了 `uni-app` 包使用旧版编译器可能报错 `Bad attr nodes` 的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/472)
+  4. `F` 修复了 `uni-app` 包 `app` 端可能出现无法读取 `lazyLoad` 的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/513)
+  5. `F` 修复了 `editable` 插件在点击换图时未拼接 `domain` 的问题 [详细](https://github.com/jin-yufeng/mp-html/pull/497) by [@TwoKe945](https://github.com/TwoKe945)
+  6. `F` 修复了 `latex` 插件部分情况下不显示的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/515) 
+  7. `F` 修复了 `editable` 插件点击音视频时其他标签框不消失的问题
+
 - v2.4.1 (20221225)
   1. `F` 修复了没有图片时 `ready` 事件可能不触发的问题
   2. `F` 修复了加载过程中可能出现 `Root label not found` 错误的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/470)
@@ -243,18 +252,6 @@
   7. `F` 修复了 `uni-app` 包 `vue3` 使用 `highlight` 插件可能报错的问题
   8. `F` 修复了头条小程序使用 `editable` 插件内容为空时点击会报错的问题
 
-- v2.4.0 (20220827)
-  1. `A` 增加了 [setPlaybackRate](https://jin-yufeng.gitee.io/mp-html/#/advanced/api#setPlaybackRate) 的 `api`，可以设置音视频的播放速率 [详细](https://github.com/jin-yufeng/mp-html/issues/452)
-  2. `A` 示例小程序代码开源 [详细](https://github.com/jin-yufeng/mp-html-demo)
-  3. `U` 优化 `ready` 事件触发时机，未设置懒加载的情况下基本可以准确触发 [详细](https://github.com/jin-yufeng/mp-html/issues/195)
-  4. `U` `highlight` 插件在编辑状态下不进行高亮处理，便于编辑
-  5. `F` 修复了 `flex` 布局下图片大小可能不正确的问题
-  6. `F` 修复了 `selectable` 属性没有设置 `force` 也可能出现渲染异常的问题
-  7. `F` 修复了表格中的图片大小可能不正确的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/448)
-  8. `F` 修复了含有合并单元格的表格可能无法设置竖直对齐的问题
-  9. `F` 修复了 `editable` 插件在 `scroll-view` 中使用时工具条位置可能不正确的问题
-  10. `F` 修复了 `uni-app` 包 `vue3` 使用 [search](advanced/plugin#search) 插件可能导致错误换行的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/449)
-
   从 `1.x` 的升级方法可见 [更新指南](https://jin-yufeng.gitee.io/mp-html/#/changelog/changelog?id=v200)
 
 查看 [更新日志](https://jin-yufeng.gitee.io/mp-html/#/changelog/changelog) 了解更多
diff --git a/docs/_coverpage.md b/docs/_coverpage.md
@@ -1,6 +1,6 @@
 ![logo](assets/logo/logo.png)
 
-# mp-html <small>2.4.1</small>
+# mp-html <small>2.4.2</small>
 
 > 一个强大的小程序富文本组件
 

diff --git a/docs/advanced/plugin.md b/docs/advanced/plugin.md
@@ -87,13 +87,13 @@
 | 图片 | 更换链接、调整宽度、设置成超链接（[2.0.4+](changelog/changelog#v204)）、设置预览图链接、禁用预览、删除 |
 | 链接 | 更换链接、删除 |
 | 音视频 | 设置封面、设置循环播放、设置自动播放（[2.2.0+](changelog/changelog#v220)）、删除 |
-| 普通标签 | 设置字体大小、斜体、粗体、下划线（[2.0.4+](changelog/changelog#v204)）、居中、缩进、删除 |
+| 普通标签 | 设置字体大小、颜色（[2.4.2+](changelog/changelog#v242)）、斜体、粗体、下划线（[2.0.4+](changelog/changelog#v204)）、居中、缩进、删除 |
 
 ?> [2.2.1](changelog/changelog#v221) 版本起所有标签支持上下移动操作，但仅限同级标签间移动，即在有同级标签且非第一个（或最后一个）时可以上移（或下移）
 
 ?> 在支付宝小程序中使用时需要在页面样式中添加 *page { position: relative; }* 避免 *tooltip* 错位
 
-?> 菜单项可以通过编辑 *plugins/editable/config.js* 进行修改，仅可以删减或调整顺序，添加或更名无效
+?> 菜单项可以通过编辑 *plugins/editable/config.js* 进行修改，仅可以删减或调整顺序，添加或更名无效（颜色设置除外）
 
 [组件实例](advanced/api#getCompent) 上提供了以下方法（*editable* 属性为 *true* 时才可以调用）：  
 
@@ -349,6 +349,8 @@ function search (key) {
 
 !> 本插件仅用于将官方 [腾讯视频插件](https://github.com/tvfe/txv-miniprogram-plugin) 应用于本组件，使用前请确认已经成功申请使用该插件并按要求在小程序 *app.json* 中配置完成（*uni-app* 中的配置方法可以参考 [#103](https://github.com/jin-yufeng/mp-html/issues/103#issuecomment-654586246)），否则可能报错 **This application has not registered any plugins yet** 且无法生效  
 
+?> 腾讯视频插件 [v2](https://github.com/tvfe/txv-miniprogram-plugin) 默认自动播放，[v1](https://github.com/tvfe/txv-miniprogram-plugin/blob/master/archieve/readme.md) 不会，可按需选择  
+
 ## img-cache
 功能：图片本地缓存  
 大小：*≈4KB*  

diff --git a/docs/changelog/changelog.md b/docs/changelog/changelog.md
@@ -1,5 +1,16 @@
 # 📖 更新日志 :id=changelog
 
+## v2.4.2
+发布时间：*2023-05-14*  
+主要更新：
+1. `A` [editable](advanced/plugin#editable) 插件支持修改文字颜色 [详细](https://github.com/jin-yufeng/mp-html/issues/254)
+2. `F` 修复了 `svg` 中有 `style` 不生效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/505)
+3. `F` 修复了 `uni-app` 包使用旧版编译器可能报错 `Bad attr nodes` 的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/472)
+4. `F` 修复了 `uni-app` 包 `app` 端可能出现无法读取 `lazyLoad` 的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/513)
+5. `F` 修复了 [editable](advanced/plugin#editable) 插件在点击换图时未拼接 [domain](basic/prop#domain) 的问题 [详细](https://github.com/jin-yufeng/mp-html/pull/497) by [@TwoKe945](https://github.com/TwoKe945)
+6. `F` 修复了 [latex](advanced/plugin#latex) 插件部分情况下不显示的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/515) 
+7. `F` 修复了 [editable](advanced/plugin#editable) 插件点击音视频时其他标签框不消失的问题
+
 ## v2.4.1
 发布时间：*2022-12-25*  
 主要更新：

diff --git a/docs/overview/quickstart.md b/docs/overview/quickstart.md
@@ -185,6 +185,8 @@
 
   !> 在 *taro2* 中使用请使用 [示例项目](#demo) 中的非压缩组件包，否则可能出现异常，详见 [#301](https://github.com/jin-yufeng/mp-html/issues/301)
 
+  !> 在 *taro3* 的 *vue3* 中使用时需要修改 *content* 属性的属性名或使用 [setContent](advanced/api#setContent) 方法设置内容，详见 [taro#13146](https://github.com/NervJS/taro/issues/13146)
+
   ?> 在 *taro* 中使用时属性名需用驼峰写法，如 *copy-link* 属性应写作 *copyLink*  
 
   ?> 需要 *taro* 专用包的开发者欢迎参与 [需求调研](https://github.com/jin-yufeng/mp-html/issues/374)

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mp-html",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "description": "小程序富文本组件",
   "miniprogram": "dist/mp-weixin",
   "repository": "https://github.com/jin-yufeng/mp-html",
@@ -12,20 +12,8 @@
     "html"
   ],
   "standard": {
-    "globals": [
-      "App",
-      "Page",
-      "Component",
-      "wx",
-      "requirePlugin",
-      "uni",
-      "plus",
-      "weex"
-    ],
-    "envs": [
-      "jest",
-      "browser"
-    ]
+    "globals": ["App", "Page", "Component", "wx", "requirePlugin", "uni", "plus", "weex"],
+    "envs": ["jest", "browser"]
   },
   "jest": {
     "testEnvironment": "jsdom",
@@ -64,7 +52,6 @@
   "devDependencies": {
     "@babel/preset-env": "^7.12.1",
     "coveralls": "^3.1.0",
-    "eslint-plugin-vue": "^9.8.0",
     "gulp": "^4.0.0",
     "gulp-babel": "^8.0.0",
     "gulp-clean": "^0.4.0",
@@ -82,5 +69,6 @@
     "stylelint-config-standard": "^20.0.0",
     "through2": "^4.0.2",
     "uglify-js": "^2.8.29"
-  }
+  },
+  "dependencies": {}
 }
diff --git a/plugins/editable/config.js b/plugins/editable/config.js
@@ -1,7 +1,9 @@
 // 以下项目可以删减或更换顺序，但不能添加或更改名字
 module.exports = {
   // 普通标签的菜单项
-  node: ['大小', '斜体', '粗体', '下划线', '居中', '缩进', '上移', '下移', '删除'],
+  node: ['大小', '颜色', '斜体', '粗体', '下划线', '居中', '缩进', '上移', '下移', '删除'],
+  // 可以设置的文字颜色，此项可以添加 css 颜色
+  color: ['red', 'yellow', 'blue', 'green', 'gray', 'white', 'black'],
   // 图片的菜单项
   img: ['换图', '宽度', '超链接', '预览图', '禁用预览', '上移', '下移', '删除'],
   // 链接的菜单项

diff --git a/plugins/editable/miniprogram/build.js b/plugins/editable/miniprogram/build.js
@@ -252,6 +252,19 @@ module.exports = {
                   this.root._editVal('nodes[' + (this.properties.opts[7] + i).replace(/_/g, '].children[') + '].attrs.style', style, this.getNode(i).attrs.style)
                 }
               })
+            } else if (items[tapIndex] === '颜色') {
+              // 改变文字颜色
+              const items = this.root._getItem('color')
+              this.root._color({
+                top: getTop(e),
+                items,
+                success: tapIndex => {
+                  const style = node.attrs.style || ''
+                  const value = style.match(/;color:([^;]+)/)
+                  this.changeStyle('color', i, items[tapIndex], value ? value[1] : undefined)
+                  this.root._editVal('nodes[' + (this.properties.opts[7] + i).replace(/_/g, '].children[') + '].attrs.style', style, this.getNode(i).attrs.style)
+                }
+              })
             } else if (items[tapIndex] === '上移' || items[tapIndex] === '下移') {
               const arr = siblings.slice(0)
               const item = arr[j]
@@ -313,6 +326,7 @@ module.exports = {
         const i = e.target.dataset.i
         const node = this.getNode(i)
         const items = this.root._getItem(node)
+        this.root._maskTap()
         this.root._edit = this
         this.i = i
         this.root._tooltip({
@@ -396,6 +410,11 @@ module.exports = {
   <view wx:if="{{slider}}" class="_slider" style="top:{{slider.top}}px">
     <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" />
   </view>
+  <view wx:if="{{color}}" class="_tooltip_contain" style="top:{{color.top}}px">
+    <view class="_tooltip" style="overflow-y: hidden;">
+      <view wx:for="{{color.items}}" wx:key="index" class="_color_item" style="background-color:{{item}}" data-i="{{index}}" bindtap="_colorTap"></view>
+    </view>
+  </view>
 </view>`)
       } else if (file.path.includes('miniprogram' + path.sep + 'index.js')) {
         // 添加 editable 属性，发生变化时重新解析
@@ -452,7 +471,7 @@ module.exports = {
           // 处理各类弹窗的事件
           .replace(/methods\s*:\s*{/, `methods: {
     _containTap() {
-      if (!this._lock && !this.data.slider) {
+      if (!this._lock && !this.data.slider && !this.data.color) {
         this._edit = undefined
         this._maskTap()
       }
@@ -468,6 +487,12 @@ module.exports = {
     },
     _sliderChange(e) {
       this._slidercb(e.detail.value)
+    },
+    _colorTap(e) {
+      this._colorcb(e.currentTarget.dataset.i)
+      this.setData({
+        color: null
+      })
     },`)
       } else if (file.path.includes('miniprogram' + path.sep + 'index.wxss')) {
         // 工具弹窗的样式
@@ -501,6 +526,15 @@ module.exports = {
   color: white;
 }
 
+._color_item {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  margin: 5px 2vw;
+  border:1px solid #dfe2e5;
+  border-radius: 50%;
+}
+
 /* 图片宽度滚动条 */
 ._slider {
   position: absolute;
@@ -566,7 +600,9 @@ module.exports = {
           .replace('<video', '<video bindtap="mediaTap"')
           .replace('audio ', 'audio bindtap="mediaTap" ')
       } else if (file.path.includes('node.js') && file.extname === '.js') {
-        content = `function getTop(e) {
+        content = `
+        const Parser = require('../parser')
+        function getTop(e) {
   let top
   // #ifndef MP-ALIPAY
   top = e.detail.y
@@ -622,6 +658,7 @@ module.exports = {
         const node = this.getNode(i)
         const items = this.root._getItem(node)
         this.root._edit = this
+        const parser = new Parser(this.root)
         this.i = i
         this.root._maskTap()
         this.setData({
@@ -639,7 +676,7 @@ module.exports = {
             if (items[tapIndex] === '换图') {
               // 换图
               this.root.getSrc('img', node.attrs.src || '').then(url => {
-                this.root._editVal('nodes[' + (this.properties.opts[7] + i).replace(/_/g, '].children[') + '].attrs.src', node.attrs.src, url instanceof Array ? url[0] : url, true)
+                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)
               }).catch(() => { })
             } else if (items[tapIndex] === '宽度') {
               // 更改宽度
@@ -675,12 +712,12 @@ module.exports = {
               this.root.getSrc('link', node.a ? node.a.href : '').then(url => {
                 // 如果有 a 标签则替换 href
                 if (node.a) {
-                  this.root._editVal('nodes[' + (this.properties.opts[7] + i).replace(/_/g, '].children[') + '].a.href', node.a.href, url, true)
+                  this.root._editVal('nodes[' + (this.properties.opts[7] + i).replace(/_/g, '].children[') + '].a.href', node.a.href, parser.getUrl(url), true)
                 } else {
                   const link = {
                     name: 'a',
                     attrs: {
-                      href: url
+                      href: parser.getUrl(url)
                     },
                     children: [node]
                   }
@@ -694,7 +731,7 @@ module.exports = {
             } else if (items[tapIndex] === '预览图') {
               // 设置预览图链接
               this.root.getSrc('img', node.attrs['original-src'] || '').then(url => {
-                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)
+                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)
                 wx.showToast({
                   title: '成功'
                 })

diff --git a/plugins/editable/miniprogram/index.js b/plugins/editable/miniprogram/index.js
@@ -83,6 +83,9 @@ function Editable (vm) {
   vm._getItem = function (node, up, down) {
     let items
     let i
+    if (node === 'color') {
+      return config.color
+    }
     if (node.name === 'img') {
       items = config.img.slice(0)
       if (!vm.getSrc) {
@@ -176,6 +179,21 @@ function Editable (vm) {
     vm._slidercb = obj.change
   }
 
+  /**
+   * @description 显示颜色选择
+   * @param {object} obj
+   * @private
+   */
+  vm._color = function (obj) {
+    vm.setData({
+      color: {
+        items: obj.items,
+        top: obj.top
+      }
+    })
+    vm._colorcb = obj.success
+  }
+
   /**
    * @description 点击蒙版
    * @private
@@ -192,7 +210,10 @@ function Editable (vm) {
     if (this.data.slider) {
       data.slider = null
     }
-    if (this.data.tooltip || this.data.slider) {
+    if (this.data.color) {
+      data.color = null
+    }
+    if (this.data.tooltip || this.data.slider || this.data.color) {
       this.setData(data)
     }
   }