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

This commit is contained in:
kl 2021-02-19 10:15:20 +08:00
parent 01213c5d02
commit 1fd7d5df88
4 changed files with 99 additions and 0 deletions

View File

@ -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);

View File

@ -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";

View File

@ -0,0 +1,26 @@
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;
}
}

View File

@ -0,0 +1,66 @@
<!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>