@jx3box/jx3box-editor 1.0.6 → 1.1.0

package/assets/css/article_markdown.less

@@ -1,12 +1,11 @@
-.c-article-markdown {
-    @import "module/video.less";
+@import "markdown/macro.less";
+@import "markdown/talent.less";
+@import "markdown/video.less";
 
-    @import 'module/macro.less';
-    @import 'module/qixue.less';
-
-    @import 'module/jx3_element.less';
-    @import 'module/buff.less';
-    @import 'module/skill.less';
-    @import 'module/icon.less';
-    @import 'module/resource.less';
-}
+@import "module/jx3_element.less";
+@import "module/buff.less";
+@import "module/skill.less";
+@import "module/item.less";
+@import "module/npc.less";
+@import "module/icon.less";
+@import "module/resource.less";

package/assets/css/markdown/_.less

@@ -0,0 +1,38 @@
+.c-editor-header {
+    .mb(10px);
+    .clearfix;
+
+    .c-upload,
+    .c-resource {
+        .fl;
+    }
+    .c-upload {
+        .mr(5px);
+    }
+}
+
+.c-markdown{
+    .h(780px);
+    .v-note-wrapper{
+        .h(780px);
+    }
+
+    a:hover {
+        text-decoration: none;
+    }
+}
+
+.c-markdown-toolbar-item {
+    .mr(5px);
+    .pointer;
+    padding: 2px 5px 3px 5px;
+
+    &:hover {
+        background: #e9e9eb;
+        .r(4px);
+    }
+}
+.c-markdown-store-item {
+    .none;
+}
+

package/assets/css/markdown/dialog.less

@@ -0,0 +1,26 @@
+
+.c-editor-markdown-dialog {
+    display: inline-block;
+    .u-input {
+        .el-textarea__inner {
+    
+            font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+        }
+    }
+    .el-dialog__body {
+        padding-top: 0;
+    }
+
+    .u-help {
+        margin-bottom: 10px;
+        display: inline-block;
+        color: #0366D6;
+        font-weight: bold;
+        cursor: pointer;
+        text-decoration: none;
+    
+        &:hover {
+            text-decoration: none !important;
+        }
+    }
+}

package/assets/css/markdown/macro.less

