lsiten-editor-v2/src/js/plugin/commands/border.js

import $ from '../../util/dom-core.js';
import { gennerOneLine } from '../../util/lineUtil.js';
function _addParagraph (editor) {
  let currentPage = editor.page.currentPage;
  if (!currentPage) {
    return false;
  }
  let $para = currentPage.addParagraph();
  return $para;
}
// 客观题框
function objectBorder (editor, data) {
  // 加一段，再插入框
  let $para = _addParagraph(editor);
  if (!$para) {
    editor.message.showMessage('请在编辑器内编辑');
    return false;
  }
  let sortIndex = data.sort;
  let border = $('<div class="js-lsiten-border lsiten-question-object"></div>');
  border.attr('data-type', 1);
  border.attr('data-sort', sortIndex);
  border.attr('tabindex', 1);
  border.attr('data-current-row', 0);
  border.attr('contenteditable', false);
  // style start
  border.css('border', '1px solid #000')
        .css('padding', '0')
        .css('margin', '10px 0')
        .css('overflow', 'hidden')
        .css('height', 'auto')
        .css('width', '100%')
        .css('box-sizing', 'border-box')
        .css('outline', 'none')
        .css('border-color', '#000');
  // style end

  // 生成行列
  let row = parseInt(data.row);
  let column = parseInt(data.column);
  border.attr('data-row', row);
  border.attr('data-column', column);
  let cWidth = 100 / column + '%';
  let lastColumn = column - 1;
  let columnIndex = 1;
  for (let i = 0; i < row; i++) {
    let $row = $('<div class = "js-options-row"></div>');
    $row.css('float', 'left')
        // .css('min-height', '100px')
        .css('height', 'auto')
        .css('width', '100%');
    $row.attr('data-current-column', 0);
    i > 0 && ($row.css('border-top', '1px solid #000').css('box-sizing', 'border-box'));
    for (let j = 0; j < column; j++) {
      let $column = $('<div class = "js-option-column"><div style="padding: 12px 0"></div></div>');
      $column.attr('data-question-count', 0);
      $column.attr('data-Index', columnIndex++);
      $column.attr('data-sort', sortIndex);
      $column.css('width', cWidth)
             .css('float', 'left')
            //  .css('min-height', '100px')
             .css('height', 'auto');
      j < lastColumn && ($column.css('border-right', '1px solid #000').css('box-sizing', 'border-box'));
      $row.append($column);
    }
    border.append($row);
  }

  $para.append(border);
}

// 主观题框
function subjectBorder (editor, data) {
  // 加一段，再插入框
  let $para = _addParagraph(editor);
  if (!$para) {
    editor.message.showMessage('请在编辑器内编辑');
    return false;
  }
  let group = parseInt(data.group);
  let sortIndex = data.sort;
  let border = $('<div class="js-lsiten-border lsiten-question-subject"><div class="border-content"></div></div>');
  border.attr('data-type', 2);
  border.attr('data-sort', sortIndex);
  border.attr('tabindex', 1);
  $(border[0].firstChild).append(gennerOneLine());
  // style start
  border.css('border', '1px solid #000')
  .css('padding', '10px 15px')
  .css('height', 'auto')
  .css('margin', '10px 0')
  .css('width', '100%')
  .css('box-sizing', 'border-box')
  .css('outline', 'none')
  .css('border-color', '#000');
  // style end
  if (group > 0) {
    let problems = data.pros;
    let problemsLength = problems.length;
    let $optional = $('<div class="js-lsiten-options-box" contenteditable="false"></div>');
    $optional.css('margin-bottom', '10px');
    let $optionalTips = $('<div>选做题</div>')
    $optional.append($optionalTips);
    let $optionalBody = $('<div></div>');
    let $optionTitle = $('<div>题号:</div>');
    $optionTitle.css('display', 'inline-block').css('width', 'auto').css('height', 'auto');
    $optionalBody.append($optionTitle);
    for (let i = 0; i < problemsLength; i++) {
      let $problemBox = $('<div></div>');
      $problemBox.css('display', 'inline-block').css('width', 'auto').css('height', 'auto').css('margin', '0 10px');
      let pnum = problems[i].pnum;
      // 如果小问没有pnum，则显示小问pnum
      if (!pnum) {
        let qutions = problems[i].qus;
        let pnumArr = [];
        for (let k = 0; k < qutions.length; k++) {
          pnumArr.push(qutions[k].pnum);
        }
        pnum = '[' + pnumArr.join(',') + ']';
      }
      let $optionPnum = $('<div>' + pnum + '</div>');
      $optionPnum.css('display', 'inline-block').css('width', 'auto').css('height', 'auto').css('margin', '0 3px');
      let $optionBorder = $('<div>&#8203;</div>');
      $optionBorder.css('border', '1px solid #000')
           .css('text-align', 'center')
           .css('width', '19px')
           .css('height', 'auto')
           .css('box-sizing', 'border-box')
           .css('font-size', '12px')
           .css('display', 'inline-block')
           .css('line-height', '11px')
           .css('margin', '0 0 0 5px');
      $problemBox.append($optionPnum);
      $problemBox.append($optionBorder);
      $optionalBody.append($problemBox);
    }
    $optional.append($optionalBody);
    border[0].firstChild.insertBefore($optional[0], border[0].firstChild.firstChild);
  }
  $para.append(border);
}
let Border = function (params) {
  let editor = this.editor;
  let type = params.type;
  let data = params.data;
  switch (parseInt(type)) {
    case 1:
    objectBorder(editor, data);
    break;
    case 2: 
    subjectBorder(editor, data);
    break;
  }
 }
 export default {
   _border: Border
 }