@jx3box/jx3box-editor 1.1.3 → 1.1.7

package/assets/css/article.less

@@ -1,5 +1,4 @@
-// @import 'node_modules/csslab/base.less';
-// @import 'node_modules/@jx3box/jx3box-common/css/var.less';
+// tinymce文章样式
 
 @import "tinymce/_.less";
 @import "tinymce/a.less";
@@ -23,6 +22,7 @@
 @import "tinymce/video.less";
 @import "tinymce/macro.less";
 @import "tinymce/qixue.less";
+@import "tinymce/pz.less";
 
 @import "module/directory.less";
 @import "module/icon.less";

package/assets/css/article_markdown.less

@@ -1,3 +1,5 @@
+// md文章样式
+
 @import "module/macro.less";
 @import "module/talent.less";
 

package/assets/css/markdown.less

@@ -1,3 +1,4 @@
+// md编辑器样式
 .c-editor-markdown {
     .c-editor-header {
         .mb(10px);

package/assets/css/tinymce/_.less

@@ -22,7 +22,7 @@
     display: none;
 }
 @media print{
-    .c-article{
+    .c-article-tinymce{
         -webkit-print-color-adjust: exact;
     }
 }

package/assets/css/tinymce/a.less

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

package/assets/css/tinymce/code.less

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

package/assets/css/tinymce/fold.less

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

package/assets/css/tinymce/h.less

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

package/assets/css/tinymce/hr.less

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

package/assets/css/tinymce/img.less

@@ -1,5 +1,5 @@
 //图片
-.c-article-tinymce .c-article {
+.c-article-tinymce {
     img {
         height: auto;
         padding: 5px;

package/assets/css/tinymce/latex.less

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

package/assets/css/tinymce/list.less

@@ -37,6 +37,7 @@
     // 新版checklist
     .tox-checklist > li{
         line-height: 2.2;
+        margin:0 !important;
     }
     .tox-checklist > li:not(.tox-checklist--hidden) {
         list-style: none;

package/assets/css/tinymce/macro.less

@@ -1,5 +1,5 @@
 // 编辑器外样式
-.c-article-tinymce .c-article{
+.c-article-tinymce{
 	.e-jx3macro-area{
 		.pr;
 		&:after{

package/assets/css/tinymce/pz.less

@@ -0,0 +1,39 @@
+// 编辑器内
+.e-pz-iframe{
+    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 0 140px;
+    font-family: Monaco, Consolas, "Lucida Console", "Courier New", serif;
+
+    .pr;
+    &:after {
+        content: "JX3BOX·配装方案";
+        position: absolute;
+        .lt(8px);
+        background-color: darken(#c8e1ff, 20%);
+        color: #fff;
+        border-radius: 3px;
+        padding: 2px 8px;
+        line-height: 21px;
+    }
+}
+// 渲染模式隐藏
+.c-article-tinymce{
+    .e-pz-iframe{
+        display: none;
+    }
+}
+// tinymce编辑器内展示
+.c-article-editor{
+    .e-pz-iframe{
+        display: block;
+    }
+}

package/assets/css/tinymce/quote.less

@@ -1,5 +1,5 @@
 /* 引用 */
-.c-article-tinymce .c-article{
+.c-article-tinymce{
     blockquote {
         border: 1px dashed #e1e4e8;
         border-radius: 4px;

package/assets/css/tinymce/table.less

@@ -1,5 +1,5 @@
 /* 表格 */
-.c-article-tinymce .c-article{
+.c-article-tinymce {
     table {
         border-collapse: collapse;
         width: 100%;
@@ -39,7 +39,7 @@
 }
 
 @media screen and (max-width: @phone) {
-    .c-article-tinymce .c-article{
+    .c-article-tinymce{
         table {
             display: block;
             width: 100% !important;

package/assets/css/tinymce/video.less

@@ -1,4 +1,4 @@
-.c-article-tinymce .c-article {
+.c-article-tinymce {
     video {
         background-color: #333;
         width: 100%;
@@ -7,8 +7,9 @@
         cursor: pointer;
     }
 }
-.c-article-videox{
-    iframe,iframe[allowfullscreen='allowfullscreen']{
+.c-article-videox {
+    iframe,
+    iframe[allowfullscreen="allowfullscreen"] {
         width: 100%;
         height: 800px;
         border: 1px solid #eee;
@@ -16,17 +17,19 @@
     }
 }
 .c-article-editor {
-    video,iframe {
+    video,
+    iframe {
         cursor: default;
     }
-    iframe{
-        width:auto;
-        height:auto;
+    iframe {
+        width: auto;
+        height: auto;
     }
 }
-@media screen and (max-width:@ipad){
-    .c-article video,.c-article-videox iframe{
-        height:auto;
-        min-height:200px;
+@media screen and (max-width: @ipad) {
+    .c-article video,
+    .c-article-videox iframe {
+        height: auto;
+        min-height: 200px;
     }
-}
+}

package/assets/css/tinymce.less

@@ -1,3 +1,4 @@
+// tinymce编辑器样式
 .c-editor-header{
     .mb(10px);
     .clearfix;
@@ -56,4 +57,4 @@
             .none;
         }
     }
-}
+}

package/assets/js/pz_iframe.js

@@ -0,0 +1,30 @@
+import $ from "jquery";
+function buildIframe(str){
+    let _str = new URLSearchParams(str);
+    let mode = _str.get('mode')
+
+    if(mode == 'vertical'){
+        return `<iframe class="w-pz-iframe" src="${str}" scrolling="no" width="750" height="3468" style="border:none;background:none;max-width:100%;overflow:hidden;"></iframe>`
+    }else{
+        return `<iframe class="w-pz-iframe" src="${str}" scrolling="no" width="1280" height="720" style="border:none;background:none;max-width:100%;overflow:hidden;"></iframe>`
+    }
+}
+
+function renderPzIframe(selector = ".e-pz-iframe"){
+    try {
+        $(selector).each(function(i, ele) {
+            // 获取嵌入源地址
+            let url =  $(this).text();
+
+            // 构建嵌入源码
+            let code = buildIframe(url)
+
+            // 挂载点
+            $(this).after(code);
+        });
+    } catch (e) {
+        console.error(e);
+    }
+}
+
+export default renderPzIframe

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jx3box/jx3box-editor",
-  "version": "1.1.3",
+  "version": "1.1.7",
   "description": "JX3BOX Article & Editor",
   "main": "index.js",
   "scripts": {

package/src/Article.vue

@@ -90,6 +90,7 @@ import renderTalent2 from "../assets/js/talent2";
 import renderKatex from "../assets/js/katex";
 import renderCode from "../assets/js/code";
 import renderImgPreview from "../assets/js/renderImgPreview";
+import renderPzIframe from '../assets/js/pz_iframe'
 
 // 剑三
 import Item from "./Item";
@@ -191,6 +192,8 @@ export default {
             renderTalent2();
             // 物品
             renderJx3Element(this);
+            // 配装
+            renderPzIframe();
         },
         doDir: function () {
             // 显示局部

package/src/Tinymce.vue

@@ -22,7 +22,7 @@
             >进入特殊区域（代码块，折叠块等等）脱离或使用工具栏触发后，请使用键盘方向
             → ↓
             键进行脱离，回车只是正常在区块内换行。去掉样式点击第二行第一个&lt;清除格式&gt;即可复位。<a
-                href="https://www.jx3box.com/tool/16227"
+                href="/tool/16227"
                 target="_blank"
                 >[编辑器使用指南]</a
             >
@@ -59,8 +59,10 @@ export default {
                 convert_urls: false,
 
                 // 样式
+                // TODO:
                 content_css: `https://oss.jx3box.com/static/tinymce/skins/content/default/content.min.css`,
-                body_class: "c-article c-article-editor",
+                // content_css: `http://localhost:5000/skins/content/default/content.min.css`,
+                body_class: "c-article c-article-editor c-article-tinymce",
                 height: this.height || 800,
                 autosave_ask_before_unload: false,
 
@@ -150,8 +152,8 @@ export default {
                 images_upload_credentials: true,
 
                 // Hook
-                setup: this.setup,
-                init_instance_callback: this.ready,
+                // setup: this.setup,
+                // init_instance_callback: this.ready,
 
                 // Template
                 // templates: [