Markdownは、通常のテキストエディターで書くことができるマークアップ言語です。 Simple Markup構文を使用すると、通常のテキストコンテンツに特定の形式を持つようになります。
序文
editor.mdは、Codemirror、jQuery、およびMarkedに基づいて構築されたオープンソース、埋め込み可能なMarkdown Online Editor（コンポーネント）です。この章では、Springbootを使用してEditor.mdを統合してMarkdownエディターを構築します。
プラグインをダウンロードします
プロジェクトアドレス：editor.md
ディレクトリ構造を解凍します：
editor.mdを構成します
simple.htmlをExapmlesフォルダーにプロジェクトに配置し、対応するCSSおよびJSファイルを構成します
構成エディター
...... <スクリプトsrc = "$ {re.contextpath} /jquery.min.js"> </script> <script> <src = "$ {re.contextpath}/editor/editormd.min.js"> </script> <link rel = "styleSheet" href = "$ {re.contextextpath/edtitr rel = "external nofollow"/> <link rel = "styleSheet" href = "$ {re.contextpath}/editor/css/editormd.css" rel = "external nofollow"/> <link rel = "href =" https://pandao.githut.io.io.iditor.md. nofollow "type =" image/x-icon "/>...........<！ - 編集用のソースファイルを保存 - > <textarea style =" display：none; " id = "textContent" name = "textContent"> </textarea> <！ - 2番目の非表示テキストフィールドを使用して、生成されたHTMLコードを構築して、フォームの投稿提出を容易にします。ここの名前は任意に撮影できます。バックグラウンドで受け入れられた場合、この名前キーが勝つものとします - > <textarea id = "text" name = "text"> </textarea> </div>エディターを初期化します
var testeditor; $（function（）{testeditor = editormd（ "test-editormd"、{width： "90％"、height：640、syncscrolling： "single"、path： "$ {re.contextpath}/lib/"、imageupload：true、imageformats：["jpg" "" "pn 「webp」、imageuploadurl： "/file"、//この構成はsimple.htmlで存在しませんが、この構成を使用して、構築されたHTMLコードが2番目の隠されたテキストフィールドに直接存在します。これにより、最もシンプルなEditor.mdエディターが実装され、次の効果があります。
アクセスアドレス：http：// localhost：8080/
画像アップロード
初期化エディターで構成された画像アップロードアドレスはImageUploadurl： " /file"であるため、ファイルのアップロードを /ファイルを処理できます
@retscontroller@requestmapping（ "/file"）@slf4jpublic class filecontroller {// @value（ ""）// string folder = system.getProperty（ "user.dir"）+file.separator+"upload"+file.separator; / ***構成ファイルで構成されたファイル保存パス*/ @value（ "$ {img.location}"）プライベート文字列フォルダー。 @postmapping public fileinfo upload（httpservletrequest request、@requestparam（value = "editormd-image-file"、必須= false）Multipartfile file）Throws {log.info（ " file.getoriginalFileName（）、file.getSize（））; log.info（request.getContextPath（））; string filename = file.getoriginalFileName（）; string suffix = filename.substring（filename.lastindexof（ "。"） + 1）;文字列newFileName = new date（）。getTime（） + "。" +接尾辞;ファイルlocalfile = new File（folder、newFileName）; file.transferto（localfile）; log.info（localfile.getabsolutepath（））; new fileinfo（1、 "uploaded" resustfully "、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"））; outputputputputputputtream. otutouttutttream.getOuttuttream.getOutputputtream.; Response.setContentType（ "Application/X-Download"）; Response.setheader（ "content-disposition"、 "attachment; filename = test.txt"）; ioutils.copy（inputstream、outputstream）; outputStream.flush（）; } catch（例外e）{}}}ファイルプレビュー
フォーム投稿が送信されると、editor.mdはマークダウン構文ドキュメントをHTML言語に翻訳し、HTML文字列をバックエンドに送信します。これは、これらのHTML文字列をデータベースに持続させます。ページの特定の表示方法は次のとおりです。
<！doctype html> <html lang = "zh"> <head> <meta charset = "utf-8"/> <title> editor.md例rel = "styleSheet" href = "$ {re.contextpath}/editor/css/editormd.css" rel = "external nofollow"/>> </head> <body> <！ - 暗いテーマを使用するので、コンテナdivに暗いテーマクラスを追加してカスタムコードスタイルを実装するためにコンテナdivを追加します。 src = "$ {re.contextpath} /jquery.min.js"> </script> <script src = "$ {re.contextpath}/editor/lib/marked.min.js"> </script> <script src = "$ {re.contextpath} src = "$ {re.contextpath}/editor/lib/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からダウンロードしてください
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。