页面编辑增加 Paste Table

快速粘贴excel内容转化为Markdown表格

web_src/src/components/page/edit/Index.vue

@@ -39,6 +39,8 @@
           <el-button type="" size="medium" @click="insert_api_template">{{$t('insert_apidoc_template')}}</el-button>
           <el-button type="" size="medium" @click="insert_database_template">{{$t('insert_database_doc_template')}}</el-button>
           <el-button type="" size="medium" @click.native="ShowTemplateList">{{$t('more_templ')}}</el-button>
+          <el-button type="" size="medium" @click.native="ShowPasteTable">{{$t('paste_insert_table')}}</el-button>
+          
             <el-dropdown split-button type="" style="margin-left:100px;" size="medium" trigger="hover" >
               {{$t('json_tools')}}
               <el-dropdown-menu slot="dropdown">
@@ -75,6 +77,10 @@
         <!-- 附件列表 -->
         <AttachmentList :callback="insertValue" :item_id="item_id" :manage="true" :page_id="page_id" ref="AttachmentList"></AttachmentList>
 
+        <!-- 粘贴插入表格 -->
+        <PasteTable :callback="insertValue" :item_id="item_id" :manage="true" :page_id="page_id" ref="PasteTable"></PasteTable>
+        
+
 
       </el-container>
     <Footer> </Footer>
@@ -252,6 +258,8 @@ import JsonBeautify from '@/components/common/JsonBeautify'
 import TemplateList from '@/components/page/edit/TemplateList'
 import HistoryVersion from '@/components/page/edit/HistoryVersion'
 import AttachmentList from '@/components/page/edit/AttachmentList'
+import PasteTable from '@/components/page/edit/PasteTable'
+
 
 export default {
   data () {
@@ -313,7 +321,8 @@ export default {
     JsonBeautify,
     TemplateList,
     HistoryVersion,
-    AttachmentList
+    AttachmentList,
+    PasteTable
   },
   methods:{
     //获取页面内容
@@ -467,6 +476,11 @@ export default {
         let childRef = this.$refs.TemplateList ;//获取子组件
         childRef.show() ; 
     },
+    //粘贴插入表格
+    ShowPasteTable(){
+        let childRef = this.$refs.PasteTable ;//获取子组件
+        childRef.dialogFormVisible = true ;
+    },
 
     //展示历史版本
     ShowHistoryVersion(){

web_src/src/components/page/edit/PasteTable.vue

@@ -0,0 +1,72 @@
+<!-- 更多模板 -->
+<template>
+  <div class="hello">
+    <Header> </Header>
+
+    <el-container class="container-narrow">
+
+      <el-dialog :title="$t('paste_insert_table')" :modal="is_modal"  :visible.sync="dialogFormVisible">
+        <el-form >
+		  	<el-input type="textarea" class="dialoContent" placeholder="Paste (Ctrl + V) below an existing table data copied (Ctrl + C) from a spreadsheet (e.g. Microsoft Excel), a text document, a Markdown code, or even a website." :rows="10" v-model="content"></el-input>
+		  </el-form>
+		  <div slot="footer" class="dialog-footer">
+		    <el-button @click="dialogFormVisible = false">{{$t('cancel')}}</el-button>
+		    <el-button type="primary" @click="transform">{{$t('confirm')}}</el-button>
+		  </div>
+      </el-dialog>
+
+      </el-container>
+    <Footer> </Footer>
+    <div class=""></div>
+  </div>
+</template>
+
+<style>
+
+
+</style>
+
+<script>
+
+export default {
+  props:{
+    callback:'',
+    page_id:'',
+    is_modal:true,
+    is_show_recover_btn:true,
+  },
+  data () {
+    return {
+      currentDate: new Date(),
+      content: '',
+      dialogFormVisible: false,
+    };
+  },
+  components:{
+    
+  },
+  methods:{
+    transform: function (){
+      var md=this.content;
+      var sheet_str="\n\n";
+      for (const [index,row] of md.split("\n").entries()){
+        var cols=row.split("\t");
+        sheet_str += '| ' + cols.join(" | ") +" |\n";
+        if (index ==0){
+          for (var i=0;i<cols.length;i++){
+            sheet_str+='|:--- ';
+          }
+          sheet_str+=" |\n";
+        }
+      }
+      this.callback(sheet_str+"\n\n");
+      this.dialogFormVisible=false;
+    }
+
+  },
+  mounted () {
+    
+
+  }
+}
+</script>

web_src/static/lang/en.js

@@ -196,6 +196,7 @@ exports.default = {
     'insert_templ':'Insert',
     'delete_templ':'Delete',
     'save_success':'Save success',
+    'paste_insert_table': 'Insert table from paste',
 
     //catalog
     'add_cat':'Add catalog',

web_src/static/lang/zh-CN.js

@@ -201,6 +201,7 @@ exports.default = {
     'insert_templ':'插入此模板',
     'delete_templ':'删除模板',
     'save_success':'保存成功',
+    'paste_insert_table': '粘贴插入表格',
 
 
     //catalog