@jx3box/jx3box-editor 0.9.3 → 0.9.4

package/assets/css/markdown.less

@@ -0,0 +1,19 @@
+.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/package.json

@@ -1,9 +1,10 @@
 {
     "name": "@jx3box/jx3box-editor",
-    "version": "0.9.3",
+    "version": "0.9.4",
     "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",
@@ -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.5",
         "@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,155 @@
+<template>
+    <div class="c-markdown">
+        <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 />
+        <mavon-editor class="c-markdown-box" ref="md" v-model="data" :editable="true" :navigation="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>
+    </div>
+</template>
+
+<script>
+import { uploadFile } from "../service/cms";
+export default {
+    name: "Markdown",
+    props: {
+        content: {
+            type: String,
+        },
+        editable: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    components: {},
+    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: {
+        // 将fileList类数组转为标准数组
+        // images_list: function() {
+        //     let images = Array.from(this.images);
+        //     let _images = [];
+        //     for (let item of images) {
+        //         if (this.allow_image_types.includes(item.type)) {
+        //             _images.push(item);
+        //         }
+        //     }
+        //     return _images;
+        // },
+        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: "",
+                    });
+                }
+            }
+        }
+
+    },
+    filters: {},
+    created: function() {},
+    mounted: function() {},
+};
+</script>
+
+<style lang="less">
+@import "../assets/css/markdown.less";
+</style>

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 => {