2. 程式人生 > >Vue Quill Editor自定義圖片/視訊上傳（Element UI + OSS）、字型、字型大小、段落等

Vue Quill Editor自定義圖片/視訊上傳（Element UI + OSS）、字型、字型大小、段落等

阿新 • • 發佈：2019-01-08

  近期專案中需要使用富文字編輯器，開始想到的富文字編輯器是百度的UEditor，UEditor功能齊全、外掛多，但是圖片只能上傳到本地伺服器，如果需要上傳到其他伺服器需要改動原始碼，而且是PHP、JSP、ASP、.Net版本，同時UEditor體積過大壓縮包有3.3M（jsp版本），載入速度慢。實際專案中並不需要那麼多的功能，只需要基礎的操作：字型、字型大小、標題、段落、圖片上傳、視訊上傳、居中對齊等；所以我們只需要一個輕量級的富文字編輯器就行，推薦使用Quill和TinyMCE，Quill和TinyMCE都是輕量級，外掛多，功能強，編輯能力優秀，介面好看。選擇Quill的原因是它所有能看到的，不能看到的功能統統都是一個一個獨立的模組，全部都是可以替換的，可以自定義編輯。
  站在巨人

vue-quill-editor的肩膀上進行Quill editor的自定義圖片/視訊上傳（Element UI + OSS）、字型、字型大小、標題、段落等封裝。先看效果再來編碼：
這裡寫圖片描述

<template>
  <div>
    <quill-editor ref="myTextEditor"
                  v-model="contentValue"
                  :options="editorOption"
                  @blur="onEditorBlur($event)"
                  @focus
 
="onEditorFocus($event)"
                  @ready="onEditorReady($event)"
                  @change="onEditorChange($event)"
                  class="cfpa-quill-editor" :style="{ height: quillEditorHeight + 'px' }">
      <div id="toolbar" slot="toolbar">
        <!-- Add a bold button -->
 

        <button class="ql-bold" title="加粗">Bold</button>
        <button class="ql-italic" title="斜體">Italic</button>
        <button class="ql-underline" title="下劃線">underline</button>
        <button class="ql-strike" title="刪除線">strike</button>
        <button class="ql-blockquote" title="引用"></button>
        <button class="ql-code-block" title="程式碼"></button>
        <button class="ql-header" value="1" title="標題1"></button>
        <button class="ql-header" value="2" title="標題2"></button>
        <!--Add list -->
        <button class="ql-list" value="ordered" title="有序列表"></button>
        <button class="ql-list" value="bullet" title="無序列表"></button>
        <!-- Add font size dropdown -->
        <select class="ql-header" title="段落格式">
          <option selected>段落</option>
          <option value="1">標題1</option>
          <option value="2">標題2</option>
          <option value="3">標題3</option>
          <option value="4">標題4</option>
          <option value="5">標題5</option>
          <option value="6">標題6</option>
        </select>
        <select class="ql-size" title="字型大小">
          <option value="10px">10px</option>
          <option value="12px">12px</option>
          <option value="14px">14px</option>
          <option value="16px" selected>16px</option>
          <option value="18px">18px</option>
          <option value="20px">20px</option>
        </select>
        <select class="ql-font" title="字型">
          <option value="SimSun" selected="selected"></option>
          <option value="SimHei"></option>
          <option value="Microsoft-YaHei"></option>
          <option value="KaiTi"></option>
          <option value="FangSong"></option>
          <option value="Arial"></option>
          <!-- <option value="Times-New-Roman"></option>
          <option value="sans-serif"></option> -->
        </select>

        <!-- Add subscript and superscript buttons -->
        <select class="ql-color" value="color" title="字型顏色"></select>
        <select class="ql-background" value="background" title="背景顏色"></select>
        <select class="ql-align" value="align" title="對齊"></select>
        <button class="ql-clean" title="還原"></button>
        <button class="ql-link" title="超連結"></button>
        <!-- You can also add your own -->
        <button id="custom-button" @click.prevent="fnOpenUploadImage" title="圖片"><i class="iconfont icon-tupian"></i></button>
        <button id="custom-button" @click.prevent="fnOpenUploadVideo" title="視訊"><i class="iconfont icon-video2"></i></button>
      </div>
    </quill-editor>
    <div :style="wordCount" v-if="wordCount" class="cfpa-quill-wordCount">
      <div class="cfpa-quill-wordCount-text">當前已經輸入<span style="color: red">{{contentLength}}</span>個字元</div>
    </div>
    <el-dialog :title="title" width="30%" :visible.sync="dialogFnOpenUpload" :close-on-click-modal="false">
      <file-upload :accept="accept" :data_extra="data_extra" @fnUploadSucess="fnUploadSucess" @fnCloseDialog="dialogFnOpenUpload = false" ref="fileUpload"></file-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFnOpenUpload = false">取 消</el-button>
        <el-button type="primary" @click="fnOpenUploadSubmit">確 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import FileUpload from '@/components/briefFileUpload'
import config from '@/config'
import { Quill, quillEditor } from 'vue-quill-editor'

// 圖片可收縮
import { ImageDrop } from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageDrop', ImageDrop)
Quill.register('modules/imageResize', ImageResize)

// 自定義字型大小
let Size = Quill.import('attributors/style/size')
Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px']
Quill.register(Size, true)

// 自定義字型型別
var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif']
var Font = Quill.import('formats/font')
Font.whitelist = fonts // 將字型加入到白名單
Quill.register(Font, true)

export default {
  name: 'editor',
  components: {
    quillEditor,
    FileUpload
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    editorHeight: {
      type: Number,
      default: 355
    },
    editorWordCount: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      contentValue: '',
      preContent: '',
      dialogFnOpenUpload: false,
      accept: '',
      uploadType: 'image',
      editorOption: {
        modules: {
          toolbar: '#toolbar',
          history: {
            delay: 1000,
            maxStack: 50,
            userOnly: false
          },
          imageDrop: true,
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
          }
        },
        placeholder: '請編寫內容...'
      },
      data_extra: {
        parentId: 0,
        fileName: ''
      },
      contentLength: 0,
      wordCount: '',
      title: '新增圖片',
      quillEditorHeight: 300
    }
  },
  computed: {
    editor () {
      return this.$refs.myTextEditor.quill
    }
  },
  methods: {
    /**
     * @description [onEditorBlur 失去焦點]
     * @author   zoumiao
     * @param {Object} editor 返回的quill物件
     * @return   {null}   [沒有返回]
     */
    onEditorBlur (editor) {
      this.$emit('editorBlur')
    },
    /**
     * @description [onEditorFocus 獲取焦點]
     * @author   zoumiao
     * @param {Object} editor 返回的quill物件
     * @return   {null}   [沒有返回]
     */
    onEditorFocus (editor) {
      this.$emit('editorFocus')
    },
    /**
     * @description [onEditorReady 可以輸入]
     * @author   zoumiao
     * @param {Object} editor 返回的quill物件
     * @return   {null}   [沒有返回]
     */
    onEditorReady (editor) {
    },
    /**
     * @description [onEditorChange 輸入文字改變事件]
     * @author   zoumiao
     * @param {Object} editor 返回的編輯物件{html, text, quill}
     * @return   {null}   [沒有返回]
     */
    onEditorChange (editor) {
      let html = editor.html
      this.preContent = html
      this.$emit('input', html)
      this.contentLength = this._.trim(editor.text).length
    },
    /**
     * @description [fnOpenUploadImage 上傳圖片]
     * @author   zoumiao
     * @return   {null}   [沒有返回]
     */
    fnOpenUploadImage () {
      this.uploadType = 'image'
      this.accept = config.accept.image
      this.title = '新增圖片'
      this.dialogFnOpenUpload = true
    },
    /**
     * @description [fnOpenUploadVideo 上傳視訊]
     * @author   zoumiao
     * @return   {null}   [沒有返回]
     */
    fnOpenUploadVideo () {
      this.uploadType = 'video'
      this.accept = config.accept.video
      this.title = '新增視訊'
      this.dialogFnOpenUpload = true
    },
    /**
     * [fnOpenUploadSubmit 提交上傳檔案]
     * @author   zoumiao
     * @return   {null}   [沒有返回]
     */
    async fnOpenUploadSubmit () {
      await this.$refs.fileUpload.$refs.upload.submit()
    },
    /**
     * [fnUploadSucess 上傳檔案成功]
     * @author   zoumiao
     * @param {Array} uploadFileUrlList [上傳檔案返回的url]
     * @return   {null}   [沒有返回]
     */
    fnUploadSucess (uploadFileUrlList) {
      this.editor.focus()
      for (let url of uploadFileUrlList) {
        this.editor.insertEmbed(this.editor.getSelection().index, this.uploadType, url)
      }
    }
  },
  created () {
    this.quillEditorHeight = document.body.clientHeight - this.editorHeight
    this.contentValue = this.value
    this.contentLength = this.editorWordCount || 0
  },
  mounted () {
    let toolbar = document.querySelector('div.ql-toolbar.ql-snow')
    if (toolbar) {
      let toolbarHeight = toolbar.offsetHeight
      this.wordCount = {
        'top': `${toolbarHeight}px`
      }
      return
    }
    this.wordCount = {
      'top': '42px'
    }
  },
  watch: {
    // Watch content change
    value (newVal, oldVal) {
      if (newVal && newVal !== this.preContent) {
        this.preContent = newVal
        this.contentValue = newVal
      } else if (!newVal) {
        this.contentValue = ''
      }
    }
  }
}
</script>
<style lang="scss">
.cfpa-quill-editor {
  line-height: 24px;
  .ql-snow {
    background-color: #ffffff;
  }
}
.cfpa-quill-wordCount {
  background-color: #ffffff;
  position: relative;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  line-height: 20px;
  font-size: 12px;
  .cfpa-quill-wordCount-text{
    text-align: right;
    margin-right: 10px;
    color: #aaa;
  }
}
</style>

1、自定義字型、字型大小、段落

<div id="toolbar" slot="toolbar">
  <select class="ql-header" title="段落格式">
    <option selected>段落</option>
    <option value="1">標題1</option>
    <option value="2">標題2</option>
    <option value="3">標題3</option>
    <option value="4">標題4</option>
    <option value="5">標題5</option>
    <option value="6">標題6</option>
  </select>
  <select class="ql-size" title="字型大小">
    <option value="10px">10px</option>
    <option value="12px">12px</option>
    <option value="14px">14px</option>
    <option value="16px" selected>16px</option>
    <option value="18px">18px</option>
    <option value="20px">20px</option>
  </select>
  <select class="ql-font" title="字型">
    <option value="SimSun" selected="selected"></option>
    <option value="SimHei"></option>
    <option value="Microsoft-YaHei"></option>
    <option value="KaiTi"></option>
    <option value="FangSong"></option>
    <option value="Arial"></option>
    <!-- <option value="Times-New-Roman"></option>
    <option value="sans-serif"></option> -->
  </select>
</div>

在Quill初始化之前進行註冊：

// 自定義字型大小
let Size = Quill.import('attributors/style/size')
Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px']
Quill.register(Size, true)

// 自定義字型型別
var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif']
var Font = Quill.import('formats/font')
Font.whitelist = fonts // 將字型加入到白名單
Quill.register(Font, true)

  自定義字型、字型大小、段落需要在使用Quill編輯器之前引入quill.css，可以在App.vue或者main.js中引入。

.ql-snow .ql-picker.ql-size,
.ql-snow .ql-picker.ql-header {
  width: 75px !important;
}

