debug

src/config.js

@@ -26,10 +26,11 @@ const config = {
         // 'code',
         // 'undo',
         // 'redo',
-        // 'questiontype',
-        // 'questionBorder',
-        // 'questionHead',
-        // 'questionData',
+        'questiontype',
+        'questionBorder',
+        'questionHead',
+        'questionData',
+        'addPage',
 
         // 'questiontypes',
         // 'questionborder',

src/index.js

@@ -4,172 +4,172 @@ import $ from './js/util/dom-core.js';
 import data from './data.json';
 let editor = new yzWebeditor({dom:document.getElementById('pages-box'), data: data});
 
-let conmands = [];
+// let conmands = [];
 
-const selection = editor.selection;
+// const selection = editor.selection;
 
-let cardHtml = data.cardHtml || '';
-if (cardHtml.length > 0) {
-  cardHtml = JSON.parse(data.cardHtml);
-  editor.page.parseCardHtml(cardHtml);
-} else {
-  let borders = data.pageQus;
+// let cardHtml = data.cardHtml || '';
+// if (cardHtml.length > 0) {
+//   cardHtml = JSON.parse(data.cardHtml);
+//   editor.page.parseCardHtml(cardHtml);
+// } else {
+//   let borders = data.pageQus;
 
-  let length = borders.length;
-  for (let i = 0; i < length; i++) {
-    let borderItem = borders[i];
-    let pros = borderItem.pros;
-    let plength = pros.length;
-    borderItem.pureObject = true;
-    for (let j = 0; j < plength; j++) {
-      let prosItem = pros[j];
-      if (parseInt(prosItem.pureObjective) ===2) {
-        borderItem.pureObject = false;
-      }
-    }
-  }
+//   let length = borders.length;
+//   for (let i = 0; i < length; i++) {
+//     let borderItem = borders[i];
+//     let pros = borderItem.pros;
+//     let plength = pros.length;
+//     borderItem.pureObject = true;
+//     for (let j = 0; j < plength; j++) {
+//       let prosItem = pros[j];
+//       if (parseInt(prosItem.pureObjective) ===2) {
+//         borderItem.pureObject = false;
+//       }
+//     }
+//   }
   
   
-  for (let i = 0; i < length; i ++) {
-    let borderItem = borders[i];
-    let borderData = {
-      annexable: borderItem.annexable,
-      attribute: borderItem.attribute,
-      content: borderItem.content,
-      group: borderItem.group,
-      pureObject: borderItem.pureObject,
-      pros: borderItem.pros,
-      sort: borderItem.sort
-    }
-    if (borderItem.pureObject) {
-      let conmandItem = {
-        exc: 'border',
-        params: {
-          type: 1,
-          data: borderData
-        }
-      }
-      conmands.push(conmandItem);
-    } else {
-      let conmandItem = {
-        exc: 'border',
-        params: {
-          type: 2,
-          data: borderData
-        }
-      }
-      conmands.push(conmandItem);
-    }
+//   for (let i = 0; i < length; i ++) {
+//     let borderItem = borders[i];
+//     let borderData = {
+//       annexable: borderItem.annexable,
+//       attribute: borderItem.attribute,
+//       content: borderItem.content,
+//       group: borderItem.group,
+//       pureObject: borderItem.pureObject,
+//       pros: borderItem.pros,
+//       sort: borderItem.sort
+//     }
+//     if (borderItem.pureObject) {
+//       let conmandItem = {
+//         exc: 'border',
+//         params: {
+//           type: 1,
+//           data: borderData
+//         }
+//       }
+//       conmands.push(conmandItem);
+//     } else {
+//       let conmandItem = {
+//         exc: 'border',
+//         params: {
+//           type: 2,
+//           data: borderData
+//         }
+//       }
+//       conmands.push(conmandItem);
+//     }
   
-    let pros = borderItem.pros;
-    let plength = pros.length;
-    let maxNum = 0;
-    let questcount = 0;
-    for (let j = 0; j < plength; j++) {
-      let prosItem = pros[j];
-      let qus = prosItem.qus;
-      let klength = qus.length;
-      for (let k = 0; k < klength; k++) {
-        let qusItem = JSON.parse(JSON.stringify(qus[k]));
-        qusItem.proId = prosItem.proId;
-        qusItem.proData = {
-          content: prosItem.content,
-          proId: prosItem.proId,
-          pnum: prosItem.pnum,
-          pureObjective: prosItem.pureObjective,
-          score: prosItem.score,
-          sort: prosItem.sort
-        };
-        let qNums = parseInt(qusItem.nums);
-        qNums > maxNum && (maxNum = qNums);
-        parseQuestion(qusItem);
-        questcount++;
-      }
-    }
+//     let pros = borderItem.pros;
+//     let plength = pros.length;
+//     let maxNum = 0;
+//     let questcount = 0;
+//     for (let j = 0; j < plength; j++) {
+//       let prosItem = pros[j];
+//       let qus = prosItem.qus;
+//       let klength = qus.length;
+//       for (let k = 0; k < klength; k++) {
+//         let qusItem = JSON.parse(JSON.stringify(qus[k]));
+//         qusItem.proId = prosItem.proId;
+//         qusItem.proData = {
+//           content: prosItem.content,
+//           proId: prosItem.proId,
+//           pnum: prosItem.pnum,
+//           pureObjective: prosItem.pureObjective,
+//           score: prosItem.score,
+//           sort: prosItem.sort
+//         };
+//         let qNums = parseInt(qusItem.nums);
+//         qNums > maxNum && (maxNum = qNums);
+//         parseQuestion(qusItem);
+//         questcount++;
+//       }
+//     }
   
-    if (borderItem.pureObject) {
-      let columns = 1;
-      if (maxNum > 4) {
-        columns = 2;
-      } else {
-        columns = 3;
-      }
+//     if (borderItem.pureObject) {
+//       let columns = 1;
+//       if (maxNum > 4) {
+//         columns = 2;
+//       } else {
+//         columns = 3;
+//       }
   
-      let rows = Math.ceil(questcount / columns / 5);
-      borderData.row = rows;
-      borderData.column = columns;
-    }
-  }
-  let commondsLength = conmands.length;
-  asynExecCommand(0, commondsLength);
-}
+//       let rows = Math.ceil(questcount / columns / 5);
+//       borderData.row = rows;
+//       borderData.column = columns;
+//     }
+//   }
+//   let commondsLength = conmands.length;
+//   asynExecCommand(0, commondsLength);
+// }
 
-function checkoutCententChange() {
-  return new Promise((resolve, reject) => {
-    while (editor.page._checkCrossing || editor.page._addParagraphStatus || editor.page._contentChangeStatus) {}    
-    resolve(true);
-  });
-}
-async function asynExecCommand (i, length) {
-  if (i < length) {
-    let result = await checkoutCententChange();
-    if (result) {
-      editor.cmd.do(conmands[i].exc, conmands[i].params);
-      if (conmands[i].exc === 'border' && conmands[i].params.type === 1) {
-        editor.isDoObject = true;
-      } else if (conmands[i].exc === 'questiontype' && conmands[i].params.type === 1){
-        editor.isDoObject = true;
-      } else if (conmands[i].exc === 'questiontype' && conmands[i].params.type === 2) {
-        editor.isDoObject = true;
-      } else {
-        editor.isDoObject = false;
-      }
-      i++;
-    }
-    asynExecCommand(i, length);
-  } else {
-    editor.page._checkContentOutThrottle();
-  }
-}
+// function checkoutCententChange() {
+//   return new Promise((resolve, reject) => {
+//     while (editor.page._checkCrossing || editor.page._addParagraphStatus || editor.page._contentChangeStatus) {}    
+//     resolve(true);
+//   });
+// }
+// async function asynExecCommand (i, length) {
+//   if (i < length) {
+//     let result = await checkoutCententChange();
+//     if (result) {
+//       editor.cmd.do(conmands[i].exc, conmands[i].params);
+//       if (conmands[i].exc === 'border' && conmands[i].params.type === 1) {
+//         editor.isDoObject = true;
+//       } else if (conmands[i].exc === 'questiontype' && conmands[i].params.type === 1){
+//         editor.isDoObject = true;
+//       } else if (conmands[i].exc === 'questiontype' && conmands[i].params.type === 2) {
+//         editor.isDoObject = true;
+//       } else {
+//         editor.isDoObject = false;
+//       }
+//       i++;
+//     }
+//     asynExecCommand(i, length);
+//   } else {
+//     editor.page._checkContentOutThrottle();
+//   }
+// }
 
-function parseQuestion (qitem) {
-  let type = qitem.quType;
-  switch(type) {
-    case '单选题':
-    case '多选题':
-    let conmandItem1 = {
-      exc: 'questiontype',
-      params: {type: 1, data: qitem}
-    }
-    conmands.push(conmandItem1);
-    break;
-    case '判断题':
+// function parseQuestion (qitem) {
+//   let type = qitem.quType;
+//   switch(type) {
+//     case '单选题':
+//     case '多选题':
+//     let conmandItem1 = {
+//       exc: 'questiontype',
+//       params: {type: 1, data: qitem}
+//     }
+//     conmands.push(conmandItem1);
+//     break;
+//     case '判断题':
 
-    let conmandItem2 = {
-      exc: 'questiontype',
-      params: {type: 2, data: qitem}
-    }
-    conmands.push(conmandItem2);
-    break;
+//     let conmandItem2 = {
+//       exc: 'questiontype',
+//       params: {type: 2, data: qitem}
+//     }
+//     conmands.push(conmandItem2);
+//     break;
 
-    case '填空题':
-    case '解答题':
-    let conmandItem3 = {
-      exc: 'questiontype',
-      params: {type: 3, data: qitem}
-    }
-    conmands.push(conmandItem3);
-    break;
+//     case '填空题':
+//     case '解答题':
+//     let conmandItem3 = {
+//       exc: 'questiontype',
+//       params: {type: 3, data: qitem}
+//     }
+//     conmands.push(conmandItem3);
+//     break;
 
-    case '作文题':
-    let conmandItem4 = {
-      exc: 'questiontype',
-      params: {type: 4, data: qitem}
-    }
-    conmands.push(conmandItem4);
-    break;
-  }
-}
+//     case '作文题':
+//     let conmandItem4 = {
+//       exc: 'questiontype',
+//       params: {type: 4, data: qitem}
+//     }
+//     conmands.push(conmandItem4);
+//     break;
+//   }
+// }
 
 
 console.log(editor);

src/js/command/index.js

@@ -18,36 +18,26 @@ Command.prototype = {
     // 执行命令
     do: function (name, value) {
         const editor = this.editor
-        let $selectionElem = editor.selection.getSelectionContainerElem();
-        let $paragraph = getParentByClassname($selectionElem, 'js-paragraph-view');
-        if (!$paragraph) {
-          editor.message.showMessage('必须在段落中编辑！');
-          return false;
-        }
         // 使用 styleWithCSS
         if (!editor._useStyleWithCSS) {
             document.execCommand('styleWithCSS', null, true)
             editor._useStyleWithCSS = true
         }
-        // 如果无选区，忽略
-        if (!editor.selection.getRange()) {
-            return
-        }
 
         // 执行
         const _name = '_' + name
         if (this[_name]) {
             // 有自定义事件
             this[_name](value)
-        } else if (this.commands[_name]) {
+        } else if (this.commands[_name]) {         
             // 修改菜单状态
-            editor.menus.changeActive()          
+            // editor.menus.changeActive()         
             return this.commands[_name].call(this, value)
         } else {
             // 默认 command
             // 修改菜单状态
             // 恢复选取
-            editor.selection.restoreSelection()
+            // editor.selection.restoreSelection()
             editor.menus.changeActive() 
             return this._execCommand(name, value)
         }

src/js/menus/addpage/index.js

@@ -0,0 +1,31 @@
+/*
+    redo-menu
+*/
+import $ from '../../util/dom-core.js'
+
+// 构造函数
+function AddPage(editor) {
+    this.editor = editor
+    this.$elem = $(
+        `<div class="lsiten-e-menu">
+            添加一页
+        </div>`
+    )
+    this.type = 'click'
+
+    // 当前是否 active 状态
+    this._active = false
+}
+
+// 原型
+AddPage.prototype = {
+    constructor: AddPage,
+
+    // 点击事件
+    onClick: function (e) {
+      // 点击菜单将触发这里
+      this.editor.page._addPage();
+    }
+}
+
+export default AddPage

src/js/menus/droplist.js

@@ -50,9 +50,6 @@ function DropList(menu, opt) {
             $li.append($elem)
             $list.append($li)
             $li.on('click', e => {
-                if (editor.selection.getRange() == null) {
-                  return
-                }
                 onClick(value)
 
                 // 隐藏

src/js/menus/index.js

@@ -71,9 +71,6 @@ Menus.prototype = {
             // 点击类型，例如 bold
             if (type === 'click' && menu.onClick) {
                 $elem.on('click', e => {
-                    if (editor.selection.getRange() == null) {
-                        return
-                    }
                     menu.onClick(e)
                 })
             }

src/js/menus/menu-list.js

@@ -77,5 +77,7 @@ MenuConstructors.questionHead = QuestionHead
 import QuestionData from './questionData/index.js'
 MenuConstructors.questionData = QuestionData
 
+import AddPage from './addpage/index.js'
+MenuConstructors.addPage = AddPage
 // 吐出所有菜单集合
 export default MenuConstructors

src/js/menus/questionBorder/index.js

@@ -35,6 +35,7 @@ Questionborder.prototype = {
 
     // 执行命令
     _command: function (value) {
+        console.log(value)
         let funName = 'lsiten_' + value;
         if (this[funName]) {
           this[funName]();

src/js/plugin/commands/border.js

@@ -1,18 +1,21 @@
 import $ from '../../util/dom-core.js';
+import { gennerOneLine } from '../../util/lineUtil.js';
 function _addParagraph (editor) {
-  let $para = editor.page._addParagraph();
-  if ($para) {
-    editor.selection.getRange().setStart($para.children(0)[0], 0);
-    if (editor.selection.getRange()) {
-      editor.selection.restoreSelection();
-    }
-    editor.selection.saveRange();
-  } else {
-    _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);
@@ -62,22 +65,25 @@ function objectBorder (editor, data) {
     }
     border.append($row);
   }
-  // 加一段，再插入框
-  _addParagraph(editor);
-  // 插入框内容
-  let html = $('<div></div>').append(border).html();
-  editor.cmd.do('insertHTML', html)
-  editor.selection.saveRange();
+
+  $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"><p><br/></p></div></div>');
+  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')
@@ -131,13 +137,7 @@ function subjectBorder (editor, data) {
     $optional.append($optionalBody);
     border[0].firstChild.insertBefore($optional[0], border[0].firstChild.firstChild);
   }
-
-  // 加一段，再插入框
-  _addParagraph(editor);
-  // 插入框内容
-  let html = $('<div></div>').append(border).html();
-  editor.cmd.do('insertHTML', html)
-  editor.selection.saveRange();
+  $para.append(border);
 }
 let Border = function (params) {
   let editor = this.editor;

src/js/question/questionhead.js

@@ -415,30 +415,11 @@ let generateQuestionHead = function (editor, key, $page) {
   }
   let $header = heads[key](noCount, editor.data, currentPage.pageIndex);
   
-  let firstParagraph = $fisrstColumn[0].firstChild;
-  if (!firstParagraph) {
-    return false;
+  let $firstParagraph = $fisrstColumn[0].firstChild;
+  if (!$firstParagraph) {
+    $firstParagraph = currentPage.addParagraph();
   }
-  let childs = firstParagraph.childNodes;
-  let html = firstParagraph.innerHTML;
-
-  if (childs.length > 0 && html !== '<br/>' && html !== '<br>' && html !== '<p></p>' && html !== '<p><br/></p>' && html !== '<p><br></p>') {
-    let $template =  $(firstParagraph.cloneNode());
-    let pageindex = editor.page.pageIndex + 1;
-    $template.attr('data-index', pageindex);
-    $template.append($header);
-    $template.insertBefore(firstParagraph);
-  } else {
-    firstParagraph.innerHTML = '';
-    $(firstParagraph).append($header);
-  }
-
-  editor.selection.getRange().setStart($header[0], 0);
-  if (editor.selection.getRange()) {
-    editor.selection.restoreSelection();
-  }
-  editor.selection.saveRange();
-  editor.selection.collapseRange();
+  $firstParagraph.append($header);
   return true;
 }
 

src/js/util/lineUtil.js

@@ -0,0 +1,10 @@
+/*
+    工具
+*/
+import $ from './dom-core'
+// 遍历类数组
+export function gennerOneLine() {
+  let line = $('<div class="js-lsiten-line" contenteditable="true"><br/></div>');
+  line.css('outline', 'none').css('width', '100%').css('height', '25px').css('line-height', '25px').css('overflow', 'hidden').css('white-space', 'nowrap');
+  return line;
+}

src/js/yzWebeditor.js

@@ -62,7 +62,7 @@ yzWebeditor.prototype = {
     this.message = new Message(this, {});
   },
   _initEditStyle: function() {
-    this.$editorArea.css('height', this.editorHeight + 'px');
+    this.$editorArea.css('height', this.editorHeight + 'px').css('overflow', 'scroll');
   },
   // 初始化配置文
   _initConfig: function () {