@jx3box/jx3box-editor 0.9.4 → 0.9.9

package/assets/css/markdown.less

@@ -1,19 +1,39 @@
-.c-markdown-toolbar-item{
+.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-markdown-toolbar-item {
     .mr(5px);
     .pointer;
     padding: 2px 5px 3px 5px;
 
-    &:hover{
+    &:hover {
         background: #e9e9eb;
         .r(4px);
     }
 }
-.c-markdown-store-item{
+.c-markdown-store-item {
     .none;
 }
 
-.c-markdown{
-    .markdown-body .hljs{
-        background-color:#f6f8fa;
+.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,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-editor",
-    "version": "0.9.4",
+    "version": "0.9.9",
     "description": "JX3BOX Article & Editor",
     "main": "index.js",
     "scripts": {
@@ -9,7 +9,7 @@
         "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"
     },
@@ -36,7 +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",
+        "@jx3box/markdown": "0.0.8",
         "@tinymce/tinymce-vue": "^3.2.2",
         "axios": "^0.19.2",
         "core-js": "^3.6.5",

package/src/Markdown.vue

@@ -1,17 +1,31 @@
 <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">
+    <div class="c-editor-markdown">
+
+        <slot name="prepend"></slot>
+
+        <div class="c-editor-header">
+            <Upload v-if="attachmentEnable" @insert="insertAttachments" :enable="true" />
+            <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="readOnly">
             <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",
@@ -23,8 +37,23 @@ export default {
             type: Boolean,
             default: true,
         },
+        attachmentEnable: {
+            type: Boolean,
+            default: true,
+        },
+        resourceEnable: {
+            type: Boolean,
+            default: true,
+        },
+        readOnly : {
+            type : Boolean,
+            default : false,
+        }
+    },
+    components: {
+        Upload,
+        Resource,
     },
-    components: {},
     data: function() {
         return {
             data: this.content,
@@ -52,24 +81,13 @@ export default {
         },
     },
     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
-        }
+        $md: function() {
+            return this.$refs.md;
+        },
     },
     methods: {
         // 点击上传按钮
@@ -108,12 +126,12 @@ export default {
                             this.resolved_files.push({
                                 url: url,
                                 filename: list[i]["name"],
-                                type : list[i]['type'],
-                                ext : list[i]["name"].split('.').pop()
+                                type: list[i]["type"],
+                                ext: list[i]["name"].split(".").pop(),
                             });
                         }
                     });
-                    this.insertFiles()
+                    this.insertFiles();
                 })
                 .finally(() => {
                     // 上传完成后清空input
@@ -123,17 +141,17 @@ export default {
                 });
         },
         // 插入正文
-        insertFiles : function (){
-            for(let item of this.resolved_files){
+        insertFiles: function() {
+            for (let item of this.resolved_files) {
                 // 插入图片
-                if(this.image_ext.includes(item.ext)){
+                if (this.image_ext.includes(item.ext)) {
                     this.$md.insertText(this.$md.getTextareaDom(), {
                         prefix: `![${item.filename}](${item.url})`,
                         subfix: "",
                         str: "",
                     });
-                // 插入文字链接
-                }else{
+                    // 插入文字链接
+                } else {
                     this.$md.insertText(this.$md.getTextareaDom(), {
                         prefix: `[${item.filename}](${item.url})`,
                         subfix: "",
@@ -141,8 +159,39 @@ export default {
                     });
                 }
             }
-        }
-
+        },
+        // 更新触发
+        updateData: function(data, render) {
+            this.$emit("updateData", {
+                data,
+                render,
+            });
+        },
+        // 插入附件
+        insertAttachments: function(data) {
+            let list = data?.list || []
+            for(let item of list){
+                // 插入图片
+                if (item.is_img) {
+                    this.$md.insertText(this.$md.getTextareaDom(), {
+                        prefix: `![${item.name}](${item.url})`,
+                        subfix: "",
+                        str: "",
+                    });
+                // 插入文字链接
+                } else {
+                    this.$md.insertText(this.$md.getTextareaDom(), {
+                        prefix: `[${item.name}](${item.url})`,
+                        subfix: "",
+                        str: "",
+                    });
+                }
+            }
+        },
+        insertResource: function(data) {
+            // TODO:
+            // tinyMCE.editors["tinymce"].insertContent(data);
+        },
     },
     filters: {},
     created: function() {},

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>