（八）为文章加入Markdown支持

Markdown说明

都这个年代了，正经人写文章谁还用富文本编辑器呀，现在都是makrdown了，所以我们的博客也要采用markdown来排版文章

支持库：editor.md (这应该是目前最好用的js版markdown编辑器了)

集成editor.md

• 删减下载的文件将其考到我们的项目中(这点官方不太友好，给了那了大的一个包，里面大部分东西都是没用的)

• 引用css和js文件

  <link rel="stylesheet" href="/static/plugin/editormd/css/editormd.min.css">
  <script src="/static/plugin/editormd/editormd.js"></script>

• 按照editor.md的说明我们来创建存在编辑器的容器

  <div id="lw-markdown-content">
    <textarea style="display: none"></textarea>
  </div>

• 初始化编辑器

  editormd('lw-markdown-content', {
    height: 800,
    path:'/static/plugin/editormd/lib/'
  })

• 配置工具栏的图标

  toolbarIcons: ["undo", "redo", "|", "bold", "del", "italic", "quote", "|", "h1", "h2", "h3", "h4", "h5", "h6", "|",
                 "list-ul", "list-ol", "hr", "|", "link", "image", "code", "code-block",
                 "table", "emoji", "search", "|", "watch", "preview", "fullscreen"]

• 取消工具栏滚动浮动

  toolbarAutoFixed: false,

• 设置编辑窗口的z-index

  onfullscreen: function () {
    this.editor.css('z-index', 120)
  },
  onfullscreenExit:function () {
   this.editor.css('z-index', 10)
  }

• 文件上传功能改造

  • java部分

  package cn.kevinlu98.controller;
  
  import cn.kevinlu98.common.Result;
  import cn.kevinlu98.enums.ResultEnum;
  import lombok.AllArgsConstructor;
  import lombok.Data;
  import lombok.extern.slf4j.Slf4j;
  import org.springframework.beans.factory.annotation.Value;
  import org.springframework.web.bind.annotation.PostMapping;
  import org.springframework.web.bind.annotation.RequestMapping;
  import org.springframework.web.bind.annotation.RequestParam;
  import org.springframework.web.bind.annotation.RestController;
  import org.springframework.web.multipart.MultipartFile;
  
  import java.io.File;
  import java.io.IOException;
  import java.text.DateFormat;
  import java.text.SimpleDateFormat;
  import java.util.Date;
  import java.util.Objects;
  import java.util.UUID;
  
  
  /**
   * Author: Mr丶冷文
   * Date: 2022/10/8 11:24
   * Email: kevinlu98@qq.com
   * Description:
   */
  @Slf4j
  @RestController
  @RequestMapping("/admin/")
  public class UploadController {
  
      @Value("${upload.base-dir}")
      private String baseDir;
  
      private static final DateFormat DATA_FORMAT = new SimpleDateFormat("yyyyMMdd/");
  
      /**
       * editor.md的规定的返回格式
       */
      @Data
      @AllArgsConstructor
      static class MDResult {
          private Integer success;
          private String message;
          private String url;
      }
  
      @PostMapping("/md/upload")
      public MDResult mdUpload(@RequestParam(value = "editormd-image-file") MultipartFile file) {
          try {
              String url = uploadFile(file);
              return new MDResult(1, "上传成功", url);
          } catch (IOException e) {
              log.error(e.getMessage(), e);
              return new MDResult(0, ResultEnum.RESULT_UPLOAD_FAIL.getMessage(), null);
          }
      }
  
      @PostMapping("/upload")
      public Result<String> upload(@RequestParam MultipartFile file) {
          try {
              String url = uploadFile(file);
              return Result.success(url);
          } catch (IOException e) {
              log.error(e.getMessage(), e);
              return Result.error(ResultEnum.RESULT_UPLOAD_FAIL);
          }
      }
  
      private String uploadFile(MultipartFile file) throws IOException {
          if (!baseDir.endsWith("/")) {
              baseDir += "/";
          }
          // 生成时间分区的目录
          String dateName = DATA_FORMAT.format(new Date());
          String folderPath = baseDir + dateName;
          File folder = new File(folderPath);
          if (!folder.isDirectory()) {
              folder.mkdirs();
          }
          //取上传目录的绝对路径
          String absPath = folder.getAbsolutePath().replace("./", "") + "/";
          //取文件后缀
          String suffix = Objects.requireNonNull(file.getOriginalFilename()).substring(file.getOriginalFilename().lastIndexOf("."), file.getOriginalFilename().length());
          //生成文件名
          String filename = UUID.randomUUID().toString().replace("-", "") + suffix;
          //上传到服务器
          file.transferTo(new File(absPath + "/" + filename));
          return "/upload/" + dateName + "/" + filename;
      }
  }
  

  • js部分

  imageUpload    : true,
  imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
  imageUploadURL : "/admin/md/upload",

• Emoji表情处理

  • emoji下载：https://github.com/SemiWarm/SemiWarmAdminPhotos/blob/master/emoji.zip
  • 将下载好的文件解压到项目的/static/plugin/editormd/images/下

  emoji:true,

  • 修改editormd.js中emoji的路径为本地路径

  editormd.emoji     = {
    path  : "/static/plugin/editormd/images/emoji/",
    ext   : ".png"
  };

文章页的缩略图上传

• HTML部分

  <img id="lw-upload-show" style="width: 100%;border: 1px solid #cccccc;"
       src="/static/admin/image/default.png" alt="">
  <div style="text-align: right;margin-top: 10px;">
    <button class="btn btn-warning" type="button" id="lw-upload-btn"><i class="fa fa-image"></i>
      上传图片
    </button>
  </div>
  <input type="hidden" name="cover" class="form-control">
  <input type="file" id="lw-upload-file" style="display: none" class="form-control">

• JS部分

  
  $('#lw-upload-btn').on('click', function () {
    $('#lw-upload-file').click()
  })
  
  $('#lw-upload-file').on('change', function () {
    let file = this.files[0]
    let fd = new FormData();
    fd.append('file', file);
    $.ajax({
      url: '/admin/upload',
      method: 'post',
      data: fd,
      dataType: 'json',
      processData: false,
      contentType: false,
      success: res => {
        if (res.code === 200) {
          $('#lw-upload-show').attr('src', res.data);
          $('#data-form [name=cover]').val(res.data);
        } else {
          layer.msg(res.message, {icon: 2})
        }
      }
    })
  })