fix(云机剪贴板): 修复剪贴板内容包含双引号时无法使用的问题

static/screenAndroid/WXtrialInterface.html

@@ -59,6 +59,34 @@
       </div>
       {{~}}
     </template>
+    <template id="template-shear">
+      {{? it.length}}
+      <div class="title">
+        剪贴板
+        <div class="btn-clear">清空</div>
+      </div>
+      <div class="slide-wrapper-content">
+        {{~ it :item:index }}
+        <div class="slide-wrapper">
+          <div class="slide-scroll animate-slide-start">
+            <div
+              class="slide-content"
+              data-content="{{= encodeHtml(item.content)}}"
+            >
+              <div>{{= encodeHtml(item.content)}}</div>
+            </div>
+            <div class="slide-content-button" data-id="{{= item.id}}">
+              <button>删除</button>
+            </div>
+          </div>
+        </div>
+        {{~}}
+      </div>
+      {{??}}
+      <img class="empty" src="img/jianqieban_pic@2x.png" alt="" />
+      <div class="empty-txt">剪贴板为空</div>
+      {{?}}
+    </template>
     <div class="container" id="player">
       <div class="muted" id="btnMuted">
         <div class="control-right-img" data-id="1">
@@ -830,6 +858,38 @@
       var cutList = [];
       let timer,
         isFlag = true;
+      const shearTemplate = doT.template(
+        $('#template-shear').html().replace(/&amp;/g, '&'),
+      );
+
+      function updateShearHtml(list) {
+        $('.box-shear-plate').html(shearTemplate(list));
+      }
+      // 对字符串进行html转义
+      function encodeHtml(content) {
+        return [
+          ['<', '&lt;'],
+          ['>', '&gt;'],
+          ['&', '&amp;'],
+          ['"', '&quot;'],
+        ].reduce(function (previousValue, currentValue) {
+          return previousValue.replace(
+            new RegExp(currentValue[0], 'g'),
+            currentValue[1],
+          );
+        }, content);
+      }
+
+      $('.box-shear-plate').on('click', '.slide-content', function (e) {
+        handleCopy(e.currentTarget.dataset.content);
+      });
+      $('.box-shear-plate').on('click', '.btn-clear', function (e) {
+        handleClear();
+      });
+      $('.box-shear-plate').on('click', '.slide-content-button', function (e) {
+        handleDelete(e.currentTarget.dataset.id);
+      });
+
       function showShearPlate() {
         if (!isControl) {
           return;
@@ -872,36 +932,9 @@
               type: 'get',
               dataType: 'json',
               success: function (res) {
-                if (res.status === 0) {
-                  if (res.data.length) {
-                    cutList = array_unique(res.data);
-                    var str =
-                      '<div class="title">剪贴板<div onclick="handleClear()" class="btn-clear">清空</div></div><div class="slide-wrapper-content">';
-                    cutList.forEach(function (item) {
-                      str +=
-                        "<div class='slide-wrapper'><div class='slide-scroll animate-slide-start'><div class='slide-content'><div onclick='handleCopy(\"" +
-                        item.content +
-                        '")\'>' +
-                        item.content +
-                        "</div></div><div class='slide-content-button'><button onclick='handleDelete(" +
-                        item.id +
-                        ")'>删除</button></div></div></div>";
-                    });
-                    str += '</div>';
-                    $('.box-shear-plate').append(str);
-                  } else {
-                    $('.box-shear-plate').append(
-                      '<img class="empty" src="img/jianqieban_pic@2x.png" alt="" /><div class="empty-txt">剪贴板为空</div>',
-                    );
-                  }
-                  $('.mask').show();
-                  initSlider();
-                } else {
-                  $('.box-shear-plate').append(
-                    '<img class="empty" src="img/jianqieban_pic@2x.png" alt="" /><div class="empty-txt">剪贴板为空</div>',
-                  );
-                  $('.mask').show();
-                }
+                updateShearHtml(res.status === 0 ? res.data : []);
+                $('.mask').show();
+                initSlider();
               },
             });
           });

