codeMirror实现Json编辑器功能

Posted Angies

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了codeMirror实现Json编辑器功能相关的知识,希望对你有一定的参考价值。

Code是一款代码编辑器,他可以支持多种编辑器功能,官网为http://codemirror.net/,本文主要讲解Json代码的编辑功能。下面是一些功能的代码及详细说明:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="codemirror-5.31.0/lib/codemirror.css">
    <script src="jquery.1.11.min.js"></script>
    <script src="codemirror-5.31.0/lib/codemirror.js"></script>
    <!--代码高亮必须引入-->
    <script src="codemirror-5.31.0/mode/javascript/javascript.js"></script>

    <!--引入css文件,用以支持主题-->
    <link rel="stylesheet" href="codemirror-5.31.0/theme/eclipse.css">

    <!--引入js,绑定Vim-->
    <link rel="stylesheet" href="codemirror-5.31.0/addon/dialog/dialog.css">
    <script src="codemirror-5.31.0/keymap/vim.js"></script>
    <script src="codemirror-5.31.0/addon/search/searchcursor.js"></script>
    <!--改善vim输入命令时的样式-->
    <script src="codemirror-5.31.0/addon/dialog/dialog.js"></script>

    <!--支持代码折叠-->
    <link rel="stylesheet" href="codemirror-5.31.0/addon/fold/foldgutter.css"/>
    <script src="codemirror-5.31.0/addon/fold/foldcode.js"></script>
    <script src="codemirror-5.31.0/addon/fold/foldgutter.js"></script>
    <script src="codemirror-5.31.0/addon/fold/brace-fold.js"></script>
    <script src="codemirror-5.31.0/addon/fold/comment-fold.js"></script>

    <!--全屏模式-->
    <link rel="stylesheet" href="codemirror-5.31.0/addon/display/fullscreen.css">
    <script src="codemirror-5.31.0/addon/display/fullscreen.js"></script>

    <!--括号匹配-->
    <script src="codemirror-5.31.0/addon/edit/matchbrackets.js"></script>

    <!--自动补全-->
    <link rel="stylesheet" href="codemirror-5.31.0/addon/hint/show-hint.css">
    <script src="codemirror-5.31.0/addon/hint/show-hint.js"></script>
    <script src="codemirror-5.31.0/addon/hint/anyword-hint.js"></script>
    <!--行注释-->
    <script src="codemirror-5.31.0/addon/comment/comment.js"></script>
    <!--格式化-->
    <script src="codemirror-5.31.0/addon/format/format.js"></script>
    <!--代码检查错误-->
    <link rel="stylesheet" href="codemirror-5.31.0/addon/lint/lint.css">
    <script src="jsonlint.js"></script>
    <script src="codemirror-5.31.0/addon/lint/lint.js"></script>
    <script src="codemirror-5.31.0/addon/lint/json-lint.js"></script>

    <style type="text/css">
        .CodeMirror {
            font-size:14px;
            color: #333;
            font-family: Microsoft YaHei Arial sans-serif;
            background-color: #FFF;
            border:1px solid #ece2e2;
        }
        button {
            position: absolute;
            top: 510px;
            left: 100px;
        }
        .CodeMirror-linenumber {
            background-color: #F7F7F7;
            color: #999;
            border:1px solid #ddd;
        }
    </style>
