@jx3box/jx3box-editor 2.2.45 → 2.2.47

package/public/css/article.css

@@ -767,6 +767,7 @@
   margin-top: 0;
   margin-bottom: 0;
   line-height: 1.1;
+  text-combine-upright: none !important;
 }
 .w-qixue-box .w-qixue-clist {
   margin: 0;
@@ -1400,6 +1401,321 @@
   padding: 2px 8px;
   line-height: 21px;
 }
+.e-audio {
+  min-height: 24px;
+  border-radius: 4px;
+  font-size: 14px;
+  width: 100%;
+  box-sizing: border-box;
+  background-color: #f1f8ff;
+  border: 1px solid #c8e1ff;
+  color: #62a9ff;
+  line-height: 1.6 !important;
+  padding: 10px;
+  padding-right: 135px;
+  font-family: Monaco, Consolas, "Lucida Console", "Courier New", serif;
+  word-break: break-all;
+  white-space: pre-wrap !important;
+  overflow-wrap: break-word;
+  position: relative;
+  *zoom: 1;
+}
+.e-audio:after {
+  content: "JX3BOX·AUDIO";
+  position: absolute;
+  right: 8px;
+  top: 8px;
+  background-color: #62a9ff;
+  color: #fff;
+  border-radius: 3px;
+  padding: 2px 8px;
+  line-height: 21px;
+}
+.w-audio-player {
+  position: relative;
+  *zoom: 1;
+  border-radius: 24px;
+  box-sizing: border-box;
+  width: 376px;
+  background: rgba(255, 255, 255, 0.1);
+  transition: all 0.3s ease-in-out;
+  padding: 24px;
+}
+.w-audio-player .m-item {
+  position: relative;
+  cursor: pointer;
+  border-radius: 16px;
+  overflow: hidden;
+  *zoom: 1;
+  margin-bottom: 24px;
+  color: #fff;
+  padding: 32px 36px;
+  box-sizing: border-box;
+  width: 100%;
+  background: linear-gradient(180deg, #7676f0 0%, #9495e9 100%);
+}
+.w-audio-player .m-item a {
+  color: #fff;
+  text-decoration: none;
+}
+.w-audio-player .m-item a:hover {
+  text-decoration: none;
+  box-shadow: none;
+}
+.w-audio-player .m-item img {
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+.w-audio-player .m-item::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  filter: alpha(opacity=0);
+  width: 100%;
+  height: 100%;
+  transition: opacity 0.3s ease-in-out;
+  background: linear-gradient(180deg, #f9c27f 0%, #9697ed 100%);
+}
+.w-audio-player .m-item .u-title {
+  display: flex;
+  position: relative;
+  *zoom: 1;
+  font-weight: bold;
+  font-size: 24px;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  max-width: 300px;
+  box-sizing: border-box;
+  font-family: "ALIMAMASHUHEITI";
+}
+.w-audio-player .m-item .u-title .clip {
+  overflow: hidden;
+  *zoom: 1;
+  width: 100%;
+}
+.w-audio-player .m-item .u-title .marquee-wrapper {
+  white-space: nowrap;
+  position: relative;
+  display: inline-block;
+  transition: transform 0s linear;
+}
+.w-audio-player .m-item .u-title .marquee-wrapper.marquee-animate {
+  animation: marquee linear infinite;
+  animation-fill-mode: forwards;
+}
+.w-audio-player .m-item .u-title .marquee-text {
+  display: inline-block;
+}
+.w-audio-player .m-item .u-title .marquee-text::after {
+  content: "》";
+  display: inline-block;
+}
+.w-audio-player .m-item .u-title .marquee-text::before {
+  content: "《";
+  display: inline-block;
+}
+.w-audio-player .m-item .u-title .marquee-text.copy {
+  margin-left: 180px;
+  display: none;
+}
+.w-audio-player .m-item .u-title .marquee-text.copy::after,
+.w-audio-player .m-item .u-title .marquee-text.copy::before {
+  display: none;
+}
+.w-audio-player .m-item .u-title.marquee-active .marquee-text.copy {
+  display: inline-block;
+}
+.w-audio-player .m-item .u-title.marquee-active .marquee-animate .marquee-text::after,
+.w-audio-player .m-item .u-title.marquee-active .marquee-animate .marquee-text::before {
+  display: none;
+}
+.w-audio-player .m-item .u-title.marquee-active::after {
+  content: "》";
+  display: inline-block;
+  position: absolute;
+  right: -28px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+}
+.w-audio-player .m-item .u-title.marquee-active::before {
+  content: "《";
+  display: inline-block;
+  position: absolute;
+  left: -28px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+}
+.w-audio-player .m-item .u-author {
+  text-align: center;
+  font-size: 14px;
+  opacity: 0.75;
+  filter: alpha(opacity=75);
+  margin-top: 5px;
+}
+.w-audio-player .m-item .m-record {
+  position: relative;
+  *zoom: 1;
+  padding: 42px 0 3px 0;
+}
+.w-audio-player .m-item .m-record .u-needle {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  width: 120px;
+  height: 72px;
+  margin-left: -10px;
+  user-select: none;
+  pointer-events: none;
+  transition: transform 0.3s ease-out, top 0.3s ease-out, margin 0.3s ease-out;
+  transform-origin: 0% 0%;
+  transform: rotate(0deg);
+}
+.w-audio-player .m-item .m-record .u-needle.isPlaying {
+  top: -3px;
+  margin: 0;
+  transform-origin: 0% 0%;
+  transform: rotate(30deg);
+  display: inline-block;
+}
+.w-audio-player .m-item .m-record .u-record {
+  display: block;
+  width: 182px;
+  height: 182px;
+  margin-left: auto;
+  margin-right: auto;
+  user-select: none;
+  padding: 28px;
+  box-sizing: border-box;
+  background: url("https://cdn.jx3box.com/design/event/jx3cxk/web/item/record.svg") no-repeat center center;
+  background-size: 100% 100%;
+}
+.w-audio-player .m-item .m-record .u-avatar {
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.6s ease-out;
+}
+.w-audio-player .m-item .m-record .u-avatar.isRotate {
+  animation: rotate 6s linear infinite;
+}
+.w-audio-player .m-item .m-record .u-avatar.isRotate.isPaused {
+  animation-play-state: paused;
+}
+.w-audio-player .m-item .m-progress {
+  position: relative;
+  *zoom: 1;
+  margin: 16px 0;
+}
+.w-audio-player .m-item .m-progress .u-progress-bar {
+  position: relative;
+  *zoom: 1;
+  height: 3px;
+  background: rgba(65, 61, 82, 0.3);
+  border-radius: 3px;
+  cursor: pointer;
+  overflow: visible;
+}
+.w-audio-player .m-item .m-progress .u-progress-bar .u-progress-fill {
+  position: absolute;
+  height: 100%;
+  background: #fff;
+  border-radius: 3px;
+  width: 0%;
+  transition: width 0.1s linear;
+}
+.w-audio-player .m-item .m-progress .u-progress-bar .u-progress-handle {
+  position: absolute;
+  top: 50%;
+  left: 0%;
+  width: 12px;
+  height: 12px;
+  background: #fff;
+  border: 2px solid rgba(65, 61, 82, 0.3);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  cursor: pointer;
+  transition: left 0.1s linear;
+}
+.w-audio-player .m-item .m-play {
+  position: relative;
+  *zoom: 1;
+  display: flex;
+  padding-top: 10px;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+}
+.w-audio-player .m-item .m-play .u-play-button {
+  display: flex;
+  justify-content: space-between;
+  width: 70%;
+  box-sizing: border-box;
+  margin: 0 15% 20px 15%;
+  align-items: center;
+}
+.w-audio-player .m-item .m-play .u-icon {
+  width: 24px;
+  height: 24px;
+}
+.w-audio-player .m-item .m-play .u-play {
+  width: 64px;
+  height: 64px;
+}
+.w-audio-player .m-item .m-play .u-like {
+  opacity: 0.75;
+  filter: alpha(opacity=75);
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.w-audio-player .m-item .m-play .u-like .u-icon {
+  width: 20px;
+  height: 20px;
+}
+.w-audio-player .m-item .m-play .u-link {
+  opacity: 0.75;
+  filter: alpha(opacity=75);
+  color: #fff;
+}
+.w-audio-player.play .m-item {
+  background: linear-gradient(180deg, #55c79f 0%, #9697ed 100%);
+}
+.w-audio-player:hover {
+  background: rgba(255, 255, 255, 0.15);
+}
+.w-audio-player:hover .m-item::before {
+  opacity: 1;
+  filter: alpha(opacity=100);
+}
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes marquee {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+.c-article-tinymce .e-audio {
+  display: none;
+}
+.c-article-editor .e-audio {
+  display: block;
+}
 .c-article-directory h1,
 .c-article-directory h2,
 .c-article-directory h3,

package/public/tinymce.html

@@ -3,29 +3,31 @@
     <head>
         <meta charset="utf-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-        <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
+        <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
         <meta name="renderer" content="webkit" />
         <title><%= htmlWebpackPlugin.options.title %></title>
         <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
         <script>
             window.RX_TINYMCE_ROOT = "https://cdn.jx3box.com/static/tinymce";
+            // window.RX_TINYMCE_ROOT = "http://localhost:3000";
         </script>
         <script src="https://cdn.jx3box.com/static/tinymce/tinymce.min.js?v=1.9.0"></script>
         <!-- TODO: -->
-        <!-- <script src="http://localhost:3000/tinymce.min.js"></script> -->
+        <!-- <script src="http://localhost:3000/tinymce.min.js?v=1.9.0"></script> -->
     </head>
     <body>
         <div id="app"></div>
-        <div id="c-ie-tips" style="display:none;background-color: #fef0f0;color: #f56c6c;padding:10px;font-weight:bold;text-align:center;width:60%;margin:200px auto;"><p>你的浏览器版本太低，可能无法正常使用本站，建议下载<a href="https://www.google.cn/intl/zh-CN/chrome/" target="_blank">Chrome</a>或其它极速浏览器</p><p>www.jx3box.com</p></div>
+        <div id="c-ie-tips" style="display: none; background-color: #fef0f0; color: #f56c6c; padding: 10px; font-weight: bold; text-align: center; width: 60%; margin: 200px auto">
+            <p>你的浏览器版本太低，可能无法正常使用本站，建议下载<a href="https://www.google.cn/intl/zh-CN/chrome/" target="_blank">Chrome</a>或其它极速浏览器</p>
+            <p>www.jx3box.com</p>
+        </div>
         <script>
             let ua = window.navigator.userAgent.toLocaleLowerCase();
             let isIE = ua.indexOf("trident") > 0 || ua.indexOf("msie") > 0;
             if (isIE) document.getElementById("c-ie-tips").style.display = "block";
         </script>
-        <div style="display:none;">
-            <script type="text/javascript" 
-                    src="https://s9.cnzz.com/z_stat.php?id=1277938200&web_id=1277938200">
-            </script>
+        <div style="display: none">
+            <script type="text/javascript" src="https://s9.cnzz.com/z_stat.php?id=1277938200&web_id=1277938200"></script>
         </div>
     </body>
 </html>

package/src/Article.vue

@@ -66,6 +66,7 @@ import renderCode from "../assets/js/code";
 import renderImgPreview from "../assets/js/renderImgPreview";
 import renderPzIframe from "../assets/js/pz_iframe";
 import renderCombo from "../assets/js/combo";
+import renderAudio from "../assets/js/audio";
 
 // 剑三
 import Item from "./Item";
@@ -215,6 +216,8 @@ export default {
             renderPzIframe();
             // 连招
             renderCombo();
+            // 音频
+            renderAudio();
             // 物品
             renderJx3Element(this);
         },

package/src/ArticleMarkdown.vue

@@ -38,6 +38,7 @@ import Skill from "./Skill";
 import Npc from "./Npc";
 import renderJx3Element from "../assets/js/jx3_element";
 import renderImgPreview from "../assets/js/renderImgPreview";
+import renderAudio from "../assets/js/audio";
 
 import {xssOptions} from '../assets/data/markdown_whitelist.json'
 
@@ -116,6 +117,8 @@ export default {
             renderImgPreview(this);
             // 语法高亮
             renderCode(`code[class=^'lang-']`)
+            // 音频
+            renderAudio();
             // 物品
             renderJx3Element(this);
         },