新增依赖 highlightjs 代码文件预览高亮支持

1fd7d5df · kl · 01213c5d · 1fd7d5df · 1fd7d5df · 1fd7d5df
Commit 1fd7d5df authored Feb 19, 2021 by kl
4 changed files
--- a/server/src/main/java/cn/keking/model/FileType.java
+++ b/server/src/main/java/cn/keking/model/FileType.java
@@ -16,6 +16,7 @@ public enum FileType {
    OFFICE("officeFilePreviewImpl"),
    SIMTEXT("simTextFilePreviewImpl"),
    PDF("pdfFilePreviewImpl"),
+    CODE("codeFilePreviewImpl"),
    OTHER("otherFilePreviewImpl"),
    MEDIA("mediaFilePreviewImpl"),
    MARKDOWN("markdownFilePreviewImpl"),
@@ -24,11 +25,13 @@ public enum FileType {
    CAD("cadFilePreviewImpl"),
    TIFF("tiffFilePreviewImpl");

+
    private static final String[] OFFICE_TYPES = {"docx", "doc", "xls", "xlsx", "ppt", "pptx"};
    private static final String[] PICTURE_TYPES = {"jpg", "jpeg", "png", "gif", "bmp", "ico", "raw"};
    private static final String[] ARCHIVE_TYPES = {"rar", "zip", "jar", "7-zip", "tar", "gzip", "7z"};
    private static final String[] TIFF_TYPES = {"tif", "tiff"};
    private static final String[] SSIM_TEXT_TYPES = ConfigConstants.getSimText();
+    private static final String[] CODES = {"java", "c", "php", "go", "python", "py", "js", "html", "ftl", "css", "lua", "sh", "rb", "h", "cpp", "cs", "aspx", "jsp"};
    private static final String[] MEDIA_TYPES = ConfigConstants.getMedia();
    private static final Map<String, FileType> FILE_TYPE_MAPPER = new HashMap<>();

@@ -51,6 +54,9 @@ public enum FileType {
        for (String tif : TIFF_TYPES) {
            FILE_TYPE_MAPPER.put(tif, FileType.TIFF);
        }
+        for (String code : CODES) {
+            FILE_TYPE_MAPPER.put(code, FileType.CODE);
+        }
        FILE_TYPE_MAPPER.put("md", FileType.MARKDOWN);
        FILE_TYPE_MAPPER.put("xml", FileType.XML);
        FILE_TYPE_MAPPER.put("pdf", FileType.PDF);

--- a/server/src/main/java/cn/keking/service/FilePreview.java
+++ b/server/src/main/java/cn/keking/service/FilePreview.java
@@ -17,6 +17,7 @@ public interface FilePreview {
    String TIFF_FILE_PREVIEW_PAGE = "tiff";
    String OFFICE_PICTURE_FILE_PREVIEW_PAGE = "officePicture";
    String TXT_FILE_PREVIEW_PAGE = "txt";
+    String CODE_FILE_PREVIEW_PAGE = "code";
    String EXEL_FILE_PREVIEW_PAGE = "html";
    String XML_FILE_PREVIEW_PAGE = "xml";
    String MARKDOWN_FILE_PREVIEW_PAGE = "markdown";

--- a/server/src/main/java/cn/keking/service/impl/CodeFilePreviewImpl.java
+++ b/server/src/main/java/cn/keking/service/impl/CodeFilePreviewImpl.java
+package cn.keking.service.impl;
+
+import cn.keking.model.FileAttribute;
+import cn.keking.service.FilePreview;
+import org.springframework.stereotype.Component;
+import org.springframework.ui.Model;
+
+/**
+ * @author kl (http://kailing.pub)
+ * @since 2021/2/18
+ */
+@Component
+public class CodeFilePreviewImpl implements FilePreview {
+
+   private final SimTextFilePreviewImpl filePreviewHandle;
+
+    public CodeFilePreviewImpl(SimTextFilePreviewImpl filePreviewHandle) {
+        this.filePreviewHandle = filePreviewHandle;
+    }
+
+    @Override
+    public String filePreviewHandle(String url, Model model, FileAttribute fileAttribute) {
+         filePreviewHandle.filePreviewHandle(url, model, fileAttribute);
+        return CODE_FILE_PREVIEW_PAGE;
+    }
+}
--- a/server/src/main/resources/web/code.ftl
+++ b/server/src/main/resources/web/code.ftl
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0">
+    <title>代码预览</title>
+    <#include  "*/commonHeader.ftl">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/styles/default.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/highlight.min.js"></script>
+    <script>hljs.highlightAll()</script>
+
+    <style>
+        div.code {
+            white-space: pre;
+        }
+    </style>
+</head>
+<body>
+
+<input hidden id="textData" value="${textData}"/>
+
+<div class="container">
+    <div class="panel panel-default">
+        <div class="panel-heading">
+            <h4 class="panel-title">
+                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
+                    ${file.name}
+                </a>
+            </h4>
+        </div>
+        <div class="panel-body">
+            <div id="code" class='code'></div>
+        </div>
+    </div>
+</div>
+
+
+<script>
+    /**
+     * 初始化
+     */
+    window.onload = function () {
+        initWaterMark();
+        loadText();
+    }
+
+    /**
+     *加载普通文本
+     */
+    function loadText() {
+        var base64data = $("#textData").val()
+        var textData = Base64.decode(base64data);
+
+        var textPreData = "<pre><code>" + textData + "</code></pre>";
+        $("#code").append(textPreData);
+        document.querySelectorAll('div.code').forEach(block => {
+            // then highlight each
+            hljs.highlightBlock(block);
+        });
+    }
+
+</script>
+
+</body>
+
+</html>