</head>
<body>
<textarea id="code"></textarea>
<button class="save" id="save" title="快捷键:Ctrl+S">保存</button>
</body>
<script type="text/javascript">
    var editor=CodeMirror.fromTextArea(document.getElementById("code"),{
        value: $(‘#code‘).val(),
        //Js高亮显示
        mode:"application/json",
        indentUnit : 2,  // 缩进单位,默认2
        smartIndent : true,  // 是否智能缩进
        //显示行号
        styleActiveLine: true,
        lineNumbers:true,
        lineWrapping:true,
        //设置主题
        theme:"eclipse",
        //绑定Vim
        keyMap:"vim",

        //代码折叠
        lineWrapping:true,
        foldGutter: true,
        gutters:["CodeMirror-linenumbers", "CodeMirror-foldgutter","CodeMirror-lint-markers"],
        //CodeMirror-lint-markers是实现语法报错功能
        lint: true,

        //全屏模式
        fullScreen:true,

        //括号匹配
        matchBrackets:true,

        //快捷键
        extraKeys:{
            "Alt-Space": "autocomplete",//ctrl-space唤起智能提示
            "F11": function(cm) {
                cm.setOption("fullScreen", !cm.getOption("fullScreen"));
            },
           "Esc": function(cm) {
               if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
            },
            "Ctrl-/": "toggleComment",
            "Ctrl-S": function () {
                $(‘#save‘).click();
            },
            "Ctrl-Z":function (editor) {
                editor.undo();
            },//undo
            "F8":function (editor) {
                editor.redo();
            },//Redo
            "F7": function autoFormat(cm) {
                var totalLines = cm.lineCount();
                cm.autoFormatRange({line:0, ch:0}, {line:totalLines});
            }//代码格式化
        }
    });
    editor.setSize(‘100%‘,‘500px‘);
    CodeMirror.commands.autocomplete = function(cm) {
        cm.showHint({hint: CodeMirror.hint.anyword});
    };
    $(‘#save‘).click(function () {
        var ob = editor.getValue();  // 得到所有内容
        alert(ob);
    });
</script>
</html>

一、引入基本框架

<link rel="stylesheet" href="codemirror-5.31.0/lib/codemirror.css">
 <script src="codemirror-5.31.0/lib/codemirror.js"></script>

本代码是为了引入项目CodeMirror的基本样式和基本方法

二、引入语法高亮
<script src="codemirror-5.31.0/mode/javascript/javascript.js"></script>

这里的调用会在body中添加编辑器,这里因为直接在上面引用了javascript.js,所以这个编辑器会对javascript的关键字高亮显示,由于Json是一种JavaScript,所以要想使用Json语法就必须引入javascript.js。

<!--引入css文件,用以支持主题-->
<link rel="stylesheet" href="codemirror-5.31.0/theme/eclipse.css">

codeMirror的所有文件夹中有一个theme文件夹,里面存放所有已有的主题,我此处用了eclipse.css主题,还可以自定义主题。

接下来在js中写入以下代码后就可以有基本的Json编辑器了:
var editor=CodeMirror.fromTextArea(document.getElementById("code"),{
        //Js高亮显示
        mode:"application/json",
        //显示行号
        styleActiveLine: true,
        lineNumbers:true,
     //设置主题
theme:"eclipse"
});

其中code为需要成为编辑器的容器的ID,mode属性就是选择要高亮的语法,此处为Json,lineNumbers:true是显示行号。

三、修改已有编辑器样式

此处修改了编辑器的样式和行号样式。

在style中写入class名为CodeMirror 的样式即为修改编辑器样式。写入class名为CodeMirror-linenumber即可修改行号样式,示例代码为:

    <style type="text/css">
        .CodeMirror {
            font-size:14px;
            color: #333;
            font-family: Microsoft YaHei Arial sans-serif;
            background-color: #FFF;
            border:1px solid #ece2e2;
        }
        button {
            position: absolute;
            top: 510px;
            left: 100px;
        }
        .CodeMirror-linenumber {
            background-color: #F7F7F7;
            color: #999;
            border:1px solid #ddd;
        }
    </style>

其他的代码讲解省略,参考代码注释可看懂。

 



以上是关于codeMirror实现Json编辑器功能的主要内容,如果未能解决你的问题,请参考以下文章

在线代码编辑器CodeMirror简介

codemirror输入反应慢

CodeMirror 多功能在线代码编辑器

工具类 - codeMirror

codemirror代码重复显示

codemirror高亮显示sql需要哪些包