Mr丶冷文

文章 分类 评论
117 10 6310

站点介绍

冷文学习者(KEVINLU98.COM),记录一个北漂小码农的日常业余生活
友链申请地址(直接评论即可): 传送门

(八)为文章加入Markdown支持

MR丶冷文 2022-10-09 201 3条评论 个人博客项目视频教程

首页 / 正文
Freewind主题v1.5版本已发布,下载请移步Freewind 1.5,同时还有主题伴生插件Freewind Markdown,下载请移步 Freewind Markdown,有问题请在留言板,交换友链请直接在友链留言,我创建了一个主题交流群,有兴趣可以加下: 点此加入
报毒我说明一下,是因为我把主题的版权信息做了加密,其中用了eval,杀毒软件认为eval函数是一个危险的操作,这点介意的话请勿下载,我也没有强迫任何人去下载,也没有向大家收取一分钱的主题费用,所以也犯不着因为这些事情来喷我,喜欢就用,不喜欢就不用,就这么简单

发布于2022-10-28

(八)为文章加入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",

文章页的缩略图上传

  • 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})
          }
        }
      })
    })

对不起,作者设置了附件 回复可见

评论(3)

  1. 向星辰 游客 2022-11-08 10:15 回复


  2. 寻路。 游客 2022-10-18 17:59 回复

    你好

  3. jzl 游客 2022-10-17 08:38 回复

    a 啊啊啊

最新评论

  • 阿伟

    拿下

  • 阿伟

    我looklook

  • 阿伟

    拿下

  • 阿伟

    来了

  • 阿伟

    下载

日历

2023年02月

   1234
567891011
12131415161718
19202122232425
262728    

文章目录

站点公告
Freewind主题v1.5版本已发布,下载请移步Freewind 1.5,同时还有主题伴生插件Freewind Markdown,下载请移步 Freewind Markdown,有问题请在留言板,交换友链请直接在友链留言,我创建了一个主题交流群,有兴趣可以加下: 点此加入
报毒我说明一下,是因为我把主题的版权信息做了加密,其中用了eval,杀毒软件认为eval函数是一个危险的操作,这点介意的话请勿下载,我也没有强迫任何人去下载,也没有向大家收取一分钱的主题费用,所以也犯不着因为这些事情来喷我,喜欢就用,不喜欢就不用,就这么简单
点击小铃铛关闭