新增 markdown编辑器、Yaml编辑器组件

2019-03-08 16:37:16 +08:00
parent aa964b65af
commit 0642c46288
8 changed files with 355 additions and 6 deletions
--- a/package.json
+++ b/package.json
@@ -36,7 +36,9 @@
    "file-saver": "1.3.8",
    "sockjs-client": "1.3.0",
    "stompjs": "2.3.3",
-    "wangeditor": ">=3.0.0"
+    "wangeditor": ">=3.0.0",
+    "codemirror": "^5.38.0",
+    "mavon-editor": "^2.7.0"
  },
  "devDependencies": {
    "autoprefixer": "8.5.0",
--- a/src/components/YamlEdit/index.vue
+++ b/src/components/YamlEdit/index.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="json-editor">
+    <textarea ref="textarea"/>
+  </div>
+</template>
+
+<script>
+import CodeMirror from 'codemirror'
+import 'codemirror/lib/codemirror.css'
+// 替换主题这里需修改名称
+import 'codemirror/theme/idea.css'
+require('codemirror/mode/yaml/yaml.js')
+export default {
+  props: {
+    value: {
+      type: String,
+      required: true
+    },
+    height: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      editor: false
+    }
+  },
+  watch: {
+    value(value) {
+      const editorValue = this.editor.getValue()
+      if (value !== editorValue) {
+        this.editor.setValue(this.value)
+      }
+    }
+  },
+  mounted() {
+    this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {
+      mode: 'text/x-yaml',
+      lineNumbers: true,
+      lint: true,
+      lineWrapping: true,
+      tabSize: 2,
+      cursorHeight: 0.9,
+      // 替换主题这里需修改名称
+      theme: 'idea'
+    })
+    this.editor.setSize('auto', this.height)
+    this.editor.setValue(this.value)
+    this.editor.on('change', cm => {
+      this.$emit('changed', cm.getValue())
+      this.$emit('input', cm.getValue())
+    })
+  },
+  methods: {
+    getValue() {
+      return this.editor.getValue()
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .json-editor{
+    height: 100%;
+    margin-bottom: 10px;
+  }
+  .json-editor >>> .CodeMirror {
+    font-size: 13px;
+    overflow-y:auto;
+    font-weight:normal
+  }
+  .json-editor >>> .CodeMirror-scroll{
+  }
+  .json-editor >>> .cm-s-rubyblue span.cm-string {
+    color: #F08047;
+  }
+</style>
--- a/src/icons/svg/markdown.svg
+++ b/src/icons/svg/markdown.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1552025141027" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="983" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M895.318 192H128.682C93.008 192 64 220.968 64 256.616v510.698C64 802.986 93.008 832 128.682 832h766.636C930.992 832 960 802.986 960 767.312V256.616C960 220.968 930.992 192 895.318 192zM568.046 704h-112.096v-192l-84.08 107.756L287.826 512v192H175.738V320h112.088l84.044 135.96 84.08-135.96h112.096v384z m167.314 0l-139.27-192h84v-192h112.086v192h84.054l-140.906 192h0.036z" p-id="984" fill="#bfbfbf"></path></svg>
--- a/src/main.js
+++ b/src/main.js
@@ -4,6 +4,8 @@ import 'normalize.css/normalize.css' // A modern alternative to CSS resets
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
+import mavonEditor from 'mavon-editor'
+import 'mavon-editor/dist/css/index.css'

 import '@/styles/index.scss' // global css

@@ -14,6 +16,7 @@ import store from './store'
 import '@/icons' // icon
 import './permission' // permission control

+Vue.use(mavonEditor)
 Vue.use(ElementUI, { locale })
 Vue.config.productionTip = false

--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -77,13 +77,11 @@ a:hover {
 .warn-content{
  background: rgba(66,185,131,.1);
  border-radius: 2px;
-  padding: 16px;
-  padding: 1rem;
-  line-height: 1.6rem;
+  padding: 11px;
  word-spacing: .05rem;
  a{
    color: #42b983;
-    font-weight: 600;
+    font-weight: 400;
  }
 }

--- a/src/views/components/IconSelect.vue
+++ b/src/views/components/IconSelect.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="icons-container">
    <p class="warn-content">
-      <a href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/icon.html" target="_blank">Add and use</a>
+      使用教程参考 <a href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/icon.html" target="_blank">Documentation</a>
    </p>
    <div class="icons-wrapper">
      <div v-for="item of iconsMap" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
--- a/src/views/components/MarkDown.vue
+++ b/src/views/components/MarkDown.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="app-container">
+    <p class="warn-content">
+      Markdown 基于
+      <a href="https://github.com/hinesboy/mavonEditor" target="_blank">mavonEditor</a>
+    </p>
+    <mavon-editor ref="md" :style="'height:' + height" @imgAdd="imgAdd" @imgDel="imgDel"/>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import { mapGetters } from 'vuex'
+import { getToken } from '@/utils/auth'
+import { del } from '@/api/picture'
+export default {
+  name: 'Markdown',
+  data() {
+    return {
+      height: document.documentElement.clientHeight - 200 + 'px',
+      data: null,
+      images: {}
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'imagesUploadApi'
+    ])
+  },
+  mounted() {
+    this.$refs.md.$refs.toolbar_left.img_file = []
+  },
+  methods: {
+    imgAdd(pos, $file) {
+      var formdata = new FormData()
+      formdata.append('file', $file)
+      axios({
+        url: this.imagesUploadApi,
+        method: 'post',
+        data: formdata,
+        headers: { 'Content-Type': 'multipart/form-data', 'Authorization': 'Bearer ' + getToken() }
+      }).then((data) => {
+        this.data = data.data
+        this.$refs.md.$img2Url(pos, this.data.data[0])
+
+        this.images[this.data.data[0]] = this.data
+      }).catch((error) => {
+        console.log('image upload error', error)
+        this.$refs.md.$refs.toolbar_left.$imgDel(pos)
+      })
+    },
+    imgDel(file, pos) {
+      const image = this.images[file[1]]
+      if (image) {
+        del(image.id).then(res => {
+        }).catch(err => {
+          console.log(err.response.data.message)
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
--- a/src/views/components/YamlEdit.vue
+++ b/src/views/components/YamlEdit.vue
@@ -0,0 +1,201 @@
+<template>
+  <div class="app-container">
+    <p class="warn-content">
+      Yaml编辑器 基于
+      <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirror</a>，
+      主题预览地址 <a href="https://codemirror.net/demo/theme.html#idea" target="_blank">Theme</a>
+    </p>
+    <Yaml :value="value" :height="height"/>
+  </div>
+</template>
+
+<script>
+import Yaml from '@/components/YamlEdit/index'
+export default {
+  name: 'YamlEdit',
+  components: { Yaml },
+  data() {
+    return {
+      height: document.documentElement.clientHeight - 210 + 'px',
+      value: '# 展示数据，如需更换主题，请在src/components/YamlEdit 目录中搜索原主题名称进行替换\n' +
+        '\n' +
+        '# ===================================================================\n' +
+        '# Spring Boot configuration.\n' +
+        '#\n' +
+        '# This configuration will be overridden by the Spring profile you use,\n' +
+        '# for example application-dev.yml if you use the "dev" profile.\n' +
+        '#\n' +
+        '# More information on profiles: https://www.jhipster.tech/profiles/\n' +
+        '# More information on configuration properties: https://www.jhipster.tech/common-application-properties/\n' +
+        '# ===================================================================\n' +
+        '\n' +
+        '# ===================================================================\n' +
+        '# Standard Spring Boot properties.\n' +
+        '# Full reference is available at:\n' +
+        '# http://docs.spring.io/spring-boot/docs/current/reference/html/common-application-properties.html\n' +
+        '# ===================================================================\n' +
+        '\n' +
+        'eureka:\n' +
+        '    client:\n' +
+        '        enabled: true\n' +
+        '        healthcheck:\n' +
+        '            enabled: true\n' +
+        '        fetch-registry: true\n' +
+        '        register-with-eureka: true\n' +
+        '        instance-info-replication-interval-seconds: 10\n' +
+        '        registry-fetch-interval-seconds: 10\n' +
+        '    instance:\n' +
+        '        appname: product\n' +
+        '        instanceId: product:${spring.application.instance-id:${random.value}}\n' +
+        '        #instanceId: 127.0.0.1:9080\n' +
+        '        lease-renewal-interval-in-seconds: 5\n' +
+        '        lease-expiration-duration-in-seconds: 10\n' +
+        '        status-page-url-path: ${management.endpoints.web.base-path}/info\n' +
+        '        health-check-url-path: ${management.endpoints.web.base-path}/health\n' +
+        '        metadata-map:\n' +
+        '            zone: primary # This is needed for the load balancer\n' +
+        '            profile: ${spring.profiles.active}\n' +
+        '            version: ${info.project.version:}\n' +
+        '            git-version: ${git.commit.id.describe:}\n' +
+        '            git-commit: ${git.commit.id.abbrev:}\n' +
+        '            git-branch: ${git.branch:}\n' +
+        'ribbon:\n' +
+        '    ReadTimeout: 120000\n' +
+        '    ConnectTimeout: 300000\n' +
+        '    eureka:\n' +
+        '        enabled: true\n' +
+        'zuul:\n' +
+        '  host:\n' +
+        '    connect-timeout-millis: 5000\n' +
+        '    max-per-route-connections: 10000\n' +
+        '    max-total-connections: 5000\n' +
+        '    socket-timeout-millis: 60000\n' +
+        '  semaphore:\n' +
+        '    max-semaphores: 500\n' +
+        '\n' +
+        'feign:\n' +
+        '    hystrix:\n' +
+        '        enabled: true\n' +
+        '    client:\n' +
+        '        config:\n' +
+        '            default:\n' +
+        '                connectTimeout: 500000\n' +
+        '                readTimeout: 500000\n' +
+        '\n' +
+        '# See https://github.com/Netflix/Hystrix/wiki/Configuration\n' +
+        'hystrix:\n' +
+        '    command:\n' +
+        '        default:\n' +
+        '            circuitBreaker:\n' +
+        '                sleepWindowInMilliseconds: 100000\n' +
+        '                forceClosed: true\n' +
+        '            execution:\n' +
+        '                isolation:\n' +
+        '#                    strategy: SEMAPHORE\n' +
+        '# See https://github.com/spring-cloud/spring-cloud-netflix/issues/1330\n' +
+        '                    thread:\n' +
+        '                        timeoutInMilliseconds: 60000\n' +
+        '    shareSecurityContext: true\n' +
+        '\n' +
+        'management:\n' +
+        '    endpoints:\n' +
+        '        web:\n' +
+        '            base-path: /management\n' +
+        '            exposure:\n' +
+        '                include: ["configprops", "env", "health", "info", "threaddump"]\n' +
+        '    endpoint:\n' +
+        '        health:\n' +
+        '            show-details: when_authorized\n' +
+        '    info:\n' +
+        '        git:\n' +
+        '            mode: full\n' +
+        '    health:\n' +
+        '        mail:\n' +
+        '            enabled: false # When using the MailService, configure an SMTP server and set this to true\n' +
+        '    metrics:\n' +
+        '        enabled: false # http://micrometer.io/ is disabled by default, as we use http://metrics.dropwizard.io/ instead\n' +
+        '\n' +
+        'spring:\n' +
+        '    application:\n' +
+        '        name: product\n' +
+        '    jpa:\n' +
+        '        open-in-view: false\n' +
+        '        hibernate:\n' +
+        '            ddl-auto: update\n' +
+        '            naming:\n' +
+        '                physical-strategy: org.springframework.boot.orm.jpa.hibernate.SpringPhysicalNamingStrategy\n' +
+        '                implicit-strategy: org.springframework.boot.orm.jpa.hibernate.SpringImplicitNamingStrategy\n' +
+        '    messages:\n' +
+        '        basename: i18n/messages\n' +
+        '    mvc:\n' +
+        '        favicon:\n' +
+        '            enabled: false\n' +
+        '    thymeleaf:\n' +
+        '        mode: HTML\n' +
+        'security:\n' +
+        '    oauth2:\n' +
+        '        resource:\n' +
+        '            filter-order: 3\n' +
+        '\n' +
+        'server:\n' +
+        '    servlet:\n' +
+        '        session:\n' +
+        '            cookie:\n' +
+        '                http-only: true\n' +
+        '\n' +
+        '# Properties to be exposed on the /info management endpoint\n' +
+        'info:\n' +
+        '    # Comma separated list of profiles that will trigger the ribbon to show\n' +
+        '    display-ribbon-on-profiles: "dev"\n' +
+        '\n' +
+        '# ===================================================================\n' +
+        '# JHipster specific properties\n' +
+        '#\n' +
+        '# Full reference is available at: https://www.jhipster.tech/common-application-properties/\n' +
+        '# ===================================================================\n' +
+        '\n' +
+        'jhipster:\n' +
+        '    async:\n' +
+        '        core-pool-size: 2\n' +
+        '        max-pool-size: 50\n' +
+        '        queue-capacity: 10000\n' +
+        '    # By default CORS is disabled. Uncomment to enable.\n' +
+        '    #cors:\n' +
+        '        #allowed-origins: "*"\n' +
+        '        #allowed-methods: "*"\n' +
+        '        #allowed-headers: "*"\n' +
+        '        #exposed-headers: "Authorization,Link,X-Total-Count"\n' +
+        '        #allow-credentials: true\n' +
+        '        #max-age: 1800\n' +
+        '    mail:\n' +
+        '        from: product@localhost\n' +
+        '    swagger:\n' +
+        '        default-include-pattern: /api/.*\n' +
+        '        title: product API\n' +
+        '        description: product API documentation\n' +
+        '        version: 0.0.1\n' +
+        '        terms-of-service-url:\n' +
+        '        contact-name:\n' +
+        '        contact-url:\n' +
+        '        contact-email:\n' +
+        '        license:\n' +
+        '        license-url:\n' +
+        '\n' +
+        '# ===================================================================\n' +
+        '# Application specific properties\n' +
+        '# Add your own application properties here, see the ApplicationProperties class\n' +
+        '# to have type-safe configuration, like in the JHipsterProperties above\n' +
+        '#\n' +
+        '# More documentation is available at:\n' +
+        '# https://www.jhipster.tech/common-application-properties/\n' +
+        '# ===================================================================\n' +
+        '\n' +
+        '# application:\n'
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
				`@@ -0,0 +1 @@`
				<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1552025141027" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="983" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M895.318 192H128.682C93.008 192 64 220.968 64 256.616v510.698C64 802.986 93.008 832 128.682 832h766.636C930.992 832 960 802.986 960 767.312V256.616C960 220.968 930.992 192 895.318 192zM568.046 704h-112.096v-192l-84.08 107.756L287.826 512v192H175.738V320h112.088l84.044 135.96 84.08-135.96h112.096v384z m167.314 0l-139.27-192h84v-192h112.086v192h84.054l-140.906 192h0.036z" p-id="984" fill="#bfbfbf"></path></svg>