云办编辑器

优化云办的编辑器功能

当前为 2020-12-08 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         云办编辑器
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  优化云办的编辑器功能
// @require      https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js
// @require      https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js
// @author       [email protected]
// @include      *://172.17.**/*
// @include      *://pkc.cestc.cn/*
// @grant        GM_xmlhttpRequest
// ==/UserScript==

(function () {
  (function () {
    // 修改编辑器的默认字体
    const style = document.createElement("style");
    style.type = "text/css";
    style.id = "_wjp_";
    const text = document.createTextNode(".ace_editor.ace_editor{font-family: 'Courier New', 'Cascadia Code', Hack, Monaco; font-size: 18px;}");
    style.appendChild(text);
    const head = document.getElementsByTagName("head")[0];
    head.appendChild(style);
  })();

  (function () {
    // 点击左右编辑框,自动设置宽度
    const PERCENT = 0.66;
    const WIDE = 100 * PERCENT + '%';
    const NARROW = 100 * (1 - PERCENT) + '%';
    $(document).on('dblclick', '.splitter-paneL .el-tabs__content', function (e) {
      e && e.stopPropagation();
      const width = parseFloat($(e.currentTarget).closest('.splitter-paneL').attr('style').replace(/[A-Za-z:\s%]/g, ''));
      if (width > 100 * PERCENT) {
        return;
      }
      $('.splitter-paneL').css('width', WIDE);
      $('.splitter-pane-resizer').css('left', WIDE);
      $('.splitter-paneR').css('width', NARROW);
    }).on('dblclick', '.splitter-paneR .el-tabs__content', function (e) {
      e && e.stopPropagation();
      const width = parseFloat($(e.currentTarget).closest('.splitter-paneR').attr('style').replace(/[A-Za-z:\s%]/g, ''));
      if (width > 100 * PERCENT) {
        return;
      }
      $('.splitter-paneL').css('width', NARROW);
      $('.splitter-pane-resizer').css('left', NARROW);
      $('.splitter-paneR').css('width', WIDE);
    });
  })();

  function getQuery(name, url) {
    var u = url || window.location.search,
      reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)'),
      r = u.substr(u.indexOf('\?') + 1).match(reg);
    return r != null ? r[2] : '';
  }

  (function () {
    // 给页面增加搜索功能

    let dataMap = [];

    setInterval(() => {
      const len = $('#_mySearch_').length;
      const modelCode = getQuery('funcgroupCode');
      if (!len && modelCode) {
        const Token = localStorage.getItem('token');
        GM_xmlhttpRequest({
          method: 'get',
          url: '/pkc/page/all/' + modelCode,
          headers: {
            'Content-Type': 'application/json',
            'Token': Token,
          },
          onload: function (resp) {
            if (resp.status === 200 && resp.readyState === 4) {
              const response = JSON.parse(resp.response);
              const {
                code,
                data,
              } = response;
              if (code === '200010000') {
                const len = $('#_mySearch_').length;
                if (data && data.length && !len) {
                  $('<div id="_mySearch_" class="el-input el-input--medium el-input--suffix" style="width:400px;"><input type="text" autocomplete="off" placeholder="请输入关键字(可搜索组件里面的内容)" class="el-input__inner"></div>').insertBefore('.topOperate>button')
                  data.map(item => {
                    dataMap[item.componentName] = item;
                  });
                }
              }
            }
          }
        });
      }
    }, 2000);

    $(document).on('input', '#_mySearch_ input', _.debounce(function (e) {
      let value = $(e.currentTarget).val().trim();
      let lowerValue = value.toLowerCase();
      const $rows = $('#editableTable .el-table__body-wrapper>.el-table__body>tbody>.el-table__row');
      for (let i = 0; i < $rows.length; i++) {
        const $row = $rows.eq(i);
        let componentName = $row.children('td').eq(1).text().trim();
        const currentData = dataMap[componentName];
        if (value) {
          let shouldHidden = true;
          // 先搜索页面里面的内容
          let html, css, js;
          if (currentData.endType == 2) {
            html = currentData.moveHtml || '';
            css = currentData.moveCss || '';
            js = currentData.moveJs || '';
          } else {
            html = currentData.pcHtml || '';
            css = currentData.pcCss || '';
            js = currentData.pcJs || '';
          }
          if (html.indexOf(value) > -1 || css.indexOf(value) > -1 || js.indexOf(value) > -1) {
            shouldHidden = false;
          }

          // 如果当前页面里面没有,则搜索当前页面
          if (shouldHidden) {
            const $tds = $row.children('td');
            for (let j = 0; j < $tds.length; j++) {
              const text = $tds.eq(j).text().trim().toLowerCase();
              if (text.indexOf(lowerValue) > -1) {
                shouldHidden = false;
                break;
              }
            }
          }

          if (shouldHidden) {
            $row.css('display', 'none');
          } else {
            $row.css('display', '');
          }
        } else {
          $row.css('display', '');
        }
      }
    }, 600));
  })();

})();