CK's Notepad

[Coding4Fun] Build my own Markdown editor - Part I

發表於 分類於 Disqus：

因為找不到自己想要的Markdown編輯器，所以自己來寫一個.

想要的功能

  • Live preview like Typora
  • Auto-upload image to Flickr
  • Be able to work with Hexo

開發環境

撞牆期

CodeMirror

設定CodeMirror

新增一頁html, 引用CodeMirror.js和CodeMirror.css.

app.js

1
2
3
4
5
6
7
8
9
10
//================
 var codeConfig = {
   autofocus: true,
   lineNumbers: true,
   styleActiveLine: true,
   mode: "gfm", // Markdown Edit Mode, 需要另外引用gfm和markdown.js
   lineWrapping: true    
 };

 var editor = CodeMirror(document.getElementById("editor"), codeConfig);

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Markdown Editor</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="lib/codemirror/lib/codemirror.css">
    <style>
        .CodeMirror {
            border: 1px solid #eee;
            width: 80%;
            height: auto;
            margin: 0 auto;
        }       
    </style>
</head>

<body>
    <h1>CodeMirror Markdown Editor</h1>
    <div id="editor">
    </div>  
</body>
<script src="lib/node_modules/jquery/dist/jquery.min.js"></script>
<script src="lib/codemirror/lib/codemirror.js"></script>
<script type="text/javascript" src="lib/codemirror/mode/markdown/markdown.js"></script>
<script type="text/javascript" src="lib/codemirror/addon/mode/overlay.js"></script>
<script type="text/javascript" src="lib/codemirror/addon/selection/active-line.js"></script>
<script type="text/javascript" src="lib/codemirror/mode/gfm/gfm.js"></script>
<!--highlight Javascript Syntax-->
<script type="text/javascript" src="lib/codemirror/mode/javascript/javascript.js"></script>
<script src="app.js"></script>
</html>

顯示畫面

轉換Markdown

這裡所使用到的轉換Library是showdown

index.html

1
2
3
<div id="preview" class="preview"></div>   

<script src="lib/node_modules/showdown/dist/showdown.min.js"></script>

app.js

1
2
3
4
5
6
7
8
var converter = new showdown.Converter({
   literalMidWordUnderscores: true,
 });

// livepreview
 editor.on('update', function (instance) {
   $("#preview").html(converter.makeHtml(instance.getValue()));
 });

這樣子就會邊打字邊顯示結果，但是到這裡，還是跟大部分的Markdown Editor一樣，是分兩個視窗分別顯示Markdown及輸出結果，但如何表現得跟Typora一樣，仍在研究中

拖拉照片

CodeMirror支援Drag&Drop, 也可以設定允許的檔案類別，設定方式如下

1
2
3
4
5
6
7
8
var codeConfig = {
    autofocus: true,
    lineNumbers: true,
    styleActiveLine: true,
    mode: "gfm",
    lineWrapping: true,
    allowDropFileTypes: ["image/png", "image/jpeg", "image/gif"] //允許上傳的圖片類型:png,jpg,gif
  };

可以利用editor.on(『』,function(){})來處理動作

1
2
3
4
5
6
editor.on("drop", function (editor, e) {
    var files = e.dataTransfer.files;
    for (var i = 0; i < files.length; ++i) {
      ...
    }
  });

這裡可以取得拖拉到editor裡的檔案有哪些

還有些額外的問題，如果將照片拖拉到非editor的地方，瀏覽器會直接顯示該照片，這不是我要的現象，所以我要將非editor的地方的drag&drop給關掉

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
window.onload = function () {
   var body = document; //target any DOM element here

   if (body.addEventListener) //(Mozilla)
   {
     body.addEventListener('dragenter', preventDrag, true); //precursor for drop event
     body.addEventListener('dragover', preventDrag, true); //precursor for drop event
     body.addEventListener('drop', preventDrag, true);
   }
   else if (body.attachEvent) //(IE)
   {
     body.attachEvent('ondragenter', preventDrag);
     body.attachEvent('ondragover', preventDrag);
     body.attachEvent('ondrop', preventDrag);
   }
 }
 
 function preventDrag(event) {
   if (event.type == 'dragenter' || event.type == 'dragover' || //if drag over event -- allows for drop event to be captured, in case default for this is to not allow drag over target
     event.type == 'drop') //prevent text dragging -- IE and new Mozilla (like Firefox 3.5+)
   {
     if (event.target.className.trim() != "CodeMirror-line") {        
       if (event.stopPropagation) //(Mozilla)
       {
         event.preventDefault();
         event.stopPropagation(); //prevent drag operation from bubbling up and causing text to be modified on old Mozilla (before Firefox 3.5, which doesn't have drop event -- this avoids having to capture old dragdrop event)
       }
       return false; //(IE)
     }
   }
 }

<< 待續 >>

程式碼

GitHub