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

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

程式碼教學

本工具[線上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線上反編譯、線上高強度密碼生成、線上網頁截圖 等二十多種工具服務