可以在網頁中顯示程式碼，並且可以編輯
以下是一個範例：
1. 首先將Code Mirror 載下來
http://codemirror.net/index.html
2.在網頁<head>中載入檔案
<link href="codemirror-5.0/lib/codemirror.css" rel="stylesheet"></link> <script src="codemirror-5.0/lib/codemirror.js"></script> <script src="codemirror-5.0/mode/javascript/javascript.js"></script> <script src="codemirror-5.0/addon/edit/matchbrackets.js"></script>
3. 以及設置style
<style>
.CodeMirror { height: auto; border: 1px solid #ddd; }
.CodeMirror-scroll { max-height: 200px; }
.CodeMirror pre { padding-left: 7px; line-height: 1.25; }
</style>
4. 在<body>需要插入程式碼的地方加上textarea
<form> <textarea id="code_input" > //this block allow you to define function //please define your function in javascript </textarea> </form>
5. 並且加上script，讓它可以讀值
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code_input"), {
lineNumbers: true,
mode: "text/javascript",
matchBrackets: true,
});
editor.on("blur", enable_key);
editor.on("focus", disable_key);
</script>
6. 即可完成
note2. enable_key 則是自己定義的funciton，表示在blur這個事件時執行
note3. disable_key和上述同理
note4. 文字區塊更改：
取值: editor.getValue();
設值: editor.SetValue(" ");
取值: editor.getValue();
設值: editor.SetValue(" ");
沒有留言:
張貼留言