Markdown é um idioma de marcação que pode ser escrito em um editor de texto normal. Através da sintaxe simples de marcação, pode fazer com que o conteúdo comum de texto tenha um determinado formato.
Prefácio
O editor.md é um editor on -line (componente) de código aberto, incorporável, construído no Codemirror, JQuery e marcado. Este capítulo usará o Springboot para integrar o Editor.md para construir o editor de marcação.
Baixe o plug -in
Endereço do projeto: editor.md
Descompactar a estrutura do diretório:
Configure editor.md
Coloque o simples.html na pasta Exapmles no projeto e configure os arquivos CSS e JS correspondentes
Editor de configuração
...... <script src = "$ {re.ContextPath} /jquery.min.js"> </script> <script src = "$ {re.ContextPath} /editor/editormd.min.js"> </cript> <link Rel = "Stylesheet" href = "$ {re.ContextPath} /editor/css/style.css" rel = "nofollow externo"/> <link rel = "stylesheet" href = "$ {re.ContextPath} /editor/css/editormd.css" reln = " href = "https://pandao.github.io/editor.md/favicon.ico" rel = "Nofollow externo" type = "image/x-icon" />.....< !--! id = "textContent" name = "textContent"> </sexttarea> <!- O segundo campo de texto oculto é usado para construir o código HTML gerado para facilitar o formulário após o envio. O nome aqui pode ser levado arbitrariamente. Quando aceito em segundo plano, essa chave de nome deve ser prevalecida -> <texttarea id = "text" name = "text"> </sexttarea> </div>Inicialize o editor
var testeditor; $ (function () {testeditor = editormd ("teste-editormd", {width: "90%", altura: 640, syncscrolling: "single", path: "$ {re.Contextpath}/editor/lib/" imageUPLOAD: True, imageFormats: ["JPG "Webp"], imageuploadurl: "/arquivo", // essa configuração não existe no simples.html, mas para enviar o formulário, use essa configuração para permitir que o código HTML construído) seja diretamente;Isso implementa o editor mais simples. Editor, com os seguintes efeitos:
Endereço de acesso: http: // localhost: 8080/
Upload de imagem
Como o endereço de upload da imagem configurado no editor de inicialização é ImagePloadurl: " /arquivo", correspondendo a ele, podemos processar o upload do arquivo em /arquivo
@RestController@requestmapp ("/file")@slf4jpublic class FileController {// @Value ("") // pasta String = System.getProperty ("user.dir")+file.separator+"upload"+file.separator; / *** Caminho de economia de arquivos configurado no arquivo de configuração*/ @Value ("$ {img.Location}") Pasta de sequência privada; @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.GETORGINALFILENAME (); String sufix = filename.substring (filename.lastIndexof (".") + 1); String newFileName = new Date (). GetTime () + "." + sufixo; Arquivo localfile = novo arquivo (pasta, newfileName); file.Transferto (LocalFile); log.info (localfile.getabsolutepath ()); Retorne o novo FileInfo (1, "Carregado com sucesso", request.getRequesturl (). Substring (0, request.getRequesturl (). LastIndexOf ("/")+"/upload/"+newFileName); } @GetMapping ("/{id}") public void Download (@PathVariable String ID, httpServletRequest Request, httpServletResponse resposta) {try (inputStream inputStream = new FileInputStream (new File (FILHER, ID + ".txt)); saída de output = out); Response.setContentType ("Application/X-download"); Response.setheader ("Content-Disposition", "Anexamento; nome do arquivo = test.txt"); Ioutils.copy (inputStream, outputStream); outputStream.flush (); } catch (Exceção e) {}}}Visualização de arquivos
Quando a postagem do formulário é enviada, o editor.md traduz nosso documento de sintaxe de marcação em linguagem HTML e envia as seqüências de strings HTML para o nosso back -end, que persiste essas seqüências de html no banco de dados. O método de exibição específico na página é o seguinte:
<! Doctype html> <html lang = "zh"> <head> <meta charset = "utf-8"/> <title> editor.md exemplos </title> <link rel = "stylesheet" href = "$ {re.Contextpath} /editor/CSSs/EdTorm.PROURP.PROURP.PROURP.PROINH.PROTH.PROUND.PROTH.PROTH.PROTH.PROTH.PROTH.PROTH.PROTH.PROTH.PROTH.PROTMET.CRETSTIVHT. rel = "Stylesheet" href = "$ {re.ContextPath} /editor/css/editormd.css" rel = "Nofollow externo"/> </ad Head> <body> <!-porque usamos o tema escuro, adicionamos a classe de tema escuro ao contêiner Div para implementar o estilo de código personalizado-> <d id = ""> 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/lib/prettify.min.js"> </script> <script src = "$ {re.ContextPath} /editor/editormd.min.js"> </script> <script type = "text/javascript"> editormd.markdowntohtml ("Content"); </script> </body> </html>Endereço de visualização: http: // localhost: 8080/editorweb/visualize/{id}
Endereço de edição: http: // localhost: 8080/editorweb/edit/{id}
Download de código
Download do meu github, https://github.com/longfeizheng/editor-markdown
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.