网站首页JavaScript
代码编辑器组件CodeMirror使用教程

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>代码编辑器组件CodeMirror使用教程</title>
    <link type="text/css" rel="stylesheet" href="./codemirror-5.63.3/lib/codemirror.css">
    <link type="text/css" rel="stylesheet" href="./codemirror-5.63.3/theme/monokai.css">
    <link type="text/css" rel="stylesheet" href="./codemirror-5.63.3/addon/fold/foldgutter.css">
    <link type="text/css" rel="stylesheet" href="./codemirror-5.63.3/addon/display/fullscreen.css">
    <style type="text/css">
        .CodeMirror{height:auto;border:none;font-family:NSimSun;}
        .CodeMirror-code{font-size:16px;line-height:1.618;}
        .CodeMirror-vscrollbar{scrollbar-width:none;-ms-overflow-style:none;}
        .CodeMirror-vscrollbar::-webkit-scrollbar{display:none;}
    </style>
</head>
<body>
<textarea id="editor">
<?php
/**
 * 检查邮箱地址格式是否正确
 *
 * @param string $email 邮箱地址
 * @return bool 检查结果
 */
function is_email($email) {
    $result = filter_var($email, FILTER_VALIDATE_EMAIL);
    return $result === FALSE ? FALSE : TRUE;
}

/**
 * 检查URL格式是否正确
 *
 * @param string $url URL
 * @return bool 检查结果
 */
function is_url($url) {
    $result = filter_var($url, FILTER_VALIDATE_URL);
    return $result === FALSE ? FALSE : TRUE;
}

/**
 * 检查IP地址格式是否正确
 *
 * @param string $ip IP地址
 * @return bool 检查结果
 */
function is_ip($ip) {
    $result = filter_var($ip, FILTER_VALIDATE_IP);
    return $result === FALSE ? FALSE : TRUE;
}
?></textarea>
<script type="text/javascript" src="./codemirror-5.63.3/lib/codemirror.js"></script>
<script type="text/javascript" src="./codemirror-5.63.3/keymap/sublime.js"></script>
<script type="text/javascript" src="./codemirror-5.63.3/addon/fold/foldcode.js"></script>
<script type="text/javascript" src="./codemirror-5.63.3/addon/fold/brace-fold.js"></script>
<script type="text/javascript" src="./codemirror-5.63.3/addon/fold/markdown-fold.js"></script>
<script type="text/javascript" src="./codemirror-5.63.3/addon/fold/foldgutter.js"></script>
<script type="text/javascript" src="./codemirror-5.63.3/addon/selection/active-line.js"></script>
<script type="text/javascript" src="./codemirror-5.63.3/addon/edit/matchbrackets.js"></script>
<script type="text/javascript" src="./codemirror-5.63.3/addon/display/fullscreen.js"></script>
<script type="text/javascript" src="./codemirror-5.63.3/mode/clike/clike.js"></script>
<script type="text/javascript" src="./codemirror-5.63.3/mode/php/php.js"></script>
<script type="text/javascript" src="./codemirror-5.63.3/mode/markdown/markdown.js"></script>
<script type="text/javascript">
    var myTextarea = document.getElementById('editor');

    var editor = CodeMirror.fromTextArea(myTextarea, {
        lineNumbers: true, // 是否显示行号
        theme: 'monokai', // 主题，需引入/theme/monokai.css
        mode: 'text/x-php', // 模式
        lineWrapping: 'wrap', // 文字过长时如何处理，可选值：wrap=换行|scroll=滚动[默认]
        showCursorWhenSelecting: true, // 文本选中时显示光标
        cursorHeight: 1, // 光标高度，默认是1
        readOnly: false, // 是否只读，只读状态下无法编辑
        indentUnit: 4, // 缩进单位，值为空格数，默认为2
        smartIndent: true, // 是否根据上下文自动缩进，和上一行相同的缩进量，默认为true
        tabSize: 4, // tab字符的宽度，默认为4
        indentWithTabs: true, // 在缩进时，是否需要把n*tab宽度个空格替换成n个tab字符，默认为false
        styleActiveLine: true, // 当前行背景高亮
        matchBrackets: true, // 括号匹配
        foldGutter: true, // 是否允许代码折叠
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'], // 代码折叠附加选项
    });

    editor.setSize('1000px', '618px'); // 设置宽度和高度（支持百分比尺寸），注意宽度是包括滚动条在内的

    // 快捷键效果实现
    editor.setOption('extraKeys', {
        // 把Tab键换成4个空格
        Tab: function (cm) {
            var spaces = Array(cm.getOption('indentUnit') + 1).join(' ');
            cm.replaceSelection(spaces);
        },

        // 进入全屏模式（必须光标在编辑区内按下才有效）
        'F11': function (cm) {
            cm.setOption('fullScreen', !cm.getOption('fullScreen'));
        },

        // 退出全屏模式
        'Esc': function (cm) {
            if (cm.getOption('fullScreen')) cm.setOption('fullScreen', false);
        },
    });
</script>
</body>
</html>