[Javascript] 分享一個好用的Javascript Library - CodeMirror

2017-04-07

最近在處理一個專案，專案需求是客戶會在系統上面輸入javascript ，這年頭客戶都很猛自己會寫code ? 所以我們就得在系統中讓他寫code 有爽度 ? 首先，我們得解決就是顯示上面的問題，我上網找了一下，測試過一些solution ，發現了這一套應該是正解，CodeMirror : http://codemirror.net/

看他顯示就知道，可以把code 弄得漂漂釀釀，接下來幾篇文章會來介紹一些使用上面的技巧，跟我會用到的一些方法，因為有些地方很tricky，所以寫文章記錄一下，不過這篇文章就是專注在建立一個簡單的編輯器起來並且關鍵字會有標示並且有行號。

1.妳可以去github 下載source code : https://github.com/codemirror/codemirror ，不過我這邊跌了一個小地方，因為他引入一個codemirror.js ，但是我找到的都是需要run 在node.js 上面，不過後面，我在其他地方找到並且引入使用，如果你只是要純在前端使用，我這邊就提供基本上的js 並且是在cdn 上面的，直接貼上後就可以基本使用。CDN 來源位置 :https://cdnjs.com/libraries/codemirror　，這邊是5.25版本的。
所以，你在前端首先引入這些 js :

    <!-- CodeMirror-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/javascript/javascript.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/htmlmixed/htmlmixed.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/css/css.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/xml/xml.js"></script>

    <!-- JQuery -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"
            integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
            crossorigin="anonymous"></script>

2. HTML的部分　：

    <!--最後拿來顯示code 的 -->
    <xmp id="showCode"></xmp>


    <textarea id="txtCode" rows="20" style="width: 100%"></textarea>

    <button type="button" id="btnGetSource">取得程式碼</button>

3. Javascript 的部分　：　

    <script>
        var editor = CodeMirror.fromTextArea(document.getElementById("txtCode"), {
            //語言偵測模式是javascript
            mode: 'javascript',
            //開啟行號
            lineNumbers: true,
            //選取游標
            selectionPointer: true,
            //過長自動換行
            lineWrapping: true

        });

        $('#btnGetSource').click(function () {
            //取得Source Code 並且放到 xmp element 中
            var source = editor.getValue();
            $('#showCode').html(source);

        });

    </script>

結果:

是不是codemirror把code變的漂漂亮亮，其實改變的不只是外觀，還有對tab的定義等等..玩玩看吧

JSFiddle Demo:

當麻許的超技八

贊助區

廣告專區

站內搜尋

標籤們

連結們

網誌存檔

Author

[Javascript] 分享一個好用的Javascript Library - CodeMirror