static/screenIos/WXtrialInterface.html

@@ -62,6 +62,34 @@
       </div>
       {{~}}
     </template>
+    <template id="template-shear">
+      {{? it.length}}
+      <div class="title">
+        剪贴板
+        <div class="btn-clear">清空</div>
+      </div>
+      <div class="slide-wrapper-content">
+        {{~ it :item:index }}
+        <div class="slide-wrapper">
+          <div class="slide-scroll animate-slide-start">
+            <div
+              class="slide-content"
+              data-content="{{= encodeHtml(item.content)}}"
+            >
+              <div>{{= encodeHtml(item.content)}}</div>
+            </div>
+            <div class="slide-content-button" data-id="{{= item.id}}">
+              <button>删除</button>
+            </div>
+          </div>
+        </div>
+        {{~}}
+      </div>
+      {{??}}
+      <img class="empty" src="img/jianqieban_pic@2x.png" alt="" />
+      <div class="empty-txt">剪贴板为空</div>
+      {{?}}
+    </template>
     <div class="container" id="player">
       <div class="muted" id="btnMuted">
         <div class="control-right-img" data-id="1">
@@ -551,6 +579,39 @@
       var cutList = [];
       let timer,
         isFlag = true;
+
+      const shearTemplate = doT.template(
+        $('#template-shear').html().replace(/&amp;/g, '&'),
+      );
+
+      function updateShearHtml(list) {
+        $('.box-shear-plate').html(shearTemplate(list));
+      }
+      // 对字符串进行html转义
+      function encodeHtml(content) {
+        return [
+          ['<', '&lt;'],
+          ['>', '&gt;'],
+          ['&', '&amp;'],
+          ['"', '&quot;'],
+        ].reduce(function (previousValue, currentValue) {
+          return previousValue.replace(
+            new RegExp(currentValue[0], 'g'),
+            currentValue[1],
+          );
+        }, content);
+      }
+
+      $('.box-shear-plate').on('click', '.slide-content', function (e) {
+        handleCopy(e.currentTarget.dataset.content);
+      });
+      $('.box-shear-plate').on('click', '.btn-clear', function (e) {
+        handleClear();
+      });
+      $('.box-shear-plate').on('click', '.slide-content-button', function (e) {
+        handleDelete(e.currentTarget.dataset.id);
+      });
+
       function showShearPlate() {
         stopManyClick(function () {
           new Promise((resolve, reject) => {
@@ -590,36 +651,9 @@
               type: 'get',
               dataType: 'json',
               success: function (res) {
-                if (res.status === 0) {
-                  if (res.data.length) {
-                    cutList = array_unique(res.data);
-                    var str =
-                      '<div class="title">剪贴板<div onclick="handleClear()" class="btn-clear">清空</div></div><div class="slide-wrapper-content">';
-                    cutList.forEach(function (item) {
-                      str +=
-                        "<div class='slide-wrapper'><div class='slide-scroll animate-slide-start'><div class='slide-content'><div onclick='handleCopy(\"" +
-                        item.content +
-                        '")\'>' +
-                        item.content +
-                        "</div></div><div class='slide-content-button'><button onclick='handleDelete(" +
-                        item.id +
-                        ")'>删除</button></div></div></div>";
-                    });
-                    str += '</div>';
-                    $('.box-shear-plate').append(str);
-                  } else {
-                    $('.box-shear-plate').append(
-                      '<img class="empty" src="img/jianqieban_pic@2x.png" alt="" /><div class="empty-txt">剪贴板为空</div>',
-                    );
-                  }
-                  $('.mask').show();
-                  initSlider();
-                } else {
-                  $('.box-shear-plate').append(
-                    '<img class="empty" src="img/jianqieban_pic@2x.png" alt="" /><div class="empty-txt">剪贴板为空</div>',
-                  );
-                  $('.mask').show();
-                }
+                updateShearHtml(res.status === 0 ? res.data : []);
+                $('.mask').show();
+                initSlider();
               },
             });
           });