@lingxiteam/lcdp-ueditor-react 1.0.0-alpha.1

package/ueditor-resource/dialogs/scrawl/scrawl.css

@@ -0,0 +1,324 @@
+/*common
+*/
+body {
+    margin: 0;
+}
+
+table {
+    width: 100%;
+}
+
+table td {
+    padding: 2px 4px;
+    vertical-align: middle;
+}
+
+a {
+    text-decoration: none;
+}
+
+em {
+    font-style: normal;
+}
+
+.border_style1 {
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    box-shadow: 2px 2px 5px #d3d6da;
+}
+
+/*module
+*/
+.main {
+    margin: 8px;
+    overflow: hidden;
+}
+
+.hot {
+    float: left;
+    height: 335px;
+}
+
+.drawBoard {
+    position: relative;
+    cursor: crosshair;
+}
+
+.brushBorad {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 998;
+}
+
+.picBoard {
+    border: none;
+    text-align: center;
+    line-height: 300px;
+    cursor: default;
+}
+
+.operateBar {
+    margin-top: 10px;
+    font-size: 12px;
+    text-align: center;
+}
+
+.operateBar span {
+    margin-left: 10px;
+}
+
+.drawToolbar {
+    float: right;
+    width: 110px;
+    height: 300px;
+    overflow: hidden;
+}
+
+.colorBar {
+    margin-top: 10px;
+    font-size: 12px;
+    text-align: center;
+}
+
+.colorBar a {
+    display: block;
+    width: 10px;
+    height: 10px;
+    border: 1px solid #1006F1;
+    border-radius: 3px;
+    box-shadow: 2px 2px 5px #d3d6da;
+    opacity: 0.3
+}
+
+.sectionBar {
+    margin-top: 15px;
+    font-size: 12px;
+    text-align: center;
+}
+
+.sectionBar a {
+    display: inline-block;
+    width: 10px;
+    height: 12px;
+    color: #888;
+    text-indent: -999px;
+    opacity: 0.3
+}
+
+.size1 {
+    background: url('images/size.png') 1px center no-repeat;
+}
+
+.size2 {
+    background: url('images/size.png') -10px center no-repeat;
+}
+
+.size3 {
+    background: url('images/size.png') -22px center no-repeat;
+}
+
+.size4 {
+    background: url('images/size.png') -35px center no-repeat;
+}
+
+.addImgH {
+    position: relative;
+}
+
+.addImgH_form {
+    position: absolute;
+    left: 18px;
+    top: -1px;
+    width: 75px;
+    height: 21px;
+    opacity: 0;
+    cursor: pointer;
+}
+
+.addImgH_form input {
+    width: 100%;
+}
+
+/*scrawl遮罩层
+*/
+.maskLayerNull {
+    display: none;
+}
+
+.maskLayer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.7;
+    background-color: #fff;
+    text-align: center;
+    font-weight: bold;
+    line-height: 300px;
+    z-index: 1000;
+}
+
+/*btn state
+*/
+.previousStepH .icon {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    background-image: url('images/undoH.png');
+    cursor: pointer;
+}
+
+.previousStepH .text {
+    color: #888;
+    cursor: pointer;
+}
+
+.previousStep .icon {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    background-image: url('images/undo.png');
+    cursor: default;
+}
+
+.previousStep .text {
+    color: #ccc;
+    cursor: default;
+}
+
+.nextStepH .icon {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    background-image: url('images/redoH.png');
+    cursor: pointer;
+}
+
+.nextStepH .text {
+    color: #888;
+    cursor: pointer;
+}
+
+.nextStep .icon {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    background-image: url('images/redo.png');
+    cursor: default;
+}
+
+.nextStep .text {
+    color: #ccc;
+    cursor: default;
+}
+
+.clearBoardH .icon {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    background-image: url('images/emptyH.png');
+    cursor: pointer;
+}
+
+.clearBoardH .text {
+    color: #888;
+    cursor: pointer;
+}
+
+.clearBoard .icon {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    background-image: url('images/empty.png');
+    cursor: default;
+}
+
+.clearBoard .text {
+    color: #ccc;
+    cursor: default;
+}
+
+.scaleBoardH .icon {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    background-image: url('images/scaleH.png');
+    cursor: pointer;
+}
+
+.scaleBoardH .text {
+    color: #888;
+    cursor: pointer;
+}
+
+.scaleBoard .icon {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    background-image: url('images/scale.png');
+    cursor: default;
+}
+
+.scaleBoard .text {
+    color: #ccc;
+    cursor: default;
+}
+
+.removeImgH .icon {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    background-image: url('images/delimgH.png');
+    cursor: pointer;
+}
+
+.removeImgH .text {
+    color: #888;
+    cursor: pointer;
+}
+
+.removeImg .icon {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    background-image: url('images/delimg.png');
+    cursor: default;
+}
+
+.removeImg .text {
+    color: #ccc;
+    cursor: default;
+}
+
+.addImgH .icon {
+    vertical-align: top;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    background-image: url('images/addimg.png')
+}
+
+.addImgH .text {
+    color: #888;
+    cursor: pointer;
+}
+
+/*icon
+*/
+.brushIcon {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    background-image: url('images/brush.png')
+}
+
+.eraserIcon {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    background-image: url('images/eraser.png')
+}
+
+

