html使用codemirror打造你自己的前端在线编辑器

使用codemirror打造在线编辑器

下载codemirror代码
在codemirror官网下载代码，代码目录结构如下
在demo目录下可以查看各种配置的例子
一个最简单的在线代码编辑器
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>在线编辑器例子</title>
<!– code mirror的样式 –>
<link rel=”stylesheet” href=”css/codemirror.css” />
<!– code mirror核心代码 –>
<script src=”js/codemirror.js”></script>
<!– 使用后html代码会有各种颜色提示 –>
<script src=”js/xml.js”></script>
<!– 主题样式 –>
<link rel=”stylesheet” href=”theme/dracula.css”>
</head>
<body>
<textarea id=”code-html”></textarea>
<script type=”text/javascript”>
CodeMirror.fromTextArea(document.getElementById(‘code-html’),{
mode: ‘text/html’, // 对何种类型的代码进行高亮提示
theme: ‘dracula’, // 设置一个主题，方便查看效果
})
</script>
</body>
</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
按照上述例子引入文件，就可以获得一个最简单的在线编辑器，输入html代码标签时会有对应的高亮颜色提示。要想使编辑器功能更强大就需要不断引入其他的配置。

3、配置所需要的功能
引入的配置文件有何种作用？
以下展示部分引入文件与其作用

<!– 代码折叠时的样式 –>
<link rel=”stylesheet” href=”css/foldgutter.css” />
<!– 全屏时的样式 –>
<link rel=”stylesheet” href=”css/fullscreen.css” />
<!– 唤出来的提示代码的样式 –>
<link rel=”stylesheet” href=”css/show-hint.css” />
<!– javascript代码高亮样式 –>
<script src=”js/javascript.js”></script>
<!– 可以设置代码提示 –>
<script src=”js/anyword-hint.js”></script>
<script src=”js/show-hint.js”></script>

<!– 全屏显示，好像没什么用 –>
<script src=”js/fullscreen.js”></script>

<!– 搜索完成后光标会消失 –>
<script src=”js/searchcursor.js”></script>
<!– 给编辑器添加搜索功能 –>
<script src=”js/search.js”></script>
<!– 使用后编写css会有各种高亮颜色提示 –>
<script src=”js/css.js”></script>
<!– html中混合使用css和js时也会有样式适配 –>
<script src=”js/htmlmixed.js”></script>
<!– 允许textarea中使用placeholder –>
<script src=”js/placeholder.js”></script>
<!– 使用后html代码会有各种颜色提示 –>
<script src=”js/xml.js”></script>
<!– 自动闭合标签 –>
<script src=”js/closetag.js”></script>
<!– 自动闭合括号 –>
<script src=”js/closebrackets.js”></script>
<!– 光标放在括号右边时，自动高亮对应的括号 –>
<script src=”js/matchbrackets.js”></script>
<!– 鼠标点击时，自动匹配成对的标签，需要先引入xml-fold.js，要不然会报错，引入xml-fold可以折叠html代码 –>
<script src=”js/xml-fold.js”></script>
<script src=”js/matchtags.js”></script>

<!– 高亮光标所在的行 –>
<script src=”js/active-line.js”></script>
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
引入的配置文件有的不会直接起作用，还需要进行配置才会真正看到效果

let cm_opt = {
/**
* 模式，表示对那种类型的代码进行样式渲染，mode的参数可以去查看demo，需要高亮什么就查看对应的demo,
* 看看是什么参数，其他的配置一样，都可以在demo中找到
* /
mode: ‘text/html’,
gutter: false,
lineNumbers: true, // 行号
autoCloseBrackets:true, // 是否自动闭合括号
styleActiveLine: true, // 高亮当前行
theme:”dracula”, // 编辑器主题
lineWrapping: true, // 是否换行
foldGutter: true, // 是否能折叠代码
gutters: [“CodeMirror-linenumbers”, “CodeMirror-foldgutter”],
extraKeys: {“Alt-/”: “autocomplete”}, // 使用alt+/唤出代码提示
matchBrackets: true, // 是否能匹配成对的括号
matchTags: {bothTags: true}, // 鼠标点击时匹配成对的标签
autoCloseTags:true // 是否自动闭合标签
}
CodeMirror.fromTextArea(document.getElementById(“code-html”),cm_opt);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
4、如何在线查看运行结果？
经过上述配置，在线代码编辑器是有了，可是无法查看运行结果就没有意义了，下面来介绍如何查看在线运行的结果，方便调试。

// 获取编辑器内容
let html = html_editor.getValue();
let css = css_editor.getValue();
let js = js_editor.getValue();

let src = html;
let array_matches_head_tag = null;
let array_matches_body_tag = null;

// 这里我是把html、css、js分成三个编辑器分别编辑，当然都在html编辑器里编辑也行
// 分成三个所以要把三个编辑器里的内容拼接成一个完整的html文件
if(html) {
let patternHtmlTag = /<html([^>]*)>/im;
let array_matches_html_tag = patternHtmlTag.exec(html);
if(array_matches_html_tag) {
src = src.replace(‘<html>’,'<html’+array_matches_html_tag[1]+’>’);
}
let patternHead = /<head[^>]*>((.|[\n\r])*)<\/head>/im;
array_matches_head_tag = patternHead.exec(src);
let patternBody = /<body([^>]*)>/im;
array_matches_body_tag = patternBody.exec(src);
if(array_matches_body_tag) {
src = src.replace(‘<body>’, ‘<body ‘ + array_matches_body_tag[1] + ‘>’);
}
}
// 拼接css代码
if(css) {
css = ‘<style>’+css+'</style>’;
if(array_matches_head_tag) {
src = src.replace(‘</head>’,css+'</head>’);
}else if(array_matches_body_tag) {
src = src.replace(‘</body>’,css+'</body>’);
}else {
src += css;
}
}
// 拼接js代码
if(js) {
js = ‘<script>’+js+'<\/script>’;
if(array_matches_body_tag) {
src = src.replace(‘</body>’,js+'</body>’);
}else {
src += js;
}
}
let text = src;
// 生成iframe，将拼接好的html代码写入iframs中，这样就能显示出运行结果了
let ifr = document.createElement(‘iframe’);
ifr.setAttribute(“frameborder”, “0”);
ifr.setAttribute(“id”, “iframeResult”);
document.getElementById(“output”).innerHTML = “”;
document.getElementById(“output”).appendChild(ifr);
var ifrw = (ifr.contentWindow) ? ifr.contentWindow: (ifr.contentDocument.document) ? ifr.contentDocument.document: ifr.contentDocument;
ifrw.document.open();
ifrw.document.write(text);
ifrw.document.close();
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
5、看了上述介绍还是写不出来？没关系，我把我写好的代码放在这里了，需要的话直接下载下来慢慢研究也行