@@ -0,0 +1,45 @@
+// 编辑器外样式
+.c-article{
+	.e-jx3macro-area{
+		.pr;
+		&:after{
+			content : 'JX3BOX·MACRO';
+			position: absolute;right:0;top:-30px;
+			background-color:@bg-black;
+			color:#fff;
+			border-radius:3px;
+			padding:0 8px;
+			line-height:28px;
+			height: 28px;
+			box-sizing: border-box;
+			font-size: 14px;
+		}
+	}
+}
+// markdown编辑器
+.c-editor-markdown {
+	.e-jx3macro-area{
+		min-height:24px;
+		border-radius:4px;
+		padding:10px;
+		font-size: 14px;
+		white-space: pre-wrap;
+		background-color: #f1f8ff;
+		border: 1px solid #c8e1ff;
+		color:darken(#c8e1ff,20%);
+		.pr;
+		&:after{
+			content : 'JX3BOX·MACRO';
+			position: absolute;right:10px;top:10px;
+			background-color:darken(#c8e1ff,20%);
+			color:#fff;
+			border-radius:3px;
+			padding:0 8px;
+		}
+	}
+}
+// markdown渲染展示
+.c-article-markdown .w-jx3macro{
+	background:none;
+	padding:0;
+}

package/assets/css/markdown/talent.less

@@ -0,0 +1,42 @@
+// 编辑器内
+.e-jx3qixue-area ,.e-jx3talent2-area{
+    min-height: 24px;
+    border-radius: 4px;
+    font-size: 14px;
+    width: 100%;
+    box-sizing: border-box;
+    background-color: #f1f8ff;
+    border: 1px solid #c8e1ff;
+    color: darken(#c8e1ff, 20%);
+
+    line-height: 40px !important;
+    padding: 0 10px;
+    font-family: Monaco, Consolas, "Lucida Console", "Courier New", serif;
+
+    .pr;
+    &:after {
+        content: "JX3BOX·TALENT";
+        position: absolute;
+        .rt(8px);
+        background-color: darken(#c8e1ff, 20%);
+        color: #fff;
+        border-radius: 3px;
+        padding: 2px 8px;
+        line-height: 21px;
+    }
+}
+// Markdown编辑器内展示
+.c-editor-markdown{
+    .e-jx3qixue-area,.e-jx3talent2-area{
+        display: block;
+        padding-top:0;
+        padding-bottom:0;
+    }
+}
+
+// Markdown渲染
+.c-article-markdown{
+    .e-jx3qixue-area,.e-jx3talent2-area{
+        display:none;
+    }
+}

package/assets/css/markdown/video.less

@@ -0,0 +1,25 @@
+.c-article-markdown {
+    video {
+        background-color: #333;
+        width: 100%;
+        height: 800px;
+        display: block;
+        cursor: pointer;
+    }
+}
+.c-article-videox {
+    iframe,
+    iframe[allowfullscreen="allowfullscreen"] {
+        width: 100%;
+        height: 800px;
+        border: 1px solid #eee;
+        box-sizing: border-box;
+    }
+}
+@media screen and (max-width: @ipad) {
+    .c-article-markdown video,
+    .c-article-videox iframe {
+        height: auto;
+        min-height: 200px;
+    }
+}

package/assets/css/markdown.less

@@ -1,33 +1,16 @@
-.c-editor-header {
-    .mb(10px);
-    .clearfix;
-
-    .c-upload,
-    .c-resource {
-        .fl;
-    }
-    .c-upload {
-        .mr(5px);
-    }
-}
-
-.c-markdown{
-    .h(780px);
-    .v-note-wrapper{
-        .h(780px);
-    }
+.c-editor-markdown {
+    @import "markdown/_.less";
+    @import "markdown/dialog.less";
 }
 
-.c-markdown-toolbar-item {
-    .mr(5px);
-    .pointer;
-    padding: 2px 5px 3px 5px;
+@import "markdown/macro.less";
+@import "markdown/talent.less";
+@import "markdown/video.less";
 
-    &:hover {
-        background: #e9e9eb;
-        .r(4px);
-    }
-}
-.c-markdown-store-item {
-    .none;
-}
+@import "module/jx3_element.less";
+@import "module/buff.less";
+@import "module/skill.less";
+@import "module/item.less";
+@import "module/npc.less";
+@import "module/icon.less";
+@import "module/resource.less";

package/assets/css/module/_.less

@@ -1,4 +1,4 @@
-.c-article{
+.c-article-tinymce{
     font-size: 1em;
     line-height: 1.8;
     color: #3d454d;

package/assets/css/module/a.less

@@ -1,5 +1,5 @@
 /* 链接 */
-.c-article {
+.c-article-tinymce {
     a {
         color: #0366d6;
         text-decoration: none;

package/assets/css/module/buff.less

@@ -46,7 +46,7 @@
     .w-buff-meta {
         .db;
         .fz(12px, 20px);
-        color: #f00;
+        color: #5df9eb;
     }
 }
 

package/assets/css/module/code.less

@@ -1,4 +1,4 @@
-.c-article {
+.c-article-tinymce {
     //兼容旧代码
     code {
         font-family: Consolas, monospace, serif;

package/assets/css/module/fold.less

@@ -1,5 +1,5 @@
 // 折叠文本
-.c-article {
+.c-article-tinymce {
     .e-details,
     .e-summary {
         font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,

package/assets/css/module/h.less

@@ -1,5 +1,5 @@
 //标题
-.c-article {
+.c-article-tinymce {
     h1,
     h2,
     h3,

package/assets/css/module/hr.less

@@ -1,5 +1,5 @@
 /* 水平线 */
-.c-article {
+.c-article-tinymce {
     hr {
         margin-top: 22px;
         margin-bottom: 22px;

package/assets/css/module/item.less

@@ -224,4 +224,3 @@
         }
     }
 }
-

package/assets/css/module/item_simple.less

@@ -1,49 +1,51 @@
 .m-simple-item {
-  .mb(2px);
-  padding: 4px 10px 4px 4px;
-  line-height: initial;
-  font-size: 13px;
-  background-color: #0F2222;
-  text-shadow: 1px 1px 1px #000000;
-  border-radius: 4px;
-  overflow: hidden;
+    .mb(2px);
+    padding: 4px 10px 4px 4px;
+    line-height: initial;
+    font-size: 13px;
+    background-color: #0f2222;
+    text-shadow: 1px 1px 1px #000000;
+    border-radius: 4px;
+    overflow: hidden;
 
-  .m-icon, .u-name {
-    .dbi;
-    vertical-align: middle;
-  }
+    .m-icon,
+    .u-name {
+        .dbi;
+        vertical-align: middle;
+    }
 
-  .m-icon {
-    .pr;
-    .mr(8px);
+    .m-icon {
+        .pr;
+        .mr(8px);
 
-    .u-border, .u-border-quest {
-      .pa;
-      top: 0;
-      left: 0;
-      .w(100%);
-      .h(100%);
-      box-sizing: border-box;
-      background-size: contain;
-      .z(20);
-    }
+        .u-border,
+        .u-border-quest {
+            .pa;
+            top: 0;
+            left: 0;
+            .w(100%);
+            .h(100%);
+            box-sizing: border-box;
+            background-size: contain;
+            .z(20);
+        }
 
-    .u-border-quest {
-      .z(30);
-    }
+        .u-border-quest {
+            .z(30);
+        }
 
-    .u-icon {
-      .pr;
-      .db;
-      .w(24px);
-      .h(auto);
-      .z(10);
+        .u-icon {
+            .pr;
+            .db;
+            .w(24px);
+            .h(auto);
+            .z(10);
+        }
     }
-  }
 
-  .u-uiid {
-    .mt(3px);
-    font-size: 12px;
-    color: lightgreen;
-  }
-}
+    .u-uiid {
+        .mt(3px);
+        font-size: 12px;
+        color: lightgreen;
+    }
+}

package/assets/css/module/latex.less

@@ -1,5 +1,5 @@
 // 编辑器内样式
-.c-article{
+.c-article-tinymce{
 	.w-latex{
 		.pr;
         font-family: Georgia, 'Times New Roman', Times, serif;

package/assets/css/module/list.less

@@ -1,5 +1,5 @@
 /* 列表 */
-.c-article {
+.c-article-tinymce {
     ul,
     ol {
         margin: 20px 0;

package/assets/css/module/macro.less

@@ -1,4 +1,4 @@
-// 编辑器内样式
+// 编辑器外样式
 .c-article{
 	.e-jx3macro-area{
 		.pr;
@@ -16,6 +16,7 @@
 		}
 	}
 }
+// tinymce编辑器
 .c-article-editor {
 	.e-jx3macro-area{
 		min-height:24px;
@@ -36,4 +37,4 @@
 			padding:0 8px;
 		}
 	}
-}
+}

package/assets/css/module/npc.less

@@ -0,0 +1,224 @@
+.w-npc {
+    padding: 1px;
+    border: 1px solid #0f2222;
+    .w-npc-wrapper {
+        @min-width: 200px;
+        min-width: @min-width;
+        padding: 9px 10px 10px;
+        background-color: rgba(15, 34, 34, 0.88);
+        box-sizing: border-box;
+        display: flex;
+
+        div {
+            margin: 2px 0;
+        }
+
+        .w-npc-content {
+            box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+            margin-bottom: 10px;
+            padding: 10px;
+            .r(4px);
+            .clearfix;
+            .fz(13px);
+            color: #e7e7e7;
+        }
+
+        .u-icon {
+            .fl;
+            .mr(10px);
+            .r(4px);
+            box-shadow: 0 0 1px rgba(0, 0, 0, 0.4);
+        }
+
+        .u-isBoss {
+            .pa;
+            .rt(10px, 40px);
+            .z(2);
+            svg {
+                .size(20px);
+                .y(top);
+            }
+            font-style: normal;
+            .lh(20px);
+            .bold;
+        }
+
+        .u-id {
+            .pa;
+            .rt(22px,28px);
+            .pointer;
+            color: #5df9eb;
+        }
+
+        .u-title {
+            min-height: 48px;
+            .u-name {
+                .fz(18px);
+                color: #ebeef5;
+                margin-right: 5px;
+                .bold;
+                font-weight: 300;
+            }
+            .u-name-add {
+                .fz(12px);
+                color: #aaa;
+            }
+            .u-level {
+                .fz(12px);
+            }
+            border-bottom: 1px solid #4a5056;
+            padding-bottom: 10px;
+        }
+
+        .u-base {
+            .fz(12px, 2);
+
+            span {
+                &:after {
+                    content: "|";
+                    color: #aaa;
+                    padding: 0 5px;
+                }
+                &:last-child {
+                    &:after {
+                        .none;
+                    }
+                }
+            }
+        }
+
+        .u-primary {
+            margin-top: 10px;
+            min-height: 23px;
+            em {
+                .none;
+            }
+            b {
+                padding: 2px 5px;
+                .mr(15px);
+                .y(top);
+                .h(20px);
+                .fz(13px);
+                font-weight: normal;
+                color: #aaa;
+            }
+            div {
+                .fz(12px, 23px);
+                white-space: nowrap;
+                overflow-x: auto;
+            }
+
+            strong {
+                // color:#0cf;
+                .fz(13px);
+                color: #eee;
+            }
+
+            .u-range {
+                transform: skewX(-15deg);
+                background-color: #ddd;
+                .r(2px);
+                .w(220px);
+                .dbi;
+                .y(top);
+                .h(19px);
+                margin: 2px 0;
+                .pr;
+
+                strong {
+                    .h(100%);
+                    .db;
+                    .pa;
+                    .lt(0);
+                    font-weight: 400;
+                    text-indent: 10px;
+                    .r(2px);
+                    .fz(12px, 18px);
+                    color: #fff;
+                    max-width: 300%;
+                }
+            }
+        }
+
+        .u-sitem {
+            color: #aaa;
+        }
+        .u-shield,
+        .u-critical,
+        .u-attack {
+            .u-sitem {
+                .mr(20px);
+            }
+            .u-value {
+                padding: 0 5px;
+                .bold;
+                .fz(13px);
+                color: #eee;
+            }
+        }
+
+        .u-misc {
+            .u-remark {
+                margin-right: 20px;
+                strong {
+                    color: #f28f02;
+                    color: #f00;
+                }
+            }
+        }
+        .u-misc-tip {
+            .x;
+            background-color: #444;
+            .r(2px);
+            color: #999;
+            padding: 5px 10px;
+            a {
+                color: #fff;
+                margin: 0 3px;
+                box-shadow: 0 1px 0 #fff;
+            }
+            a:hover {
+                color: #eee;
+            }
+        }
+
+        .u-descicon {
+            .size(14px);
+            .y(-2px);
+            .mr(5px);
+        }
+        .u-descicon-life {
+            fill: #ffacd5;
+        }
+        .u-descicon-mana {
+            fill: #77e3ff;
+        }
+        .u-descicon-speed {
+            fill: #c2f703;
+        }
+        .u-descicon-shield {
+            fill: #49c10f;
+        }
+        .u-descicon-touch {
+            fill: #f1c309;
+        }
+        .u-descicon-sense {
+            fill: #c0a3ff;
+        }
+        .u-descicon-dodge {
+            fill: #49c10f;
+        }
+        .u-descicon-attack {
+            fill: #fc3c3c;
+        }
+    }
+    .u-primary{
+        .pr;
+    }
+}
+.c-article .e-jx3-npc {
+    text-decoration: underline;
+    &:hover {
+        box-shadow: none !important;
+    }
+}

package/assets/css/module/p.less

@@ -1,5 +1,5 @@
 // 段落
-.c-article {
+.c-article-tinymce {
     p,
     div {
         margin: 0;

package/assets/css/module/qixue.less

@@ -25,14 +25,15 @@
         line-height: 21px;
     }
 }
+// 渲染模式隐藏
 .c-article{
     .e-jx3qixue-area,.e-jx3talent2-area{
         display: none;
     }
 }
+// tinymce编辑器内展示
 .c-article-editor{
     .e-jx3qixue-area,.e-jx3talent2-area{
         display: block;
     }
 }
-