.ql-snow .ql-picker.ql-font {
  width: 80px !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
  content: '10px';
  font-size: 10px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
  content: '12px';
  font-size: 12px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
  content: '14px';
  font-size: 14px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
  content: '16px';
  font-size: 16px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
  content: '18px';
  font-size: 18px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
  content: '20px';
  font-size: 20px;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before {
  content: "宋體";
  font-family: "SimSun";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
  content: "黑體";
  font-family: "SimHei";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
  content: "微軟雅黑";
  font-family: "Microsoft YaHei";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
  content: "楷體";
  font-family: "KaiTi";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
  content: "仿宋";
  font-family: "FangSong";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {
  content: "Arial";
  font-family: "Arial";
}

/* .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {
  content: "Times New Roman";
  font-family: "Times New Roman";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]::before {
  content: "sans-serif";
  font-family: "sans-serif";
} */

.ql-font-SimSun {
  font-family: "SimSun";
}

.ql-font-SimHei {
  font-family: "SimHei";
}

.ql-font-Microsoft-YaHei {
  font-family: "Microsoft YaHei";
}

.ql-font-KaiTi {
  font-family: "KaiTi";
}

.ql-font-FangSong {
  font-family: "FangSong";
}

.ql-font-Arial {
  font-family: "Arial";
}

/* .ql-font-Times-New-Roman {
  font-family: "Times New Roman";
}

.ql-font-sans-serif {
  font-family: "sans-serif";
} */

2、自定義圖片和視訊上傳（Element UI + OSS）

<div id="toolbar" slot="toolbar">
  <button id="custom-button" @click.prevent="fnOpenUploadImage" title="圖片"><i class="iconfont icon-tupian"></i></button>
  <button id="custom-button" @click.prevent="fnOpenUploadVideo" title="視訊"><i class="iconfont icon-video2"></i></button>
</div>

  自定義圖片和視訊上傳使用的是Element UI + OSS上傳元件，參考上一篇Vue Element UI + OSS上傳檔案，上傳成功之後需要把圖片或者視訊插入內容區域，通過檢視Quill文件，

insertEmbed(index: Number, type: String, value: any, source: String = 'api'): Delta

可以插入視訊和圖片：

    /**
     * [fnUploadSucess 提交上傳檔案函式]
     * @author   zoumiao
     * @param {Array} uploadFileUrlList [上傳檔案返回的url]
     * @return   {null}   [沒有返回]
     */
    fnUploadSucess (uploadFileUrlList) {
      this.editor.focus()
      for (let url of uploadFileUrlList) {
        this.editor.insertEmbed(this.editor.getSelection().index, this.uploadType, url)
      }
    }

3、字數統計
  Quill沒有位元組提供字數統計，API提供了getLength方法，但是如果輸入空格，該方法也會計算為字元；通過editor-change事件來計算字元個數：

    /**
     * @description [onEditorChange 輸入文字改變事件]
     * @author   zoumiao
     * @param {Object} editor 返回的編輯物件{html, text, quill}
     * @return   {null}   [沒有返回]
     */
    onEditorChange (editor) {
      let html = editor.html
      this.preContent = html
      this.$emit('input', html)
      this.contentLength = this._.trim(editor.text).length
    },

4、圖片可收縮

import { ImageDrop } from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageDrop', ImageDrop)
Quill.register('modules/imageResize', ImageResize)

Quill配置項中也要進行配置：

editorOption: {
        modules: {
          toolbar: '#toolbar',
          history: {
            delay: 1000,
            maxStack: 50,
            userOnly: false
          },
          imageDrop: true,
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
          }
        }
      }

相關推薦

Vue Quill Editor自定義圖片/視訊上傳（Element UI + OSS）、字型、字型大小、段落等

  近期專案中需要使用富文字編輯器，開始想到的富文字編輯器是百度的UEditor，UEditor功能齊全、外掛多，但是圖片只能上傳到本地伺服器，如果需要上傳到其他伺服器需要改動原始碼，而且是PHP、JSP、ASP、.Net版本，同時UEditor體積過大壓縮包有

vue-quill-editor自定義圖片上傳

我們通常都會使用富文字編輯器在後臺編輯內容，開發vue當然也少不了，我們通過vue官網的連結可以找到一些資源，或者去github上查詢一些開源的編輯器。我使用的是vue-quill-editor，它的介面很簡潔，功能也滿足平時的編輯需要，不過於臃腫，但是它預設的圖片上傳是使

基於jQuery的自定義Video視訊播放元件（相容IE6~8）

之前用過video.js外掛寫過視訊元件，但是自己一般僅僅是播放個視訊，裡面有好多功能用不到，改著不太方便，於是就自己用jQuery封裝了一個外掛，控制器之類的樣式是可以自定義的，支援中英文切換，廢話不多說，下面上圖。 高版本瀏覽器video樣式 注：如果遇到進度

Vue之使用 vue-quill-editor_自定義toolbar_修改圖片上傳方式

1.安裝npm install vue-quill-editor --save 2.引入import { quillEditor } from 'vue-quill-editor' components: { quillEditor }, 3.使用<quill-editor v-model="

editor 自定義插入視訊，封面和二次編輯的問題

轉載地址 https://www.sunjs.com/article/detail/0236b555894e42f2b30f17193021ad76.htmlueditor的插入視訊有很多問題，首先插入mp4顯示位址列錯誤等資訊，其次沒有封面poster，回顯也有問題，下邊我

自定義方法限制上傳圖片（檔案）的格式

import org.apache.catalina.core.ApplicationPart; import org.springframework.web.servlet.HandlerInterceptor; import org.springframework.w

UEditor 自定義圖片視訊尺寸校驗

UEditor支援單圖、多圖以及視訊上傳，編輯器配置項支援檔案格式、檔案大小校驗，對於檔案寬高尺寸校驗暫不支援。這裡記錄一下自定義圖片、視訊尺寸校驗過程，內容核心主要是擴充套件校驗邏輯和增加自定義提示文字。 ### 單圖上傳 單圖上傳的邏輯在`ueditor.all.js`中，由`simpleUpload`

NPOI+反射+自定義特性實現上傳excel轉List及驗證

type set custom pre script private property xssf don 1.自定義特性 [AttributeUsage(AttributeTargets.Property, AllowMultiple = false, Inherited

beetl自定義標籤 select 上傳檔案

select @var res = res!dict.allDict(); //結果集 @var valueKey = valueKey; //結果物件中作為select > option > value 值的屬性名 @var textKey = textKey;

自定義檔案的上傳

如同我的上一篇部落格，在這裡上傳檔案的思路和上傳照片的思路是大致一樣的，只需要改變幾個地方。 在這裡涉及到一個問題就是伺服器檔案的名字是唯一的，我們可以用的uuid來大體實現一個唯一的檔名 def createFileName():      fileName = str

自定義input檔案上傳樣式

檔案上傳是我們經常會用到的功能，但是原生的input樣式太醜了，能不能自定義一個input檔案上傳樣式呢？ 我這裡寫了兩種方法，form表單提交跟ajax非同步提交都沒有問題，自動上傳或者點選上傳按鈕上傳也都沒問題 先看效果：     程式碼貼出來： 方法1 　　　　<!--

完美解決ueditor和neditor上傳圖片(視訊)上傳成功顯示異常

(一)前言: 二次開發編輯器neditor(基於百度編輯器ueditor):介面相對於ueditor會更美觀. (二) 問題描述: 最近在公司專案中遇到一個比較奇葩的問題。neiditor編輯器上傳圖片用時，插入圖片初始為loading圖，載入成功後才顯示上傳的圖片。插入圖

開發懸浮球SDK之自定義view 下篇 — 裁剪圓形（以及其他形狀）背景圖片並設定文字

本文主要是講自定義view中剪下圓形背景圖並設定文字的實現過程和其中遇到的問題及相關技術介紹。是應領導要求在上一懸浮球介面（水波紋效果：點選開啟連結）之後更改的圓形背景圖：  剪下後 ->    起初只是簡單的背景圖片，但用於沒有美工，自己學習P

圖片/視訊上傳轉成base64/blob格式

專案中經常會用到上傳圖片/視訊的地方，比如上傳頭像，上傳商品圖片、證件圖片、小視訊等等，我們需要將圖片轉為 base64後再提交給後臺，然後後臺再將base64轉成圖片後進行儲存，這裡是基於vue+vux來寫的，H5實現的基本邏輯也是一樣的，樣式部分省略。 一、圖片上傳 1、html部分

UEditor 圖片視訊上傳

專案後端使用語言 :java ,ssm框架 maven 工程 (普通的jar包方式自己新增jar就OK了,) 最近專案中使用到富文字功能,參考和比較之下,採用了百度的Ueditor 富文字編輯器.感謝百度. 現在把實現的方式介紹給大家，使用的是最新的UEditor版本1.4

ASP.NET Core 簡單實現七牛圖片上傳（FormData 和 Base64）

private stream public 圖片 ASP.NET Core 簡單實現七牛圖片上傳（FormData 和 Base64）七牛圖片上傳 SDK（.NET 版本）：https://developer.qiniu.com/kodo/sdk/1237/csharpUpoladServic

TabTopAutoLayout【自定義頂部選項卡區域（帶下劃線）（動態選項卡數據且可滑動）】

註意事項 ecif margin 代碼分析 獨立 xml文件 回收 support mtab 版權聲明：本文為博主原創文章，未經博主允許不得轉載。 前言 自定義頂部選項卡布局LinearLayout類，實現帶下劃線且可滑動效果。【實際情況中建議使用RecyclerVie

node.js實現圖片上傳（包含縮略圖）

http close path return new tde log img thumb 圖片上傳 使用multiparty插件實現上傳 安裝multiparty npm i --save multiparty 代碼實現 const multiparty = requi

自定義控制元件之 PasswordEditText（密碼輸入框）

前兩天在掘金上看到了一個驗證碼輸入框，然後自己實現了一下，以前都是繼承的 View，這次繼承了 ViewGroup，也算是嘗試了一點不同的東西。先看看最終效果： 事實上就是用將輸入的密碼用幾個文字框來顯示而已，要打造這樣一個東西我剛開始也是一頭霧水，不急，直接寫不會，我們可以採取曲線救

spring-AOP+自定義註解實現日誌管理（註解方式實現）

一、場景 後臺管理系統中，管理員作業系統時生成日誌儲存在資料庫中。 二、實現 1、jar包依賴 <!-- https://mvnrepository.com/artifact/org.springframework/spring-aop --> <dependency&