SpringBoot 는 Editor.md 를 사용 하여 Markdown 부 텍스트 편집기 예제 구축

6564 단어 SpringBootMarkdown
Markdown 은 일반 텍스트 편집기 로 작성 할 수 있 는 태그 언어 로 간단 한 태그 문법 을 통 해 일반 텍스트 내용 을 일정한 형식 으로 만 들 수 있 습 니 다.
머리말
Editor.md코드 미 러,jQuery,Marked 를 기반 으로 한 오픈 소스 Markdown 온라인 편집기(구성 요소)입 니 다.이 장 에 서 는 SpringBoot 통합 Editor.md 를 사용 하여 Markdown 편집 기 를 구축 합 니 다.
플러그 인 다운로드
프로젝트 주소:Editor.md
압축 해제 디 렉 터 리 구조:

Editor.md 설정
exapbles 폴 더 의 simple.html 를 프로젝트 에 배치 하고 해당 하 는 css 와 js 파일 을 설정 합 니 다.
설정 편집기

......
 <script src="${re.contextPath}/jquery.min.js"></script>
  <script src="${re.contextPath}/editor/editormd.min.js"></script>
  <link rel="stylesheet" href="${re.contextPath}/editor/css/style.css" rel="external nofollow" />
  <link rel="stylesheet" href="${re.contextPath}/editor/css/editormd.css" rel="external nofollow" rel="external nofollow" />
  <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" rel="external nofollow" type="image/x-icon"/>
......
<!--           -->
 <textarea style="display:none;" id="textContent" name="textContent">
</textarea>
    <!--         ，       HTML  ，    POST  ，   name     ，        name    -->
    <textarea id="text" class="editormd-html-textarea" name="text"></textarea>
  </div>
편집기 초기 화

var testEditor;

  $(function () {
    testEditor = editormd("test-editormd", {
      width: "90%",
      height: 640,
      syncScrolling: "single",
      path: "${re.contextPath}/editor/lib/",
      imageUpload: true,
      imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
      imageUploadURL: "/file",
      //     simple.html    ，          ，              HTML           textarea  ，  post    。
      saveHTMLToTextarea: true
      // previewTheme : "dark"
    });
  });
이렇게 하면 가장 간단 한 editor.md 편집기 가 실 현 됩 니 다.효 과 는 다음 과 같 습 니 다.

접근 주소:http://localhost:8080/
사진 업로드
초기 화 편집기 에 설 정 된 그림 업로드 주 소 는 image UploadURL:"/file"이기 때문에 이에 대응 하여 파일 업로드/file 에서 처리 하면 됩 니 다.

@RestController
@RequestMapping("/file")
@Slf4j
public class FileController {

//  @Value("")
//  String folder = System.getProperty("user.dir")+File.separator+"upload"+File.separator;
  /**
   *                
   */
  @Value("${img.location}")
  private String folder;

  @PostMapping
  public FileInfo upload(HttpServletRequest request, @RequestParam(value = "editormd-image-file", required = false) MultipartFile file) throws Exception {
    log.info("【FileController】 fileName={},fileOrginNmae={},fileSize={}", file.getName(), file.getOriginalFilename(), file.getSize());
    log.info(request.getContextPath());
    String fileName = file.getOriginalFilename();
    String suffix = fileName.substring(fileName.lastIndexOf(".") + 1);
    String newFileName = new Date().getTime() + "." + suffix;

    File localFile = new File(folder, newFileName);
    file.transferTo(localFile);
    log.info(localFile.getAbsolutePath());
    return new FileInfo(1, "    ", request.getRequestURL().substring(0,request.getRequestURL().lastIndexOf("/"))+"/upload/"+newFileName);
  }

  @GetMapping("/{id}")
  public void downLoad(@PathVariable String id, HttpServletRequest request, HttpServletResponse response) {
    try (InputStream inputStream = new FileInputStream(new File(folder, id + ".txt"));
       OutputStream outputStream = response.getOutputStream();) {
      response.setContentType("application/x-download");
      response.setHeader("Content-Disposition", "attachment;filename=test.txt");

      IOUtils.copy(inputStream, outputStream);
      outputStream.flush();
    } catch (Exception e) {

    }
  }
}
파일 미리 보기
폼 POST 를 제출 할 때 editor.md 는 우리 의 markdown 문법 문 서 를 HTML 언어 로 번역 하고 html 문자열 을 백 엔 드 에 제출 합 니 다.백 엔 드 는 이 HTML 문자열 을 데이터베이스 에 오래 지속 합 니 다.구체 적 으로 페이지 에 표시 하 는 방법 은 다음 과 같다.

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8"/>
  <title>Editor.md examples</title>
  <link rel="stylesheet" href="${re.contextPath}/editor/css/editormd.preview.min.css" rel="external nofollow" />
  <link rel="stylesheet" href="${re.contextPath}/editor/css/editormd.css" rel="external nofollow" rel="external nofollow" />
</head>
<body>
<!--        dark  ，     div   dark    ，             -->
<div class="content editormd-preview-theme" id="content">${editor.content!''}</div>
<script src="${re.contextPath}/jquery.min.js"></script>
<script src="${re.contextPath}/editor/lib/marked.min.js"></script>
<script src="${re.contextPath}/editor/lib/prettify.min.js"></script>
<script src="${re.contextPath}/editor/editormd.min.js"></script>
<script type="text/javascript">
  editormd.markdownToHTML("content");
</script>
</body>
</html>
미리 보기 주소:http://localhost:8080/editorWeb/preview/{id}
주소 편집:http://localhost:8080/editorWeb/edit/{id}
코드 다운로드
내 github 에서 다운로드,https://github.com/longfeizheng/editor-markdown
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
고 품질 코드 를 만 드 는 30 개의 황금 수칙(암시 적 형식 변환 우선)
git 를 이용 하여 코드 를 제출 하 는 방법 절차

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage