@jx3box/jx3box-editor 0.9.3 → 0.9.8

package/assets/css/markdown.less

@@ -0,0 +1,36 @@
+.c-editor-header {
+    .mb(10px);
+    .clearfix;
+
+    .c-upload,
+    .c-resource {
+        .fl;
+    }
+    .c-upload {
+        .mr(5px);
+    }
+}
+
+.c-markdown{
+    .h(780px);
+}
+
+.c-markdown-toolbar-item {
+    .mr(5px);
+    .pointer;
+    padding: 2px 5px 3px 5px;
+
+    &:hover {
+        background: #e9e9eb;
+        .r(4px);
+    }
+}
+.c-markdown-store-item {
+    .none;
+}
+
+.c-markdown {
+    .markdown-body .hljs {
+        background-color: #f6f8fa;
+    }
+}

package/assets/css/tinymce.less

@@ -1,21 +1,22 @@
-.c-editor-tinymce {
-
-    .c-editor-header{
-        .mb(10px);
-        .clearfix;
+.c-editor-header{
+    .mb(10px);
+    .clearfix;
 
-        .c-upload,.c-resource{
-            .fl;
-        }
-        .c-upload{
-            .mr(5px);
-        }
+    .c-upload,.c-resource{
+        .fl;
     }
-
-    .c-editor-emotion{
-        max-height: 168px;
-        overflow: auto;
+    .c-upload{
+        .mr(5px);
     }
+}
+
+.c-editor-emotion{
+    max-height: 168px;
+    overflow: auto;
+}
+
+.c-editor-tinymce {
+
 
     .u-tutorial {
         padding:0 10px;

package/docs/markdown.md

@@ -0,0 +1,16 @@
+## Markdown
+
+这组件真是垃圾，有时间我一定自己重写一个。。。
+
+
+## main.js引入
+```javascript
+import mavonEditor from "@jx3box/markdown";
+import "@jx3box/markdown/dist/css/index.css";
+Vue.use(mavonEditor)
+```
+
+## 封装模块引入
+```javascript
+import Markdown from '@jx3box/jx3box-editor/src/Markdown.vue'
+```

package/package.json

@@ -1,14 +1,15 @@
 {
     "name": "@jx3box/jx3box-editor",
-    "version": "0.9.3",
+    "version": "0.9.8",
     "description": "JX3BOX Article & Editor",
     "main": "index.js",
     "scripts": {
+        "dev": "env DEV_SERVER=true vue-cli-service serve",
         "serve": "vue-cli-service serve",
         "build": "vue-cli-service build",
         "lint": "vue-cli-service lint",
         "inspect": "vue inspect > output.js",
-        "update": "npm --registry https://registry.npmjs.org install @jx3box/jx3box-common@latest @jx3box/jx3box-macro@latest @jx3box/jx3box-talent@latest @jx3box/jx3box-emotion@latest @jx3box/jx3box-data@latest",
+        "update": "npm --registry https://registry.npmjs.org install @jx3box/jx3box-common@latest @jx3box/jx3box-macro@latest @jx3box/jx3box-talent@latest @jx3box/jx3box-emotion@latest @jx3box/jx3box-data@latest @jx3box/markdown@latest",
         "article": "vue-cli-service build --target lib --name jx3box_article src/Article.vue --mode production",
         "tinymce": "vue-cli-service build --target lib --name tinymce src/Tinymce.vue && cp public/tinymce.html dist/tinymce.html"
     },
@@ -35,6 +36,7 @@
         "@jx3box/jx3box-emotion": "^1.0.10",
         "@jx3box/jx3box-macro": "^1.0.1",
         "@jx3box/jx3box-talent": "^1.1.2",
+        "@jx3box/markdown": "0.0.8",
         "@tinymce/tinymce-vue": "^3.2.2",
         "axios": "^0.19.2",
         "core-js": "^3.6.5",

package/readme.md

@@ -7,7 +7,8 @@
 $ npm install 
 $ npm run serve
 $ open http://localhost:8080  //文章渲染
-$ open http://localhost:8080/tinymce  //编辑器
+$ open http://localhost:8080/tinymce  //tinymce编辑器
+$ open http://localhost:8080/markdown  //markdown编辑器
 $ tinymce http://localhost:5000
 ```
 

package/service/cms.js

@@ -0,0 +1,7 @@
+import { $cms } from "@jx3box/jx3box-common/js/https";
+
+function uploadFile(data) {
+    return $cms().post(`/api/cms/upload`, data);
+}
+
+export { uploadFile };

package/src/Markdown.vue

@@ -0,0 +1,184 @@
+<template>
+    <div class="c-editor-markdown">
+
+        <slot name="prepend"></slot>
+
+        <div class="c-editor-header">
+            <Upload v-if="attachmentEnable" @insert="insertAttachments" :enable="false" />
+            <Resource v-if="resourceEnable" @insert="insertResource" :enable="false" />
+        </div>
+
+        <slot></slot>
+
+        <mavon-editor class="c-markdown" ref="md" v-model="data" :editable="editable" :navigation="false" @change="updateData" :subfield="false" :readOnly="false">
+            <template slot="left-toolbar-after">
+                <span class="c-markdown-toolbar-image c-markdown-toolbar-item" title="上传图片" @click="selectImages"><i class="el-icon-picture-outline-round"></i></span>
+                <span class="c-markdown-toolbar-file c-markdown-toolbar-item" title="上传附件" @click="selectFiles"><i class="el-icon-paperclip"></i></span>
+            </template>
+        </mavon-editor>
+        <input class="c-markdown-store-item" id="c-markdown-store-images" type="file" @change="uploadImages" ref="markdownImages" multiple :accept="allow_image_types" />
+        <input class="c-markdown-store-item" id="c-markdown-store-files" type="file" @change="uploadFiles" ref="markdownFiles" multiple />
+
+        <slot name="append"></slot>
+    </div>
+</template>
+
+<script>
+import Upload from "./Upload";
+import Resource from "./Resource";
+import { uploadFile } from "../service/cms";
+export default {
+    name: "Markdown",
+    props: {
+        content: {
+            type: String,
+        },
+        editable: {
+            type: Boolean,
+            default: true,
+        },
+        attachmentEnable: {
+            type: Boolean,
+            default: true,
+        },
+        resourceEnable: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    components: {
+        Upload,
+        Resource,
+    },
+    data: function() {
+        return {
+            data: this.content,
+            allow_image_types: ["image/png", "image/jpeg", "image/gif", "image/bmp", "image/webp"],
+            allow_file_types: [],
+            image_ext: ["png", "jpg", "gif", "bmp", "webp"],
+            files: [],
+            resolved_files: [],
+        };
+    },
+    model: {
+        prop: "content",
+        event: "update",
+    },
+    watch: {
+        data: function(newval) {
+            this.$emit("update", newval);
+        },
+        content: function(newval) {
+            this.data = newval;
+        },
+        // 监听过滤后的文件列表
+        files_list: function(list) {
+            this.bulkUpload(list);
+        },
+    },
+    computed: {
+        files_list: function() {
+            let files = Array.from(this.files);
+            return files;
+        },
+        $md: function() {
+            return this.$refs.md;
+        },
+    },
+    methods: {
+        // 点击上传按钮
+        selectImages: function() {
+            document.getElementById("c-markdown-store-images").dispatchEvent(new MouseEvent("click"));
+        },
+        selectFiles: function() {
+            document.getElementById("c-markdown-store-files").dispatchEvent(new MouseEvent("click"));
+        },
+        // 监听选择结果变化
+        uploadImages: function(e) {
+            this.files = this.$refs.markdownImages.files;
+        },
+        uploadFiles: function(e) {
+            this.files = this.$refs.markdownFiles.files;
+        },
+        // 批量上传
+        bulkUpload: function(list) {
+            // 存在有效数据队列时
+            if (!list || !list.length) return;
+
+            // 上传队列
+            let queue = [];
+            for (let item of list) {
+                let formdata = new FormData();
+                formdata.append("file", item);
+                queue.push(uploadFile(formdata));
+            }
+
+            // 回调处理
+            Promise.allSettled(queue)
+                .then((results) => {
+                    results.forEach((result, i) => {
+                        if (result.status == "fulfilled") {
+                            let url = result.value.data?.data?.[0];
+                            this.resolved_files.push({
+                                url: url,
+                                filename: list[i]["name"],
+                                type: list[i]["type"],
+                                ext: list[i]["name"].split(".").pop(),
+                            });
+                        }
+                    });
+                    this.insertFiles();
+                })
+                .finally(() => {
+                    // 上传完成后清空input
+                    this.images = [];
+                    this.files = [];
+                    this.resolved_files = [];
+                });
+        },
+        // 插入正文
+        insertFiles: function() {
+            for (let item of this.resolved_files) {
+                // 插入图片
+                if (this.image_ext.includes(item.ext)) {
+                    this.$md.insertText(this.$md.getTextareaDom(), {
+                        prefix: `![${item.filename}](${item.url})`,
+                        subfix: "",
+                        str: "",
+                    });
+                    // 插入文字链接
+                } else {
+                    this.$md.insertText(this.$md.getTextareaDom(), {
+                        prefix: `[${item.filename}](${item.url})`,
+                        subfix: "",
+                        str: "",
+                    });
+                }
+            }
+        },
+        // 更新触发
+        updateData: function(data, render) {
+            this.$emit("updateData", {
+                data,
+                render,
+            });
+        },
+        // 插入附件
+        insertAttachments: function(data) {
+            // TODO:
+            // tinyMCE.editors["tinymce"].insertContent(data.html);
+        },
+        insertResource: function(data) {
+            // TODO:
+            // tinyMCE.editors["tinymce"].insertContent(data);
+        },
+    },
+    filters: {},
+    created: function() {},
+    mounted: function() {},
+};
+</script>
+
+<style lang="less">
+@import "../assets/css/markdown.less";
+</style>

package/src/Resource.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="c-resource">
         <!-- 上传触发按钮 -->
-        <el-button class="u-switch" type="primary" @click="dialogVisible = true">
+        <el-button class="u-switch" type="primary" @click="dialogVisible = true"  :disabled="!enable">
             <img class="u-icon" svg-inline src="../assets/img/jx3.svg" />剑三资源
         </el-button>
 
@@ -268,7 +268,12 @@ import User from "@jx3box/jx3box-common/js/user";
 import { iconLink } from "@jx3box/jx3box-common/js/utils";
 export default {
     name: "Resource",
-    props: [],
+    props: {
+        enable : {
+            type: Boolean,
+            default : true,
+        }
+    },
     data: function () {
         return {
             dialogVisible: false,

package/src/Tinymce.vue

@@ -1,11 +1,16 @@
 <template>
     <div class="c-editor-tinymce">
+
+        <slot name="prepend"></slot>
+
         <div class="c-editor-header">
             <Upload v-if="attachmentEnable" @insert="insertAttachments" />
             <Resource v-if="resourceEnable" @insert="insertResource" />
-            <slot></slot>
         </div>
         <Emotion class="c-editor-emotion" @selected="emotionSelected"></Emotion>
+
+        <slot></slot>
+
         <editor
             id="tinymce"
             v-model="data"
@@ -22,6 +27,8 @@
                 >[编辑器使用指南]</a
             >
         </el-alert>
+
+        <slot name="append"></slot>
     </div>
 </template>
 
@@ -157,6 +164,7 @@ export default {
                 //     },
                 // ],
             },
+            mode : 'tinymce'
         };
     },
     model: {
@@ -188,7 +196,7 @@ export default {
             const pathKey = key.slice(1);
             const IMAGE = `<img class="t-emotion" src="${__ossRoot}image/emotion/${pathKey}.gif" alt="${key}" />`
             tinyMCE.editors["tinymce"].insertContent(IMAGE)
-        }
+        },
     },
     mounted: function() {},
     components: {

package/src/Upload.vue

@@ -1,35 +1,18 @@
 <template>
     <div class="c-upload">
         <!-- 上传触发按钮 -->
-        <el-button type="primary" @click="dialogVisible = true" icon="el-icon-upload">{{btn_txt}}</el-button>
+        <el-button type="primary" @click="dialogVisible = true" icon="el-icon-upload" :disabled="!enable">{{ btn_txt }}</el-button>
 
         <!-- 弹出界面 -->
         <el-dialog class="c-large-dialog" title="上传" :visible.sync="dialogVisible">
             <!-- 清空按钮 -->
-            <el-button
-                class="u-upload-clear"
-                plain
-                icon="el-icon-delete"
-                size="mini"
-                @click="clear"
-            >清空</el-button>
+            <el-button class="u-upload-clear" plain icon="el-icon-delete" size="mini" @click="clear">清空</el-button>
 
             <!-- 限制提示 -->
             <el-alert class="u-upload-tip" :title="tip" type="info" show-icon :closable="false"></el-alert>
 
             <!-- 文件区 -->
-            <el-upload
-                :action="API"
-                list-type="picture-card"
-                :auto-upload="false"
-                :limit="10"
-                multiple
-                with-credentials
-                :file-list="fileList"
-                :on-change="change"
-                ref="uploadbox"
-                :accept="accept"
-            >
+            <el-upload :action="API" list-type="picture-card" :auto-upload="false" :limit="10" multiple with-credentials :file-list="fileList" :on-change="change" ref="uploadbox" :accept="accept">
                 <!-- :accept="accept" -->
                 <i slot="default" class="el-icon-plus"></i>
 
@@ -45,12 +28,7 @@
                     }"
                 >
                     <!-- 图片类型 -->
-                    <img
-                        v-if="file.is_img"
-                        class="el-upload-list__item-thumbnail u-imgbox"
-                        :src="file.url"
-                        alt
-                    />
+                    <img v-if="file.is_img" class="el-upload-list__item-thumbnail u-imgbox" :src="file.url" alt />
                     <!-- 其他类型 -->
                     <div v-else class="u-filebox">
                         <img class="u-fileplaceholder" svg-inline src="../assets/img/file.svg" />
@@ -67,9 +45,7 @@
             <span slot="footer" class="dialog-footer">
                 <el-button @click="dialogVisible = false">取 消</el-button>
                 <el-button type="primary" @click="insert">
-                    {{
-                    buttonTXT
-                    }}
+                    {{ buttonTXT }}
                 </el-button>
             </span>
         </el-dialog>
@@ -87,8 +63,25 @@ const imgtypes = ["jpg", "png", "gif", "bmp", "webp"];
 
 export default {
     name: "Upload",
-    props: ["text",'onlyImage','desc','accept'],
-    data: function () {
+    props: {
+        text: {
+            type: String,
+        },
+        onlyImage: {
+            type: Boolean,
+        },
+        desc: {
+            type: String,
+        },
+        accept: {
+            type: String,
+        },
+        enable : {
+            type: Boolean,
+            default : true,
+        }
+    },
+    data: function() {
         return {
             API: API,
             dialogVisible: false,
@@ -106,21 +99,21 @@ export default {
     watch: {
         fileList: {
             deep: true,
-            handler: function (newval) {
+            handler: function(newval) {
                 this.$emit("update", newval);
             },
         },
-        insertList: function (newval) {
+        insertList: function(newval) {
             this.$emit("htmlUpdate", newval);
         },
     },
     computed: {
-        buttonTXT: function () {
+        buttonTXT: function() {
             return this.selectedCount ? "插 入" : "确 定";
         },
     },
     methods: {
-        change: function (file, fileList) {
+        change: function(file, fileList) {
             if (file.status != "success") {
                 // 判断大小
                 // if (file.size > this.sizeLimit) {
@@ -133,7 +126,7 @@ export default {
                 let ext = file.name.split(".").pop();
                 let is_img = imgtypes.includes(ext);
 
-                if(this.onlyImage && !is_img) return
+                if (this.onlyImage && !is_img) return;
 
                 // 构建数据
                 let fdata = new FormData();
@@ -166,36 +159,30 @@ export default {
                     })
                     .catch((err) => {
                         if (err.response.data.code) {
-                            this.$message.error(
-                                `[${err.response.data.code}] ${err.response.data.message}`
-                            );
+                            this.$message.error(`[${err.response.data.code}] ${err.response.data.message}`);
                         } else {
                             this.$message.error("请求异常");
                         }
                     });
             }
         },
-        select: function (file) {
+        select: function(file) {
             if (file.status == "success") {
                 this.$set(file, "selected", !file.selected);
                 file.selected ? this.selectedCount++ : this.selectedCount--;
             }
         },
-        buildHTML: function () {
+        buildHTML: function() {
             let list = [];
             this.fileList.forEach((file) => {
                 if (file.selected) {
-                    file.is_img
-                        ? list.push(`<img src="${file.url}" />`)
-                        : list.push(
-                              `<a target="_blank" href="${file.url}">${file.name}</a>`
-                          );
+                    file.is_img ? list.push(`<img src="${file.url}" />`) : list.push(`<a target="_blank" href="${file.url}">${file.name}</a>`);
                 }
             });
             this.insertList = list.join(" \n");
             return this.insertList;
         },
-        insert: function () {
+        insert: function() {
             // 关闭窗口
             this.dialogVisible = false;
 
@@ -211,17 +198,17 @@ export default {
             //移除所有选择状态
             this.resetSelectStatus();
         },
-        resetSelectStatus: function () {
+        resetSelectStatus: function() {
             this.fileList.forEach((file, i) => {
                 this.$set(this.fileList[i], "selected", false);
             });
             this.selectedCount = 0;
         },
-        clear: function () {
+        clear: function() {
             this.$refs.uploadbox.clearFiles();
             this.fileList = [];
         },
-        removeFile: function (fileList, uid) {
+        removeFile: function(fileList, uid) {
             fileList.forEach((file, i) => {
                 if (file.uid == uid) {
                     fileList.splice(i, 1);
@@ -229,7 +216,7 @@ export default {
             });
         },
     },
-    mounted: function () {},
+    mounted: function() {},
     components: {},
 };
 </script>

package/vue.config.js

@@ -18,6 +18,12 @@ module.exports = {
             template : 'public/tinymce.html',
             filename:'tinymce/index.html',
         },
+        markdown : {
+            title : 'Markdown编辑器',
+            entry:'demo/M.js',
+            template : 'public/article.html',
+            filename:'markdown/index.html',
+        },
     },
 
 
@@ -48,16 +54,22 @@ module.exports = {
         '/',
     
     //❤️ Porxy ~
-    // devServer: {
-    //     proxy: {
-    //         "/api": {
-    //             "target": process.env["DEV_SERVER"] == "true" ? "http://localhost:51818" : "https://next.jx3box.com",
-    //             "onProxyReq": function (request) {
-    //                 request.setHeader("origin", "");
-    //             }
-    //         }
-    //     }
-    // },
+    devServer: {
+        proxy: {
+            "/api/cms": {
+                "target": process.env["DEV_SERVER"] == "true" ? "http://localhost:5120" : "https://cms.jx3box.com",
+                "onProxyReq": function (request) {
+                    request.setHeader("origin", "");
+                }
+            },
+            "/api": {
+                "target": process.env["DEV_SERVER"] == "true" ? "http://localhost:51818" : "https://next.jx3box.com",
+                "onProxyReq": function (request) {
+                    request.setHeader("origin", "");
+                }
+            }
+        }
+    },
 
     chainWebpack: config => {