|
@@ -1,8 +1,10 @@
|
|
|
import $ from './util/dom-core.js';
|
|
|
import { gennerOneLine } from './util/lineUtil.js';
|
|
|
+import { getPasteImgs } from './util/paste-handle.js';
|
|
|
+import imgUtl from './util/imageUtil.js'
|
|
|
import Jquery from 'jquery';
|
|
|
import yzPage from './yzPage.js';
|
|
|
-import { UA, isFunction, replaceHtmlSymbol, getParentByClassname, trim, throttle, isEmptyElement, getParentNodeByClass } from './util/util.js';
|
|
|
+import { UA, arrForEach, isFunction, replaceHtmlSymbol, getParentByClassname, trim, throttle, isEmptyElement, getParentNodeByClass, uploadToAliyun } from './util/util.js';
|
|
|
|
|
|
let yzPageManager = function (editor) {
|
|
|
this.editor = editor;
|
|
@@ -34,6 +36,8 @@ yzPageManager.prototype = {
|
|
|
this._addPage();
|
|
|
}
|
|
|
this._initEvents();
|
|
|
+
|
|
|
+ this._initDrageDiv();
|
|
|
},
|
|
|
/**
|
|
|
* function 初始化编辑后的数据
|
|
@@ -61,6 +65,25 @@ yzPageManager.prototype = {
|
|
|
this.$el.html('');
|
|
|
this.pageIndex = 0;
|
|
|
},
|
|
|
+ getPagePlaceholderTemlpate: function (pageIndex) {
|
|
|
+ // 添加分页显示效果
|
|
|
+ let $breakDiv = $('<div class="page-break" data-page-id="' + (pageIndex) + '"></div>');
|
|
|
+ let $topSpan = $('<div class="spanMark topSpan">​</div>');
|
|
|
+ $topSpan.css('display', 'block').css('height', '71.5px');
|
|
|
+ // 分页符
|
|
|
+ let $middleSpan = $('<div class="spanMark middleSpan lsiten-page-break-span">​</div>');
|
|
|
+ $middleSpan.css('page-break-before', 'always');
|
|
|
+ $middleSpan.css('display', 'block').css('height', '0');
|
|
|
+ let $bottomSpan = $('<div class="spanMark bottomSpan">​</div>');
|
|
|
+ $bottomSpan.css('height', '71.5px').css('display', 'block');
|
|
|
+
|
|
|
+ // 添加页眉页脚
|
|
|
+ $breakDiv.append($topSpan);
|
|
|
+ $breakDiv.append($middleSpan);
|
|
|
+ $breakDiv.append($bottomSpan);
|
|
|
+ $breakDiv.css('height', '153px');
|
|
|
+ return $breakDiv;
|
|
|
+ },
|
|
|
/**
|
|
|
* function 初始化页面的样式
|
|
|
*/
|
|
@@ -132,7 +155,7 @@ yzPageManager.prototype = {
|
|
|
this.$el.css('height', height + 'px');
|
|
|
},
|
|
|
|
|
|
- _checkEveryPageOut: function () {
|
|
|
+ _checkEveryPageOut: function (callback) {
|
|
|
if (this._checkPageOutStatus) {
|
|
|
return false;
|
|
|
}
|
|
@@ -141,13 +164,16 @@ yzPageManager.prototype = {
|
|
|
pages.forEach(page => {
|
|
|
page._checkContentOut();
|
|
|
});
|
|
|
+ if (typeof callback === 'function') {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
this._checkPageOutStatus = false;
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* function 检测是否有空页并删除
|
|
|
*/
|
|
|
- _checkEveryPageBack: function () {
|
|
|
+ _checkEveryPageBack: function (callback) {
|
|
|
if (this._checkPageBackStatus) {
|
|
|
return false;
|
|
|
}
|
|
@@ -156,6 +182,9 @@ yzPageManager.prototype = {
|
|
|
pages.forEach(page => {
|
|
|
page._checkContentBack();
|
|
|
});
|
|
|
+ if (typeof callback === 'function') {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
this._checkPageBackStatus = false;
|
|
|
},
|
|
|
|
|
@@ -200,6 +229,14 @@ yzPageManager.prototype = {
|
|
|
|
|
|
// 框内事件菜单
|
|
|
this._borderEvent();
|
|
|
+
|
|
|
+
|
|
|
+ this._writtingHandleEvent();
|
|
|
+
|
|
|
+ this._imgHandle();
|
|
|
+ this._scrollEvent();
|
|
|
+ this._resizeEvent();
|
|
|
+ this._dragEvent();
|
|
|
},
|
|
|
/**
|
|
|
* function 框相关事件
|
|
@@ -272,6 +309,8 @@ yzPageManager.prototype = {
|
|
|
*/
|
|
|
_commonMenus: function ($menu, $border) {
|
|
|
// 添加文本框开始
|
|
|
+ const message = this.editor.message;
|
|
|
+ const $textElem = this.$el;
|
|
|
let $addText = $('<div>加文本框</div>');
|
|
|
$addText.css('cursor', 'pointer')
|
|
|
.css('text-align', 'center')
|
|
@@ -316,6 +355,58 @@ yzPageManager.prototype = {
|
|
|
$menu[0].blur();
|
|
|
})
|
|
|
// 添加文本框结束
|
|
|
+
|
|
|
+ // 更改框行高开始
|
|
|
+ let $addLineHeight = $('<div>修改行高</div>');
|
|
|
+ $addLineHeight.css('cursor', 'pointer')
|
|
|
+ .css('text-align', 'center')
|
|
|
+ .css('border-bottom', '1px solid #e8e3e3')
|
|
|
+ .css('padding', '5px 0');
|
|
|
+ $menu.append($addLineHeight);
|
|
|
+ $addLineHeight.on('click', () => {
|
|
|
+ // 表单
|
|
|
+ let lineheight = parseInt($border[0].getAttribute('data-blineheight'));
|
|
|
+ lineheight = lineheight ? lineheight : 25;
|
|
|
+ let $form = $('<form class="form"></form>');
|
|
|
+ let $item1 = $('<div class="form-item"><span class="label">行高:</span><select name="blineheight">\
|
|
|
+ <option value="18" ' + ((lineheight === 18) ? 'selected' : '') + '>18px</option>\
|
|
|
+ <option value="20" ' + ((lineheight === 20) ? 'selected' : '') + '>20px</option>\
|
|
|
+ <option value="25" ' + ((lineheight === 25) ? 'selected' : '') + '>25px</option>\
|
|
|
+ <option value="30" ' + ((lineheight === 30) ? 'selected' : '') + '>30px</option>\
|
|
|
+ <option value="38" ' + ((lineheight === 38) ? 'selected' : '') + '>38px</option>\
|
|
|
+ <option value="44" ' + ((lineheight === 44) ? 'selected' : '') + '>44px</option>\
|
|
|
+ <option value="50" ' + ((lineheight === 50) ? 'selected' : '') + '>50px</option>\
|
|
|
+ </select></div>');
|
|
|
+ $form.append($item1);
|
|
|
+ // button
|
|
|
+ let $buttons = [];
|
|
|
+ let $cancel = $('<span class="lsiten-message-button lsiten-message-cancel-button">取消</span>');
|
|
|
+ $cancel.on('click', function () {
|
|
|
+ message.hideMessage();
|
|
|
+ })
|
|
|
+ let $success = $('<span class="lsiten-message-button lsiten-message-success-button">确定</span>');
|
|
|
+ $success.on('click', () => {
|
|
|
+ let lineheightValue = $item1.find('select').val();
|
|
|
+ $border.attr('data-blineheight', lineheightValue);
|
|
|
+ $border.find('.js-lsiten-line').css('line-height', lineheightValue + 'px');
|
|
|
+ Jquery($textElem[0]).trigger('addContent', () => {
|
|
|
+ Jquery($textElem[0]).trigger('removeContent');
|
|
|
+ });
|
|
|
+ message.hideMessage();
|
|
|
+ })
|
|
|
+ $buttons.push($cancel);
|
|
|
+ $buttons.push($success);
|
|
|
+ // 2、打开对话框,填写修改的字数
|
|
|
+ message.showMessage({options:{
|
|
|
+ type: 'dialog',
|
|
|
+ $buttons: $buttons,
|
|
|
+ title: '框行高-修改',
|
|
|
+ width: 500,
|
|
|
+ content: $form
|
|
|
+ }})
|
|
|
+ $menu[0].blur();
|
|
|
+ })
|
|
|
+ // 添加文本框结束
|
|
|
// 删除开始
|
|
|
// let $delete = $('<div>删除框</div>');
|
|
|
// $delete.css('cursor', 'pointer')
|
|
@@ -408,6 +499,32 @@ yzPageManager.prototype = {
|
|
|
return prevPage.$colums[lastColumnIndex] || false;
|
|
|
}
|
|
|
},
|
|
|
+ /**
|
|
|
+ * function 获取下一栏
|
|
|
+ */
|
|
|
+ _getNextColumn: function ($column) {
|
|
|
+ let next = $column[0].nextSibling;
|
|
|
+ let pageIndex = parseInt($column.attr('data-column-page')) + 1;
|
|
|
+ if (next) {
|
|
|
+ if (next.className && next.className.indexOf('js-column') > -1) {
|
|
|
+ return $(next);
|
|
|
+ } else {
|
|
|
+ if (this.pages.length <= pageIndex) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ let nextPage = this.pages[pageIndex];
|
|
|
+ return nextPage.$colums[0] || false;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (this.pages.length <= pageIndex) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ let nextPage = this.pages[pageIndex];
|
|
|
+ return nextPage.$colums[0] || false;
|
|
|
+ }
|
|
|
+ },
|
|
|
// 获得该框以上的框
|
|
|
_findPrevBorders: function ($border) {
|
|
|
let $paragraph = getParentByClassname($border, 'js-paragraph-view');
|
|
@@ -686,12 +803,12 @@ yzPageManager.prototype = {
|
|
|
const $textElem = this.$el;
|
|
|
const editor =this.editor;
|
|
|
let _this = this;
|
|
|
- Jquery($textElem[0]).on('addContent', function (e) {
|
|
|
- _this._checkEveryPageOut();
|
|
|
+ Jquery($textElem[0]).on('addContent', function (e, callback) {
|
|
|
+ _this._checkEveryPageOut(callback);
|
|
|
})
|
|
|
|
|
|
- Jquery($textElem[0]).on('removeContent', function (e) {
|
|
|
- _this._checkEveryPageBack();
|
|
|
+ Jquery($textElem[0]).on('removeContent', function (e, callback) {
|
|
|
+ _this._checkEveryPageBack(callback);
|
|
|
})
|
|
|
},
|
|
|
/**
|
|
@@ -701,14 +818,24 @@ yzPageManager.prototype = {
|
|
|
const $textElem = this.$el;
|
|
|
const editor =this.editor;
|
|
|
let _this = this;
|
|
|
- Jquery($textElem[0]).on('keydown', function (e) {
|
|
|
+ Jquery($textElem[0]).on('keydown', function (e) {
|
|
|
if (e.keyCode !== 46) {
|
|
|
// 不是回车键
|
|
|
return '';
|
|
|
}
|
|
|
+ if (_this._$handleImg) {
|
|
|
+ _this._$handleImg.remove();
|
|
|
+ _this._$handleImg = null;
|
|
|
+ _this._$drageDiv.hide();
|
|
|
+ e.preventDefault();
|
|
|
+ return '';
|
|
|
+ }
|
|
|
if (getParentByClassname($(e.target), 'js-answer-header-title')) {
|
|
|
return '';
|
|
|
}
|
|
|
+ if (getParentByClassname($(e.target), 'lsiten-e-message-body-content')) {
|
|
|
+ return '';
|
|
|
+ }
|
|
|
let $currentLine = _this.editorPosition.currentLine;
|
|
|
if ($currentLine) {
|
|
|
let selection = _this.editor.selection;
|
|
@@ -739,9 +866,20 @@ yzPageManager.prototype = {
|
|
|
// 不是回车键
|
|
|
return '';
|
|
|
}
|
|
|
+ if (_this._$handleImg) {
|
|
|
+ _this._$handleImg.remove();
|
|
|
+ _this._$handleImg = null;
|
|
|
+ _this._$drageDiv.hide();
|
|
|
+ e.preventDefault();
|
|
|
+ return '';
|
|
|
+ }
|
|
|
if (getParentByClassname($(e.target), 'js-answer-header-title')) {
|
|
|
return '';
|
|
|
}
|
|
|
+
|
|
|
+ if (getParentByClassname($(e.target), 'lsiten-e-message-body-content')) {
|
|
|
+ return '';
|
|
|
+ }
|
|
|
let $currentLine = _this.editorPosition.currentLine;
|
|
|
if ($currentLine) {
|
|
|
if (isEmptyElement($currentLine[0])) {
|
|
@@ -778,6 +916,11 @@ yzPageManager.prototype = {
|
|
|
let $currentLine = _this.editorPosition.currentLine;
|
|
|
if ($currentLine) {
|
|
|
let $newLine = gennerOneLine();
|
|
|
+ let $borderContent = getParentByClassname($currentLine, 'js-lsiten-border');
|
|
|
+ if ($borderContent) {
|
|
|
+ let lineHeight = $borderContent[0].getAttribute('data-blineheight');
|
|
|
+ $newLine = gennerOneLine(false, lineHeight);
|
|
|
+ }
|
|
|
$newLine.insertAfter($currentLine);
|
|
|
$newLine.focus();
|
|
|
}
|
|
@@ -812,6 +955,605 @@ yzPageManager.prototype = {
|
|
|
Jquery($textElem[0]).off('mouseleave', realTimeSave);
|
|
|
})
|
|
|
},
|
|
|
+
|
|
|
+ // 作文题处理
|
|
|
+ _writtingHandleEvent: function () {
|
|
|
+ // 为图片增加 selected 样式
|
|
|
+ Jquery(this.editor.$editorArea[0]).on('contextmenu','.lsiten-question-writing', (e) => {
|
|
|
+ let ele = e.target || e.srcElement;
|
|
|
+ let message = this.editor.message;
|
|
|
+ let _this = this;
|
|
|
+ let writting = getParentNodeByClass(ele, 'lsiten-question-writing');
|
|
|
+ if (writting) {
|
|
|
+ let $writting = $(writting);
|
|
|
+ let menus = [
|
|
|
+ {
|
|
|
+ name: "修改",
|
|
|
+ click: function ($el) {
|
|
|
+ $el.on('click', () => {
|
|
|
+ let pnum = $writting.attr('data-pnum');
|
|
|
+ let total = parseInt($writting.attr('data-total'));
|
|
|
+ // 表单
|
|
|
+ let $form = $('<form class="form"></form>');
|
|
|
+ let $item1 = $('<div class="form-item"><span class="label">题号:</span><span>' + pnum + '</span></div>');
|
|
|
+ let $item2 = $('<div class="form-item"><span class="label">格子数:</span><input value = " ' + total + ' " type="text" placeholder="请输入总共多少个格子" class="block"/></div>');
|
|
|
+ $form.append($item1);
|
|
|
+ $form.append($item2);
|
|
|
+ // button
|
|
|
+ let $buttons = [];
|
|
|
+ let $cancel = $('<span class="lsiten-message-button lsiten-message-cancel-button">取消</span>');
|
|
|
+ $cancel.on('click', function () {
|
|
|
+ message.hideMessage();
|
|
|
+ })
|
|
|
+ let $success = $('<span class="lsiten-message-button lsiten-message-success-button">确定</span>');
|
|
|
+
|
|
|
+ function sureClick () {
|
|
|
+ message.hideMessage();
|
|
|
+ let total = parseInt($item2.find('input').val());
|
|
|
+ if (total > 3000 || total < 1) {
|
|
|
+ message.showMessage('错误:字数应在1-3000内');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ // 重新生成作文题框
|
|
|
+
|
|
|
+ // 找到整个题框,并删除
|
|
|
+ // 1、判断是否是跨栏框
|
|
|
+ let writingClass = $writting.attr('class');
|
|
|
+
|
|
|
+ if (writingClass.indexOf('js-split-question') > -1) {
|
|
|
+ let $prevQuestions = _this._findPrevQustions($writting, 4);
|
|
|
+ let $nextQuestions = _this._findNextQustions($writting, 4);
|
|
|
+ let lastIndex = $prevQuestions.length - 1;
|
|
|
+ let questionBasic = lastIndex >= 0 ? $prevQuestions[lastIndex] : $writting[0];
|
|
|
+ let $borderBasic = $(questionBasic).parent();
|
|
|
+ let lineHeight = $borderBasic.parent()[0].getAttribute('data-blineheight');
|
|
|
+ $prevQuestions.forEach(item => {
|
|
|
+ let $item = $(item);
|
|
|
+ let $borderContent = $item.parent();
|
|
|
+ $item.remove();
|
|
|
+ if (isEmptyElement($borderContent)) {
|
|
|
+ let $border = $borderContent.parent();
|
|
|
+ if (!$borderBasic.equal($borderContent)) {
|
|
|
+ let $paragraphTemp = $border.parent();
|
|
|
+ $border.remove();
|
|
|
+ if (isEmptyElement($paragraphTemp)) {
|
|
|
+ $paragraphTemp.remove();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ $nextQuestions.forEach(item => {
|
|
|
+ let $item = $(item);
|
|
|
+ let $borderContent = $item.parent();
|
|
|
+ $item.remove();
|
|
|
+ if (isEmptyElement($borderContent)) {
|
|
|
+ let $paragraphTemp = $borderContent.parent().parent();
|
|
|
+ $borderContent.parent().remove();
|
|
|
+ if (isEmptyElement($paragraphTemp)) {
|
|
|
+ $paragraphTemp.remove();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ let $borderWrittingContent = $writting.parent();
|
|
|
+ $writting.remove();
|
|
|
+ if (isEmptyElement($borderWrittingContent)) {
|
|
|
+ let $borderWritting = $borderWrittingContent.parent()
|
|
|
+ if (!$borderBasic.equal($borderWrittingContent)) {
|
|
|
+ let $paragraphTemp = $borderWritting.parent();
|
|
|
+ $borderWritting.remove();
|
|
|
+ if (isEmptyElement($paragraphTemp)) {
|
|
|
+ $paragraphTemp.remove();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ _this._checkRemovePage();
|
|
|
+ let $onelineBasic = gennerOneLine(false, lineHeight);
|
|
|
+ $borderBasic.append($onelineBasic);
|
|
|
+ _this._updatePositionInfo(null, $onelineBasic);
|
|
|
+ } else {
|
|
|
+ let $borderWrittingContent = $writting.parent();
|
|
|
+ $writting.remove();
|
|
|
+ let $onelineBasic = gennerOneLine(false, lineHeight);
|
|
|
+ $borderWrittingContent.append($onelineBasic);
|
|
|
+ _this._updatePositionInfo(null, $onelineBasic);
|
|
|
+ }
|
|
|
+
|
|
|
+ _this.editor.cmd.do('questiontype', {type: 4, data: {
|
|
|
+ pnum: pnum,
|
|
|
+ nums: total,
|
|
|
+ visible: true
|
|
|
+ }});
|
|
|
+ }
|
|
|
+ $success.on('click', function () {
|
|
|
+ sureClick();
|
|
|
+ })
|
|
|
+ Jquery(document).on('keydown', function(event) {
|
|
|
+ if (event.keyCode !== 13) {
|
|
|
+ // 不是回车键
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+ if (Jquery(message.$el[0]).css('display') === 'block') {
|
|
|
+ sureClick();
|
|
|
+ event.preventDefault();
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ $buttons.push($cancel);
|
|
|
+ $buttons.push($success);
|
|
|
+ // 1、关闭右击menu
|
|
|
+ let $contentMenu = getParentByClassname($el, 'js-lsiten-contentmenus');
|
|
|
+ // 2、打开对话框,填写修改的字数
|
|
|
+ message.showMessage({options:{
|
|
|
+ type: 'dialog',
|
|
|
+ $buttons: $buttons,
|
|
|
+ title: '作文题-修改',
|
|
|
+ width: 500,
|
|
|
+ content: $form
|
|
|
+ }})
|
|
|
+ if ($contentMenu.length) {
|
|
|
+ try {
|
|
|
+ $contentMenu.remove();
|
|
|
+ } catch (error) {
|
|
|
+ // console.log(error);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ this._createContextMenu(e, menus);
|
|
|
+ e.stopImmediatePropagation();
|
|
|
+ } else {
|
|
|
+ console.log('c%error: no writting box', 'color:red');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 滚动事件监听
|
|
|
+ _scrollEvent: function () {
|
|
|
+ let _this = this;
|
|
|
+ Jquery(this.editor.$editorArea[0]).on('scroll', () => {
|
|
|
+ if (_this._$handleImg) {
|
|
|
+ _this._$handleImg = null;
|
|
|
+ _this._$drageDiv.hide();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 滚动事件监听
|
|
|
+ _resizeEvent: function () {
|
|
|
+ let _this = this;
|
|
|
+ Jquery(window).on('resize', () => {
|
|
|
+ if (_this._$handleImg) {
|
|
|
+ _this._$handleImg = null;
|
|
|
+ _this._$drageDiv.hide();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ _gennerateDragBox: function ($dom) {
|
|
|
+ let position = $dom.getSizeData();
|
|
|
+ let $drag = this._$drageDiv;
|
|
|
+ $drag.css('left', (position.x - 3) + 'px')
|
|
|
+ .css('top', (position.y - 3) + 'px')
|
|
|
+ .css('width', (position.width + 6) + 'px')
|
|
|
+ .css('height', (position.height + 6) + 'px');
|
|
|
+ $drag.show();
|
|
|
+ },
|
|
|
+ // 图片处理
|
|
|
+ _imgHandle: function () {
|
|
|
+ const $textElem = this.$el;
|
|
|
+ const _this = this;
|
|
|
+ const editor = this.editor;
|
|
|
+ Jquery($textElem[0]).on('dragstart, dragend', 'img', function (e) {
|
|
|
+ e.preventDefault();
|
|
|
+ })
|
|
|
+ // 为图片增加 selected 样式
|
|
|
+ $textElem.on('click', 'img', function (e) {
|
|
|
+ let ele = e.target || e.srcElement;
|
|
|
+ let $img = $(ele);
|
|
|
+ if (ele.className && ele.className.indexOf('lsiten-js-image-class') > -1) {
|
|
|
+ _this._$handleImg = $img;
|
|
|
+ _this._gennerateDragBox($img);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // 去掉图片的 selected 样式
|
|
|
+ $textElem.on('click keyup', e => {
|
|
|
+ if (e.target.matches('img')) {
|
|
|
+ // 点击的是图片,忽略
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+ let $drag = this._$drageDiv;
|
|
|
+ _this._$handleImg = null;
|
|
|
+ $drag.hide();
|
|
|
+ })
|
|
|
+ // 粘贴图片、文本的事件,每次只能执行一个
|
|
|
+ // 判断该次粘贴事件是否可以执行
|
|
|
+ let pasteTime = 0
|
|
|
+ function canDo() {
|
|
|
+ var now = Date.now()
|
|
|
+ var flag = false
|
|
|
+ if (now - pasteTime >= 100) {
|
|
|
+ // 间隔大于 100 ms ,可以执行
|
|
|
+ flag = true
|
|
|
+ }
|
|
|
+ pasteTime = now
|
|
|
+ return flag
|
|
|
+ }
|
|
|
+ // 粘贴图片
|
|
|
+ $textElem.on('paste', e => {
|
|
|
+ if (UA.isIE()) {
|
|
|
+ return '';
|
|
|
+ } else {
|
|
|
+ e.preventDefault();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 粘贴图片和文本,只能同时使用一个
|
|
|
+ if (!canDo()) {
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+
|
|
|
+ // 获取粘贴的图片
|
|
|
+ const pasteFiles = getPasteImgs(e);
|
|
|
+ if (!pasteFiles || !pasteFiles.length) {
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+
|
|
|
+ // 获取当前的元素
|
|
|
+ const $currentLine = this.editorPosition.currentLine;
|
|
|
+ if (!$currentLine) {
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+
|
|
|
+ // 上传图片
|
|
|
+ _this._uploadFiles(pasteFiles);
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * function 上传图片
|
|
|
+ * @param {array} files 图片兑现数组
|
|
|
+ */
|
|
|
+ _uploadFiles: function (files) {
|
|
|
+ if (!files || !files.length) {
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+ const editor = this.editor;
|
|
|
+ let policyUrl = editor.config.policyUrl;
|
|
|
+ const message = editor.message;
|
|
|
+ // 获取当前的元素
|
|
|
+ const $currentLine = this.editorPosition.currentLine;
|
|
|
+ if (!$currentLine) {
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+ let borderText = getParentByClassname($currentLine, 'js-lsiten-border');
|
|
|
+ let size = null;
|
|
|
+ if (borderText) {
|
|
|
+ size = borderText.getSizeData();
|
|
|
+ } else {
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+
|
|
|
+ arrForEach(files, file => {
|
|
|
+ uploadToAliyun(file, policyUrl).then(data => {
|
|
|
+ if (data.result === '00') {
|
|
|
+ let src = data.data.url;
|
|
|
+ let srcStore = data.data.urlStore;
|
|
|
+ this._doInsertImage({
|
|
|
+ src: src,
|
|
|
+ store: srcStore,
|
|
|
+ bsize: size,
|
|
|
+ border: borderText
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ message.showMessage(data.msg || '上传出错,请重试!');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ _doInsertImage: function (img) {
|
|
|
+ let imageTool = new imgUtl(img.src);
|
|
|
+ let _this = this;
|
|
|
+ imageTool.getSize(complete);
|
|
|
+ function complete() {
|
|
|
+ let owidth = imageTool.owidth;
|
|
|
+ let bsize = img.bsize;
|
|
|
+ let bwidth = bsize.width - 30;
|
|
|
+ if (owidth >= bwidth) {
|
|
|
+ let ratio = bwidth / owidth;
|
|
|
+ imageTool.resizeByRatio(ratio);
|
|
|
+ }
|
|
|
+ let oheight = imageTool.size.h;
|
|
|
+ let bheight = bsize.height - 22;
|
|
|
+ if (oheight > bheight) {
|
|
|
+ let ratio = bheight / oheight;
|
|
|
+ imageTool.resizeByRatio(ratio);
|
|
|
+ }
|
|
|
+ let html = $('<img class="lsiten-js-image-class" style="width: ' + imageTool.size.w + 'px; height: ' + imageTool.size.h + 'px" src="' + img.src + '" data-store = "' +img.store+ '"/>');
|
|
|
+ html.css('position', 'absolute').css('top', '0').css('left', '0');
|
|
|
+ img.border.append(html);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 初始化拖拽框
|
|
|
+ _initDrageDiv: function () {
|
|
|
+ this._$drageDiv = $('<div class="js-lsiten-dragbox"></div>');
|
|
|
+ this._$drageDiv.css('height', '0')
|
|
|
+ .css('width', '0')
|
|
|
+ .css('position', 'fixed')
|
|
|
+ .css('z-index', '9998')
|
|
|
+ .css('cursor', 'move')
|
|
|
+ .css('display', 'none')
|
|
|
+ .css('border', '1px dashed #5b3838');
|
|
|
+ let $delete = $('<div class="js-lsiten-dragbox-delete">删除</div>');
|
|
|
+ $delete.css('height', '14px')
|
|
|
+ .css('width', 'auto')
|
|
|
+ .css('cursor', 'pointer')
|
|
|
+ .css('right', '-20px')
|
|
|
+ .css('font-size', '12px')
|
|
|
+ .css('bottom', '-20px')
|
|
|
+ .css('position', 'absolute');
|
|
|
+ let $left = $('<div class="js-lsiten-dragbox-left"></div>');
|
|
|
+ $left.css('height', '14px')
|
|
|
+ .css('width', '14px')
|
|
|
+ .css('background', '#e1dcdc')
|
|
|
+ .css('cursor', 'nw-resize')
|
|
|
+ .css('left', '-7px')
|
|
|
+ .css('top', '-7px')
|
|
|
+ .css('position', 'absolute');
|
|
|
+
|
|
|
+ let $leftBottom = $('<div class="js-lsiten-dragbox-left-bottom"></div>');
|
|
|
+ $leftBottom.css('height', '14px')
|
|
|
+ .css('width', '14px')
|
|
|
+ .css('background', '#e1dcdc')
|
|
|
+ .css('left', '-7px')
|
|
|
+ .css('bottom', '-7px')
|
|
|
+ .css('cursor', 'sw-resize')
|
|
|
+ .css('position', 'absolute');
|
|
|
+
|
|
|
+ let $right = $('<div class="js-lsiten-dragbox-right"></div>');
|
|
|
+ $right.css('height', '14px')
|
|
|
+ .css('width', '14px')
|
|
|
+ .css('background', '#e1dcdc')
|
|
|
+ .css('right', '-7px')
|
|
|
+ .css('top', '-7px')
|
|
|
+ .css('cursor', 'ne-resize')
|
|
|
+ .css('position', 'absolute');
|
|
|
+
|
|
|
+
|
|
|
+ let $rightBottom = $('<div class="js-lsiten-dragbox-right-bottom"></div>');
|
|
|
+ $rightBottom.css('height', '14px')
|
|
|
+ .css('width', '14px')
|
|
|
+ .css('background', '#e1dcdc')
|
|
|
+ .css('right', '-7px')
|
|
|
+ .css('bottom', '-7px')
|
|
|
+ .css('cursor', 'se-resize')
|
|
|
+ .css('position', 'absolute');
|
|
|
+ this._$drageDiv.append($left);
|
|
|
+ this._$drageDiv.append($right);
|
|
|
+ this._$drageDiv.append($leftBottom);
|
|
|
+ this._$drageDiv.append($rightBottom);
|
|
|
+ this._$drageDiv.append($delete);
|
|
|
+
|
|
|
+ let _this = this;
|
|
|
+ let templatePosition = {
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ type: 0
|
|
|
+ }
|
|
|
+ $delete.on('click', () => {
|
|
|
+ if (_this._checkCrossing || _this._contentChangeStatus) {
|
|
|
+ _this._$handleImg = null;
|
|
|
+ _this._$drageDiv.hide();
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ let $img = _this._$handleImg;
|
|
|
+ if ($img) {
|
|
|
+ $img.remove();
|
|
|
+ _this._$handleImg = null;
|
|
|
+ _this._$drageDiv.hide();
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ _this._$handleImg = null;
|
|
|
+ _this._$drageDiv.hide();
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this._$drageDiv.on('mousedown', function (e) {
|
|
|
+ templatePosition = {
|
|
|
+ type: 5,
|
|
|
+ x: e.pageX,
|
|
|
+ y: e.pageY,
|
|
|
+ oPosition: {
|
|
|
+ x: e.pageX,
|
|
|
+ y: e.pageY,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ e.preventDefault();
|
|
|
+ })
|
|
|
+ $delete.on('mousedown', function (e) {
|
|
|
+ e.stopPropagation();
|
|
|
+ })
|
|
|
+ $left.on('mousedown', function (e) {
|
|
|
+ templatePosition = {
|
|
|
+ type: 1,
|
|
|
+ x: e.pageX,
|
|
|
+ y: e.pageY,
|
|
|
+ oPosition: {
|
|
|
+ x: e.pageX,
|
|
|
+ y: e.pageY,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ e.stopPropagation();
|
|
|
+ })
|
|
|
+
|
|
|
+ $leftBottom.on('mousedown', function (e) {
|
|
|
+ templatePosition = {
|
|
|
+ type: 2,
|
|
|
+ x: e.pageX,
|
|
|
+ y: e.pageY,
|
|
|
+ oPosition: {
|
|
|
+ x: e.pageX,
|
|
|
+ y: e.pageY,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ e.stopPropagation();
|
|
|
+ })
|
|
|
+
|
|
|
+ $right.on('mousedown', function (e) {
|
|
|
+ templatePosition = {
|
|
|
+ type: 3,
|
|
|
+ x: e.pageX,
|
|
|
+ y: e.pageY,
|
|
|
+ oPosition: {
|
|
|
+ x: e.pageX,
|
|
|
+ y: e.pageY,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ e.stopPropagation();
|
|
|
+ })
|
|
|
+
|
|
|
+ $rightBottom.on('mousedown', function (e) {
|
|
|
+ templatePosition = {
|
|
|
+ type: 4,
|
|
|
+ x: e.pageX,
|
|
|
+ y: e.pageY,
|
|
|
+ oPosition: {
|
|
|
+ x: e.pageX,
|
|
|
+ y: e.pageY,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ e.stopPropagation();
|
|
|
+ })
|
|
|
+ $(document).on('mousemove', function (e) {
|
|
|
+ if (templatePosition.type === 0) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ let diffX = parseInt(e.pageX - templatePosition.x);
|
|
|
+ let diffY = parseInt(e.pageY - templatePosition.y);
|
|
|
+ let borderSize = _this._$drageDiv.getSizeData();
|
|
|
+
|
|
|
+ switch (templatePosition.type) {
|
|
|
+ case 1:
|
|
|
+
|
|
|
+ let bleft = parseInt(borderSize.left) + diffX;
|
|
|
+ let btop = parseInt(borderSize.top) + diffY;
|
|
|
+ let width = parseInt(borderSize.width) - diffX;
|
|
|
+ let height = parseInt(borderSize.height) - diffY;
|
|
|
+ if (width < 0 || height < 0) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ templatePosition.x = e.pageX;
|
|
|
+ templatePosition.y = e.pageY;
|
|
|
+ _this._$drageDiv.css('left', bleft + 'px').css('top', btop + 'px').css('width', width + 'px').css('height', height + 'px');
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+
|
|
|
+ let bleft2 = parseInt(borderSize.left) + diffX;
|
|
|
+ let bbottom2 = parseInt(borderSize.bottom) - diffY;
|
|
|
+ let width2 = parseInt(borderSize.width) - diffX;
|
|
|
+ let height2 = parseInt(borderSize.height) + diffY;
|
|
|
+ if (width2 < 0 || height2 < 0) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ templatePosition.x = e.pageX;
|
|
|
+ templatePosition.y = e.pageY;
|
|
|
+ _this._$drageDiv.css('left', bleft2 + 'px').css('bottom', bbottom2 + 'px').css('width', width2 + 'px').css('height', height2 + 'px');
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ let bright = parseInt(borderSize.right) - diffX;
|
|
|
+ let btop3 = parseInt(borderSize.top) + diffY;
|
|
|
+ let width3 = parseInt(borderSize.width) + diffX;
|
|
|
+ let height3 = parseInt(borderSize.height) - diffY;
|
|
|
+ if (width3 < 0 || height3 < 0) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ templatePosition.x = e.pageX;
|
|
|
+ templatePosition.y = e.pageY;
|
|
|
+ _this._$drageDiv.css('right', bright + 'px').css('top', btop3 + 'px').css('width', width3 + 'px').css('height', height3 + 'px');
|
|
|
+ break;
|
|
|
+ case 4:
|
|
|
+ let bright2 = parseInt(borderSize.right) - diffX;
|
|
|
+ let bbottom4 = parseInt(borderSize.top) - diffY;
|
|
|
+ let width4 = parseInt(borderSize.width) + diffX;
|
|
|
+ let height4 = parseInt(borderSize.height) + diffY;
|
|
|
+ if (width4 < 0 || height4 < 0) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ templatePosition.x = e.pageX;
|
|
|
+ templatePosition.y = e.pageY;
|
|
|
+ _this._$drageDiv.css('right', bright2 + 'px').css('bottom', bbottom4 + 'px').css('width', width4 + 'px').css('height', height4 + 'px');
|
|
|
+ break;
|
|
|
+ case 5:
|
|
|
+ let bx = parseInt(borderSize.left) + diffX;
|
|
|
+ let by = parseInt(borderSize.top) + diffY;
|
|
|
+ templatePosition = {
|
|
|
+ type: 5,
|
|
|
+ x: e.pageX,
|
|
|
+ y: e.pageY,
|
|
|
+ oPosition: templatePosition.oPosition
|
|
|
+ }
|
|
|
+ _this._$drageDiv.css('left', bx + 'px').css('top', by + 'px');
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ $(document).on('mouseup', function (e) {
|
|
|
+ if (templatePosition.type === 0) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (_this._checkCrossing || _this._contentChangeStatus) {
|
|
|
+ _this._$handleImg = null;
|
|
|
+ _this._$drageDiv.hide();
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ let $img = _this._$handleImg;
|
|
|
+
|
|
|
+ if ($img) {
|
|
|
+ let $border = getParentByClassname($img, 'js-lsiten-border');
|
|
|
+ let borderBoxSize = $border.getSizeData();
|
|
|
+ let borderImgBoxSize = $img.getSizeData();
|
|
|
+ let $drag = _this._$drageDiv;
|
|
|
+ let borderSize = $drag.getSizeData();
|
|
|
+ if (templatePosition.type === 5) {
|
|
|
+ let imageLeft = parseInt(borderSize.left - borderBoxSize.left);
|
|
|
+ let imageTop = parseInt(borderSize.top - borderBoxSize.top);
|
|
|
+ $img.css('left', imageLeft + 'px').css('top', imageTop + 'px');
|
|
|
+ } else {
|
|
|
+ let width = parseInt(borderSize.width) - 6;
|
|
|
+ let prevHeight = _this.getPrevHeight($img, $border);
|
|
|
+ let height = parseInt(borderSize.height) - 6;
|
|
|
+ let borderHeight = borderBoxSize.height - prevHeight;
|
|
|
+ let borderwidth = borderBoxSize.width;
|
|
|
+ width = width > borderwidth ? (borderwidth - 30) : width;
|
|
|
+ height = height > borderHeight ? (borderHeight - 22) : height;
|
|
|
+ $img.css('width', width + 'px').css('height', height + 'px');
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ let position = $img.getSizeData();
|
|
|
+ $drag.css('left', (position.x - 3) + 'px')
|
|
|
+ .css('top', (position.y - 3) + 'px');
|
|
|
+ _this._$handleImg = null;
|
|
|
+ _this._$drageDiv.hide();
|
|
|
+ }
|
|
|
+
|
|
|
+ templatePosition = {
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ type: 0
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.editor.$container.append(this._$drageDiv);
|
|
|
+ },
|
|
|
+ // 获取dom元素前面的高度
|
|
|
+ getPrevHeight: function ($dom, $border) {
|
|
|
+ let domSize = $dom.getSizeData();
|
|
|
+ let borderSize = $border.getSizeData();
|
|
|
+ let diff = domSize.top - borderSize.top;
|
|
|
+ return diff > 0 ? diff : 0;
|
|
|
+ },
|
|
|
/**
|
|
|
* 更新当前编辑信息
|
|
|
*/
|
|
@@ -858,6 +1600,16 @@ yzPageManager.prototype = {
|
|
|
selection.setEmptyRange();
|
|
|
}
|
|
|
},
|
|
|
+ /**
|
|
|
+ * function 拖拽事件
|
|
|
+ */
|
|
|
+ _dragEvent: function () {
|
|
|
+ // 禁用 document 拖拽事件
|
|
|
+ const $document = $(document)
|
|
|
+ $document.on('dragleave drop dragenter dragover', function (e) {
|
|
|
+ e.preventDefault()
|
|
|
+ })
|
|
|
+ },
|
|
|
_pagesWidth: {
|
|
|
'A4': '793px',
|
|
|
'A3': '1587px'
|