wangEditor-3.1.1 自己扩展的，增加代码块行号 原创

wangEditor-3.1 使用highlight 

http://www.leixingke.com/article/detail/LltRnnv9  

wangEditor-3.1 自己扩展的，增加代码块行号 

wangEditor.js 

复制javascript/* 插入代码*/
	_insertCode: function _insertCode(value) {
		var _this = this;
		var editor = this.editor;
		var val = _this.codetype != null ? $('.codeType select').val() : "";
		//原来的
		//editor.cmd.do('insertHTML', '<pre><code class="' + val + '">' + value + '</code></pre><p><br></p>');
        /*****wangEditor 自己扩展的，增加行号 start****/
        var lines = value.split('<br/>').length; //debugger
        var codeid = 'code'+createHash(3); //debugger
        var html = '<pre><span class="top">'
        +'<span class="copy" onclick="copycode(\''+codeid+'\')">复制</span></span>'
        +'<span class="insertType">'+val+'</span>'
        +'<code id="'+codeid+'" class="' + val + '">' + value + '</code>'
        +'<ul readonly="readonly" class="pre-number">';
        var i=1;
        for(i=1; i<=lines; i++){
            html += '<li class="number">'+ i +'</li>';
        }
        html += '</ul>';
        html += '</pre><p><br></p>';
        editor.cmd.do('insertHTML', html);
        /*****wangEditor 自己扩展的，增加行号 end****/
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

点击按钮，复制传入id的内容到粘贴板

复制javascript/********点击按钮，复制传入id的内容到粘贴板 start********/
function copycode(id) {
    const range = document.createRange();
    range.selectNode(document.getElementById(id));
    const selection = window.getSelection();
    if(selection.rangeCount > 0) selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand('copy');
    layer.msg("复制成功!");
}
/********点击按钮，复制传入id的内容到粘贴板 start********/
1
2
3
4
5
6
7
8
9
10
11

js生成hash序列

复制javascript/**js生成hash序列**/
function createHash (hashLength) {
	// 默认长度 24
	return Array.from(Array(Number(hashLength) || 24), () => Math.floor(Math.random() * 36).toString(36)).join('');
}
1
2
3
4
5

css

复制css/******增加代码块行号 start********/
pre {
position: relative;
margin-bottom: 24px;
border-radius: 3px;
border: 1px solid #C3CCD0;
background: #eee;
overflow-y: scroll;
max-height: 500px;
}

code {
display: block;
padding: 12px 24px;
overflow-y: auto;
font-weight: 300;
font-family: Menlo, monospace;
font-size: 0.8em;
margin-left: 30px;
}

pre .pre-number {
position: absolute;
top: 25px;
left: 0;
width: auto;
padding: 18px 2px 18px 0;
border-right: 1px solid #C3CCD0;
border-radius: 3px 0 0 3px;
background-color: #EEE;
text-align: right;
font-size: 14px;
color: #aaaaaa;
}

pre .number {
margin-left: 10px;
margin-right: 5px;
line-height: 24px;
}
.hljs {
line-height: 24px !important;
background: #eee;

}

.w-e-text ul, .w-e-text ol {
margin: 0px !important;
padding: 0px !important;
}

#lx-article-content span.top, .w-e-text span.top{
position: sticky;
top:5px;
right: 15px;
width: 100%;
float: left;
border-radius: 5px;
font-size: 14px;
color: #fff;
/* background: #636363;*/
}
#lx-article-content span.insertType, .w-e-text span.insertType {
float: left;
padding: 3px 8px;
color: #62656f;
margin-left: 35px;
margin-top: -25px;
margin-left: 0px;
px: 10px;
}
#lx-article-content span.copy, .w-e-text span.copy{
float: right;
padding: 3px 8px;
border-radius: 5px;
color: #fff;
background: #636363;
margin-right: 5px;
}
#lx-article-content span.copy:hover, .w-e-text span.copy:hover{
background-color: #060606;
}
/******增加代码块行号 end********/
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

效果

http://www.leixingke.com/article/detail/YdA7iKcB