package/ueditor-resource/dialogs/scrawl/scrawl.html

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title></title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <meta name="robots" content="noindex, nofollow"/>
+    <script type="text/javascript" src="../internal.js?32939b8e"></script>
+    <link rel="stylesheet" type="text/css" href="scrawl.css?80d29439">
+</head>
+<body>
+<div class="main" id="J_wrap">
+    <div class="hot">
+        <div class="drawBoard border_style1">
+            <canvas id="J_brushBoard" class="brushBorad" width="360" height="300"></canvas>
+            <div id="J_picBoard" class="picBoard" style="width: 360px;height: 300px"></div>
+        </div>
+        <div id="J_operateBar" class="operateBar">
+            <span id="J_previousStep" class="previousStep">
+                <em class="icon"></em>
+                <em class="text"><var id="lang_input_previousStep"></var></em>
+            </span>
+            <span id="J_nextStep" class="nextStep">
+                <em class="icon"></em>
+                <em class="text"><var id="lang_input_nextsStep"></var></em>
+            </span>
+            <span id="J_clearBoard" class="clearBoard">
+                <em class="icon"></em>
+                <em class="text"><var id="lang_input_clear"></var></em>
+            </span>
+            <span id="J_sacleBoard" class="scaleBoard">
+                <em class="icon"></em>
+                <em class="text"><var id="lang_input_ScalePic"></var></em>
+            </span>
+        </div>
+    </div>
+    <div class="drawToolbar border_style1">
+        <div id="J_colorBar" class="colorBar"></div>
+        <div id="J_brushBar" class="sectionBar">
+            <em class="brushIcon"></em>
+            <a href="javascript:void(0)" class="size1">1</a>
+            <a href="javascript:void(0)" class="size2">3</a>
+            <a href="javascript:void(0)" class="size3">5</a>
+            <a href="javascript:void(0)" class="size4">7</a>
+        </div>
+        <div id="J_eraserBar" class="sectionBar">
+            <em class="eraserIcon"></em>
+            <a href="javascript:void(0)" class="size1">1</a>
+            <a href="javascript:void(0)" class="size2">3</a>
+            <a href="javascript:void(0)" class="size3">5</a>
+            <a href="javascript:void(0)" class="size4">7</a>
+        </div>
+        <div class="sectionBar">
+            <div id="J_addImg" class="addImgH">
+                <em class="icon"></em>
+                <em class="text"><var id="lang_input_addPic"></var></em>
+                <form method="post" id="fileForm" enctype="multipart/form-data" class="addImgH_form" target="up">
+                    <input type="file" name="upfile" id="J_imgTxt"
+                           accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"/>
+                </form>
+                <iframe name="up" style="display: none"></iframe>
+            </div>
+        </div>
+        <div class="sectionBar">
+            <span id="J_removeImg" class="removeImg">
+                <em class="icon"></em>
+                <em class="text"><var id="lang_input_removePic"></var></em>
+            </span>
+        </div>
+    </div>
+</div>
+<div id="J_maskLayer" class="maskLayerNull"></div>
+
+<script type="text/javascript" src="scrawl.js?2a3611a5"></script>
+<script type="text/javascript">
+    var settings = {
+        drawBrushSize: 3, //画笔初始大小
+        drawBrushColor: "#4bacc6", //画笔初始颜色
+        colorList: ['c00000', 'ff0000', 'ffc000', 'ffff00', '92d050', '00b050', '00b0f0', '0070c0', '002060', '7030a0', 'ffffff',
+            '000000', 'eeece1', '1f497d', '4f81bd', 'c0504d', '9bbb59', '8064a2', '4bacc6', 'f79646'], //画笔选择颜色
+        saveNum: 10  //撤销次数
+    };
+
+    var scrawlObj = new scrawl(settings);
+    scrawlObj.isCancelScrawl = false;
+
+    dialog.onok = function () {
+        exec(scrawlObj);
+        return false;
+    };
+    dialog.oncancel = function () {
+        scrawlObj.isCancelScrawl = true;
+    };
+</script>
+</body>
+</html>