JavaScript實現線上Markdown編輯器、轉換HTML工具-toolfk程式設計師工具網

王三金發表於2018-11-18

      本文要推薦的[ToolFk]是一款程式設計師經常使用的線上免費測試工具箱,ToolFk 特色是專注於程式設計師日常的開發工具,不用安裝任何軟體,只要把內容貼上按一個執行按鈕,就能獲取到想要的內容結果。ToolFk還支援 BarCode條形碼線上生成QueryList採集器PHP程式碼線上執行PHP混淆、加密、解密Python程式碼線上執行JavaScript線上執行YAML格式化工具HTTP模擬查詢工具HTML線上工具箱JavaScript線上工具箱CSS線上工具箱JSON線上工具箱Unixtime時間戳轉換Base64/URL/Native2Ascii轉換CSV轉換工具箱XML線上工具箱WebSocket線上工具Markdown 線上工具箱Htaccess2nginx 轉換進位制線上轉換線上加密工具箱線上偽原創工具線上APK反編譯線上網頁截圖工具線上隨機密碼生成線上生成二維碼Qrcode線上Crontab表示式生成線上短網址生成線上計算器工具。等20多個日常程式設計師開發工具,算是一個非常全面的程式設計師工具箱網站。


網站名稱:ToolFk
網站鏈結:www.toolfk.com/
工具連結:www.toolfk.com/tool-conver…

程式碼教學

本工具[線上Markdown轉換HTML、HTML轉Markdown工具]依賴的程式碼庫https://github.com/domchristie/turndown

STEP 1

markdown.png

STEP 2

核心程式碼如下

var sourceArea = toolfk.create_codeMirror('code');
var targetArea = toolfk.create_codeMirror('result');
$(".convert-btn-html").click(function(){

    if (toolfk.beautify_default.beautify_in_progress) {
        return;
    }
    var source = sourceArea.getValue();
    if(source==''){
        return layer.msg('@lang('toolfk.lang_context_not_empty')');
    }
    toolfk.beautify_default.beautify_in_progress = true;

    var turndownService = new TurndownService();
    var markdown = turndownService.turndown(source);

    targetArea.setValue(markdown);

    toolfk.report('Html2Markdown',source);
    toolfk.beautify_default.beautify_in_progress = false;
});

$(".convert-btn-markdown").click(function(){

    if (toolfk.beautify_default.beautify_in_progress) {
        return;
    }
    var source = sourceArea.getValue();
    if(source==''){
        return layer.msg('@lang('toolfk.lang_context_not_empty')');
    }
    toolfk.beautify_default.beautify_in_progress = true;
    var markdown = micromarkdown.parse(source);
    targetArea.setValue(markdown);

    toolfk.report('Markdown2Html',source);
    toolfk.beautify_default.beautify_in_progress = false;
});複製程式碼


值得一試的三個理由:

  1. 整合各種程式設計師開發中經常使用的開發測試工具。

  2. 簡潔美觀大氣的網站頁面

  3. 支援 線上格式化執行程式碼、APK線上反編譯、線上高強度密碼生成、線上網頁截圖 等二十多種工具服務

  4. 同時還推薦一下它的姐妹網 www.videofk.com 視訊下載工具箱




相關文章