debug

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lsiten-editor-v2",
-  "version": "1.1.0",
+  "version": "1.2.2",
   "description": "answer sheet",
   "main": "src/js/yzWebeditor.js",
   "scripts": {

src/js/menus/underline/index.js

@@ -34,41 +34,12 @@ Underline.prototype = {
         // 恢复选中文字
         editor.selection.restoreSelection();
         editor.cmd.do('underline');
-        // let text =editor.selection.getRange();
-        
-        // let startText = text.startContainer;
-        // let endText = text.endContainer;
-        // if (startText !== endText) {
-        //   console.log('error');
-        //   editor.message.showMessage('该页已经有答题卡头！');
-        //   return '';
-        // }
-        // if (startText.nodeType === 3) {
-        //   startText.splitText(text.startOffset);
-        //   startText = startText.nextSibling;
-        //   startText.splitText(text.endOffset);
-        //   let parentNode = startText.parentNode;
-        //   let nextNode =startText.nextSibling;
-        //   let span = document.createElement('span');
-        //   span.style.textDecoration = 'underline';
-        //   span.appendChild(startText);
-        //   if (nextNode) {
-        //     parentNode.insertBefore(span, nextNode);
-        //   } else {
-        //     parentNode.appendChild(span);
-        //   }
-        //   // 最后，恢复选取保证光标在原来的位置闪烁
-        //   editor.selection.getRange().setStart(span, 1);
-        // } else {
-        //   let html = '<span style="text-decoration: underline;">&#8203;</span>';
-        //   editor.cmd.do('insertHTML', html);
-        // }
         editor.selection.saveRange();
         let text =editor.selection.getRange();
         let $text = $(
             text.startContainer.nodeType === 1 ? text.startContainer : text.startContainer.parentNode
         );
-        let textUnderline = $text[0].getAttribute('text-decoration-line');
+        let textUnderline = $text[0].style.textDecorationLine;
         textUnderline && textUnderline === 'underline' && $text.css('text-decoration', 'underline');
         editor.selection.restoreSelection();
         // 执行 underline 命令

src/js/question/choice.js

@@ -26,7 +26,7 @@ let generateChoice = function ($border, data, editor) {
   $questionItem.attr('data-type', 1);
   $questionItem.attr('data-pid', proId);
   $questionItem.attr('data-qid', quId);
-  $questionItem.css('margin', '8px 0')
+  $questionItem.css('margin', '0')
                .css('outline', 'none')
                .css('overflow', 'hidden')
                .css('position', 'relative');
@@ -39,8 +39,8 @@ let generateChoice = function ($border, data, editor) {
   let $span = $('<span class = "lsiten-pnum-box"> ' + pnum + ' </span>');
   $span.css('min-width', '25px')
        .css('height', 'auto')
+       .css('line-height', '25px')
        .css('width', 'auto')
-       .css('line-height', '14px')
        .css('display', 'inline-block')
        .css('text-align', 'right')
        .css('float', 'left')
@@ -139,7 +139,7 @@ let generateChoice = function ($border, data, editor) {
   */
  function generateOptions (num) {
   let $box = $('<div class="lsiten-options-box"></div>');
-  $box.css('display', 'inline-block').css('float', 'left').css('width', 'auto').css('font-size', '0');
+  $box.css('display', 'inline-block').css('float', 'left').css('width', 'auto').css('line-height', '25px');
   for (let i = 0; i < num; i++) {
     let $option = $('<div class="lsiten-option">' + _mapOptionNum[i] + '</div>');
     $option.css('border', '1px solid #000')

src/js/question/judge.js

@@ -16,7 +16,7 @@ import { gennerOneLine } from '../util/lineUtil.js';
   $questionItem.attr('data-type', 2);
   $questionItem.attr('data-pid', proId);
   $questionItem.attr('data-qid', quId);
-  $questionItem.css('margin', '8px 0')
+  $questionItem.css('margin', '0')
                .css('outline', 'none')
                .css('overflow', 'hidden')
                .css('position', 'relative');
@@ -29,9 +29,9 @@ import { gennerOneLine } from '../util/lineUtil.js';
   $span.css('min-width', '25px')
        .css('height', 'auto')
        .css('width', 'auto')
-       .css('line-height', '14px')
        .css('display', 'inline-block')
        .css('text-align', 'right')
+       .css('line-height', '25px')
        .css('float', 'left')
        .css('margin-right', '0');
   let $optionBox = generateJudgeOptions();
@@ -126,7 +126,7 @@ import { gennerOneLine } from '../util/lineUtil.js';
   */
  function generateJudgeOptions () {
     let $box = $('<div class="lsiten-options-box"></div>');
-    $box.css('display', 'inline-block').css('float', 'left').css('width', 'auto').css('font-size', '0');
+    $box.css('display', 'inline-block').css('float', 'left').css('width', 'auto').css('line-height', '25px');
     let $right = $('<div class="lsiten-option">√</div>');
     $right.css('border', '1px solid #000')
            .css('text-align', 'center')

src/js/question/questionhead.js

@@ -220,7 +220,7 @@ function headType2 (noCount, data, pindex) {
   $basic.css('border-right', 'none')
   $basicInfo.append($basic);
   let $tips = $('<div class="js-answer-head-tips"></div>');
-  $tips.css('padding', '15px 0').css('float', 'left');
+  $tips.css('padding', '18px 0').css('float', 'left');
   $tips.html(tipsTemplate);
   
   $leftBox.append($basicInfo);

src/js/util/ajax.js

@@ -33,9 +33,9 @@ Ajax.prototype = {
       xhr.onreadystatechange = function() {
         if (parseInt(xhr.readyState) === 4) {
           if (parseInt(xhr.status) === 200 || parseInt(xhr.status) === 304) {
-            resolve(JSON.parse(xhr.responseText));
+            resolve(xhr.responseText ? JSON.parse(xhr.responseText) : 1);
           } else {
-            reject(JSON.parse(xhr.responseText));
+            reject(xhr.responseText ? JSON.parse(xhr.responseText) : 0);
           }
         }
       };

src/js/util/lineUtil.js

@@ -7,7 +7,7 @@ export function gennerOneLine(pnum, lineheight) {
   let content = pnum || '<br/>';
   lineheight = lineheight || 25;
   let line = $('<div class="js-lsiten-line" contenteditable="true">' + content + '</div>');
-  line.css('outline', 'none').css('width', '100%').css('height', 'auto').css('line-height', lineheight + 'px').css('overflow', 'hidden').css('white-space', 'nowrap');
+  line.css('outline', 'none').css('width', '100%').css('vertical-align', 'bottom').css('height', 'auto').css('line-height', lineheight + 'px').css('overflow', 'hidden').css('white-space', 'nowrap');
   return line;
 }
 

src/js/util/paste-handle.js

@@ -20,7 +20,6 @@ export function getPasteText(e) {
 }
 // 获取粘贴的html
 export function getPasteHtml(e, filterStyle, ignoreImg) {
-    debugger;
     const clipboardData = e.clipboardData || (e.originalEvent && e.originalEvent.clipboardData)
     let pasteText, pasteHtml
     if (clipboardData == null) {

src/js/util/util.js

@@ -208,19 +208,26 @@ export function throttleSimple(fn, delay){
   return new Promise((resolve, reject) => {
     let Api = new Ajax();
     // 1、获取Policy
-    Api.post(policyUrl, []).then(data => {
+    Api.post(policyUrl, 'inType=41&inFiletype=' + (file.name.substring((file.name.lastIndexOf(".") + 1))) ).then(data => {
       let responce = data;
       if (responce.result === '00') {
         let resData = responce.data;
         let formdata = new  window.FormData();
-        formdata.append('key', resData.dir + resData.filename.substring(0,resData.filename.lastIndexOf("/")) + file.name);
+        formdata.append('key', resData.dir + resData.filename + (file.name.substring((file.name.lastIndexOf(".")))));
         formdata.append('policy', resData.policy);
         formdata.append('OSSAccessKeyId', resData.accessid);
-        formdata.append('callback', resData.callback);
+        formdata.append('success_action_status', 200);
         formdata.append('signature', resData.signature);
         formdata.append('file', file);
         Api.post(resData.host, formdata, 'formdata').then(data => {
-          resolve(data);
+          let returndata = {
+            result: '00',
+            data: {
+              url: decodeURI(resData.url),
+              urlStore: resData.urlStore
+            }
+          }
+          resolve(returndata);
         }).catch(err => {
           reject(err);
         })

src/js/yzPage.js

@@ -1157,13 +1157,13 @@ yzPage.prototype = {
                   if (qustionType === 3) {
                     let $prevSubject = $(item).clone(false);
                     this._prevSubjectQuestion($prevSubject, size, $(item), false);
-                    if (!isEmptyElement($prevSubject)) {
+                    if (!isEmptyElement($prevSubject[0])) {
                       $prevBorderContent[0].appendChild($prevSubject[0]);
                     }
                   } else if (qustionType === 4) {
                     let $prevWritting = $(item).clone(false);                 
                     this._prevWrittingQuestion($prevWritting, size, $(item), false);
-                    if (!isEmptyElement($prevWritting)) {
+                    if (!isEmptyElement($prevWritting[0])) {
                       $prevBorderContent[0].appendChild($prevWritting[0]);
                     }
                   } else {
@@ -1216,13 +1216,13 @@ yzPage.prototype = {
               if (qustionType === 3) {
                 let $prevSubject = $(item).clone(false);                 
                 this._prevSubjectQuestion($prevSubject, size, $(item), false);
-                if (!isEmptyElement($prevSubject)) {
+                if (!isEmptyElement($prevSubject[0])) {
                   $prevBorderContent.appendChild($prevSubject[0]);
                 }
               } else if (qustionType === 4) {
                 let $prevWritting = $(item).clone(false);                 
                 this._prevWrittingQuestion($prevWritting, size, $(item), false);
-                if (!isEmptyElement($prevWritting)) {
+                if (!isEmptyElement($prevWritting[0])) {
                   $prevBorderContent.appendChild($prevWritting[0]);
                 }
               } else {

src/js/yzPageManager.js

@@ -1,6 +1,6 @@
 import $ from './util/dom-core.js';
 import { gennerOneLine } from './util/lineUtil.js';
-import { getPasteImgs } from './util/paste-handle.js';
+import { getPasteText, getPasteHtml, getPasteImgs } from './util/paste-handle.js';
 import imgUtl from './util/imageUtil.js'
 import Jquery from 'jquery';
 import yzPage from './yzPage.js';
@@ -234,11 +234,44 @@ yzPageManager.prototype = {
     this._writtingHandleEvent();
 
     this._imgHandle();
+    this._purseTextHandle();
     this._scrollEvent();
     this._resizeEvent();
     this._dragEvent();
   },
   /**
+   * function 文本框事件处理
+   */
+  _purseTextHandle: function () {
+    const $textElem = this.$el;
+    // 为图片增加 selected 样式
+    let $delete = $('<div class="js-lsiten-text-delete">删除</div>');
+    Jquery($textElem[0]).on('focus', '.js-pure-text', function (e) {
+      let ele = e.currentTarget;
+      let $text = Jquery(ele);
+      if (!$text.find('.js-lsiten-text-delete') || !$text.find('.js-lsiten-text-delete').length) {
+        $delete =  $('<div class="js-lsiten-text-delete">删除</div>');
+        $delete.css('position', 'absolute').css('display', 'inline-block').css('right', '-10px').css('z-index', '999').css('width', 'auto').css('top', '-25px').css('cursor', 'pointer');
+        $text.css('border', '1px dashed #efefef').css('border-radius', '3px');
+        $text.append($delete);
+        $delete.on('click', function (event) {
+          $text.remove();
+          Jquery($textElem[0]).trigger('removeContent');
+          event.stopPropagation();
+        })
+      }
+    })
+    // 去掉 selected 样式
+    Jquery($textElem[0]).on('click', e => {
+      let ele = e.target;
+      let pureText = getParentNodeByClass(ele, 'js-pure-text');
+      if (!pureText) {
+        $textElem.find('.js-pure-text').css('border', 'none').css('border-radius', '0');
+        $delete.remove();
+      }
+    })
+  },
+  /**
    * function 框相关事件
    */
   _borderEvent: function () {
@@ -329,11 +362,12 @@ yzPageManager.prototype = {
         if (pageIndex > -1) {
           let currentPage = this.pages[pageIndex];
           if (currentPage) {
-            let $paragraph = $('<div class="js-paragraph-view"></div>');
+            let $paragraph = $('<div class="js-paragraph-view js-pure-text"></div>');
             $paragraph.append(gennerOneLine());
             $paragraph.css('margin', 0)
                       .css('padding', '0 25px')
                       .css('outline', 'none')
+                      .css('position', 'relative')
                       .css('box-sizing', 'border-box')
                       .css('white-space', 'pre-wrap')
                       .css('line-height', '1.75')
@@ -1171,6 +1205,10 @@ yzPageManager.prototype = {
     })
     // 粘贴图片、文本的事件，每次只能执行一个
     // 判断该次粘贴事件是否可以执行
+    const config = editor.config;
+    const pasteFilterStyle = config.pasteFilterStyle;
+    const pasteTextHandle = config.pasteTextHandle;
+    const ignoreImg = config.pasteIgnoreImg;
     let pasteTime = 0
     function canDo() {
         var now = Date.now()
@@ -1182,6 +1220,57 @@ yzPageManager.prototype = {
         pasteTime = now
         return flag
     }
+
+    function resetTime() {
+        pasteTime = 0
+    }
+
+    // 粘贴文字
+    $textElem.on('paste', e => {
+        if (UA.isIE()) {
+            return
+        } else {
+            // 阻止默认行为，使用 execCommand 的粘贴命令
+            e.preventDefault()
+        }
+
+        // 粘贴图片和文本，只能同时使用一个
+        if (!canDo()) {
+            return
+        }
+
+        // 获取粘贴的文字
+        let pasteHtml = getPasteHtml(e, pasteFilterStyle, ignoreImg)
+        let pasteText = getPasteText(e)
+        pasteText = pasteText.replace(/\n/gm, '<br>')
+
+        const $selectionElem = editor.selection.getSelectionContainerElem()
+        if (!$selectionElem) {
+            return
+        }
+        if (!pasteHtml) {
+            // 没有内容，可继续执行下面的图片粘贴
+            resetTime()
+            return
+        }
+        try {
+            // firefox 中，获取的 pasteHtml 可能是没有 <ul> 包裹的 <li>
+            // 因此执行 insertHTML 会报错
+            if (pasteTextHandle && isFunction(pasteTextHandle)) {
+                // 用户自定义过滤处理粘贴内容
+                pasteHtml = '' + (pasteTextHandle(pasteHtml) || '')
+            }
+            editor.cmd.do('insertHTML', pasteHtml)
+        } catch (ex) {
+            // 此时使用 pasteText 来兼容一下
+            if (pasteTextHandle && isFunction(pasteTextHandle)) {
+                // 用户自定义过滤处理粘贴内容
+                pasteText = '' + (pasteTextHandle(pasteText) || '')
+            }
+            editor.cmd.do('insertHTML', `<p>${pasteText}</p>`)
+        }
+    })
+
     // 粘贴图片
     $textElem.on('paste', e => {
         if (UA.isIE()) {
@@ -1210,6 +1299,8 @@ yzPageManager.prototype = {
         // 上传图片
         _this._uploadFiles(pasteFiles);
     })
+
+    
   },
 
   /**
@@ -1517,8 +1608,14 @@ yzPageManager.prototype = {
         let $drag = _this._$drageDiv;        
         let borderSize = $drag.getSizeData();
         if (templatePosition.type === 5) {
+          // debugger;
           let imageLeft = parseInt(borderSize.left - borderBoxSize.left);
           let imageTop =  parseInt(borderSize.top - borderBoxSize.top);
+          imageLeft = (imageLeft + borderImgBoxSize.width + 4) > borderBoxSize.width ? (borderBoxSize.width - borderImgBoxSize.width -4) : imageLeft;
+          imageTop = (imageTop + borderImgBoxSize.height + 4) > borderBoxSize.height ? (borderBoxSize.height - borderImgBoxSize.height -4) : imageTop;
+
+          imageLeft < 0 && (imageLeft = 0);
+          imageTop < 0 && (imageTop = 0);
           $img.css('left', imageLeft + 'px').css('top', imageTop + 'px');
         } else {
           let width = parseInt(borderSize.width) - 6;
@@ -1535,8 +1632,10 @@ yzPageManager.prototype = {
         let position = $img.getSizeData();
         $drag.css('left', (position.x - 3) + 'px')
             .css('top', (position.y - 3) + 'px');
+        let $handleImg = _this._$handleImg;
         _this._$handleImg = null;
         _this._$drageDiv.hide();
+        $handleImg[0].click();
       }
 
       templatePosition = {
@@ -1599,6 +1698,7 @@ yzPageManager.prototype = {
     } else {
       selection.setEmptyRange();
     }
+    this.editor.menus.changeActive();
   },
   /**
    * function 拖拽事件

src/less/main.less

@@ -41,6 +41,7 @@
       // box-sizing: content-box;
       height: auto;
       width: 100%;
+      vertical-align: baseline;
     }
     // .page-break {
     //   position: absolute;