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をもっとサポートすることを願っています。