├── README.md
├── ecode.css
├── ecode.js
└── index.html
/README.md:
--------------------------------------------------------------------------------
1 | # Ecode
2 | Javascript易语言代码框
3 |
4 | ## 3.5.10
5 | 1. 删除存在的多余html标签
6 | 2. 备注对","的修复
7 |
8 | ## 3.5.9
9 | 1. 修复命令在字符串有括号情况下高亮错误
10 | 2. 增加代码高亮对日期时间型的支持
11 |
12 | ## 3.5.8
13 | 1. 修复类模块识别为程序集的问题
14 |
15 | ## 3.5.7
16 | 1. 修复改善流程线
17 |
18 | ## 3.5.6
19 | 1. 修复部分多维数组导致错误
20 |
21 | ## 3.5.5
22 | 1. 修复 且 和 或 显示错误
23 | 2. 修复当代码过长流程线显示错误
24 |
25 | ## 3.5.4
26 | 1. 修复部分备注错乱
27 | 2. 修复多个子程序不能完全显示
28 | 3. 修复判断嵌套流程线错位
29 |
30 | ## 3.5.3
31 | 1. 修复DLL公开勾符号
32 | 2. 修复单个判断流程线js报错
33 | 3. 修复备注高亮错误
34 | 4. 修复判断嵌套错误
35 | 5. 修复如果真流程线某些情况下出现过长
36 | 6. 修复命令嵌套未高亮
37 | 7. 改进流程线,更接近易语言原版IDE
38 |
39 | ## 3.5.1
40 | 1. 修复表格备注半角引号后内容不显示
41 |
42 | ## 3.5
43 | 1. 修复如果真流程线不一致
44 | 2. 修复部分注释代码内容被高亮
45 | 3. 添加且&或,真&假
46 | 4. 修复命令高亮的bug
47 |
48 | ## 3.4 (3.0的流程线部分推倒重做了)
49 | 1. 修复若干bug
50 | 2. 改进流程线
51 |
52 | ## 3.0
53 | 1. 此版本为重写版本, 与上一个版本不通用(废弃), 推荐用此版本
54 | 2. 添加流程线小箭头
55 | 3. 重写转换后的html结构, 便于自定义样式. 进行外部js修改简单
56 | 4. 无需像上版本需要特定格式的id名
57 | 5. 支持全局转换. 指定元素单个转换以及自定义目标元素数组转换
58 | 6. 容错性提高, 支持程序集代码 dll代码等多个部分同时存在的情况, 建议还是分开放置
59 | 7. 优化操作部分
60 | 8. 提高兼容性
61 |
62 | # 兼容性说明
63 | 1. 支持 Chrome
64 | 2. 支持 Firefox
65 | 3. 支持 Safari
66 | 4. 支持 IE 8+
67 |
68 | # 使用说明
69 | 1. 引入ecode.css & ecode.js(可以自行下载,也可以直接从本站引用)
70 | 2. 创建Ecode对象
71 | 3. 使用对象的tran方法
72 | PS: 使用方法请参考本页面代码, 此版本为UTF-8版本, 如需其他编码格式请自行转码
73 |
--------------------------------------------------------------------------------
/ecode.css:
--------------------------------------------------------------------------------
1 | /* Ecode 3.5.10 */
2 | *{
3 | margin:0px auto;
4 | padding: 0px auto;
5 | font-family: "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans
6 | }
7 | .ecode{
8 | font-size: 12px;
9 | margin:0px auto;
10 | padding: 0px auto;
11 | float: left;
12 | position: relative;
13 | background-color: #FDFDFD;
14 | margin: 10px;
15 | overflow: hidden;
16 | border: 1px solid #F1F2F4;
17 | }
18 | .ecode .show{
19 | margin-top: 30px;
20 | height: 100%;
21 | float: left;
22 | position: relative;
23 | overflow:auto;
24 | width: 100%;
25 | padding: 1px;
26 | padding-bottom: 10px;
27 | }
28 | .ecode table,.ecode p,.ecode ul,.ecode li,.ecode .function,.ecode .assembly{
29 | position: relative;
30 | float: left;
31 | clear: left;
32 | display: block;
33 | list-style: none;
34 | }
35 | .ecode .function{
36 | margin-bottom: 10px;
37 | }
38 | .ecode table td,.ecode table th{
39 | text-align: left;
40 | border-right: 1px solid;
41 | border-bottom: 1px solid;
42 | padding: 2px 3px;
43 | border-color: #888888;
44 | }
45 | .ecode table td{
46 | background-color: #fff;
47 | }
48 | .ecode table{
49 | border-left: 1px solid;
50 | border-top: 1px solid;
51 | border-collapse: separate;
52 | border-spacing: 0px;
53 | border-color: #888888;
54 | white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
55 | }
56 | .ecode .show div{
57 | clear: left;
58 | float: left;
59 | margin-left: 10px;
60 | margin-bottom: 10px;
61 | }
62 | .ecode .show div:first-child{
63 | margin-top: 10px;
64 | }
65 | .ecode .function_table{
66 | margin-bottom: 4px;
67 | }
68 | .ecode .variable_table{
69 | margin-bottom: 4px;
70 | }
71 | .ecode .assembly_table{
72 | margin-bottom: 8px;
73 | }
74 | .ecode ul{
75 | padding-left: 22px;
76 | position: relative;
77 | float: left;
78 | }
79 | .ecode ul li{
80 | margin-left: 0px;
81 | float: left;
82 | position: relative;
83 | display: block;
84 | }
85 | .ecode span{
86 | position: relative;
87 | float: left;
88 | display: block;
89 | }
90 | .ecode p{
91 | position: relative;
92 | line-height: 20px;
93 | float: left;
94 | display: block;
95 | clear: both;
96 | white-space:nowrap; text-overflow:ellipsis;
97 | }
98 | .ecode .line1{
99 | width: 15px;
100 | border-style: dashed;
101 | border-color: #808080;
102 | border-left-width:1px;
103 | border-top-width:1px;
104 | border-right-width:0px;
105 | border-bottom-width:1px;
106 | left: 2px;
107 | top:10px;
108 | position: absolute;
109 | }
110 | .ecode .judgeChild{
111 | position: relative;
112 | overflow: visible;
113 | float: left;
114 | }
115 | .ecode .judgeChild .line2{
116 | border-left-width:0px;
117 | }
118 | .ecode .line2{
119 | height: 100%;
120 | width: 10px;
121 | border-style: dashed;
122 | border-color: #808080;
123 | border-left-width:1px;
124 | border-top-width:1px;
125 | border-right-width:0px;
126 | border-bottom-width:0px;
127 | display: none;
128 | top:10px;
129 | left: 8px;
130 | position: absolute;
131 | }
132 | .ecode .line3{
133 | height: 100%;
134 | width: 32px;
135 | left: -1px;
136 | border-style: dashed;
137 | border-color: #808080;
138 | border-left-width:0px;
139 | border-top-width:0px;
140 | border-right-width:0px;
141 | border-bottom-width:1px;
142 | display: none;
143 | position: absolute;
144 | }
145 | .ecode .line4{
146 | height: 100%;
147 | width: 32px;
148 | top: -1px;
149 | left: -1px;
150 | border-style: dashed;
151 | border-color: #808080;
152 | border-left-width:0px;
153 | border-top-width:1px;
154 | border-right-width:0px;
155 | border-bottom-width:0px;
156 | display: none;
157 | position: absolute;
158 | }
159 | .ecode .triangle-right {
160 | width: 0;
161 | height: 0;
162 | border-top: 4px solid transparent;
163 | border-left:5px solid #808080;
164 | border-bottom: 4px solid transparent;
165 | position: absolute;
166 | right: -2px;
167 | display: none;
168 | }
169 | .ecode .triangle-down {
170 | width: 0;
171 | height: 0;
172 | border-top: 5px solid #808080;
173 | border-left: 4px solid transparent;
174 | border-right: 4px solid transparent;
175 | position: absolute;
176 | bottom: -2px;
177 | left: -4px;
178 | display: none;
179 | }
180 | .ecode .close{
181 | width: 0px;
182 | height: 0px;
183 | overflow: hidden;
184 | float: left;
185 | }
186 | .ecode .def{
187 | width: 0px;
188 | height: 0px;
189 | overflow: hidden;
190 | float: left;
191 |
192 | }
193 | .ecode .ifTrueClose{
194 | overflow: hidden;
195 | padding: 0px;
196 | height: 0px;
197 | }
198 | .ecode .assembly div{
199 | margin-left: 0px;
200 | }
201 | .ecode .assembly_table tr:nth-child(2) td:first-child{
202 | color:#000080;
203 | }
204 | .ecode .function_table tr:nth-child(2) td:first-child{
205 | color:#000080;
206 | }
207 | .ecode .sysCommand{
208 | color:#0000FF
209 | }
210 | .ecode .bracket0{
211 | color:#000080;
212 | padding: 0px 2px;
213 | }
214 | .ecode .bracket1{
215 | color:#000080;
216 | padding: 0px 2px;
217 | }
218 | .ecode .bracket2{
219 | color:#000080;
220 | padding: 0px 2px;
221 | }
222 | .ecode .operator{
223 | color:#000080;
224 | padding: 0px 2px;
225 | }
226 | .ecode .datetime{
227 | color:#000080;
228 | padding: 0px 2px;
229 | }
230 | .ecode .math{
231 | color:#800000
232 | }
233 | .ecode .command{
234 | color:#800000
235 | }
236 | .ecode .static{
237 | color:#000080
238 | }
239 | .ecode .quote{
240 | color:#008080
241 | }
242 | .ecode table th{
243 | background-color: #E6EDE4;
244 | font-weight: 400;
245 | }
246 | .ecode .dataType{
247 | color: #0000FF;
248 | }
249 | .ecode .remark{
250 | color: #008000
251 | }
252 | .ecode .logic{
253 | color:#000080;
254 | margin-left: 8px;
255 | margin-right: 8px;
256 | }
257 | .ecode .logicStatic{
258 | color:#000080;
259 | }
260 | .ecode .origiData,.ecode .origiData textarea{
261 | width: 100%;
262 | height: 100%;
263 |
264 | }
265 | .ecode .origiData textarea{
266 | padding: 0px;
267 | margin: 0px;
268 | width: 100%;
269 | height: 100%;
270 | border:none;
271 | padding: 1px;
272 | font-size: 12px;
273 | }
274 | .ecode .origiData{
275 | left: 0px;
276 | top:30px;
277 | position: absolute;
278 | display: none;
279 | width: 100%;
280 |
281 | }
282 | .ecode .controller{
283 | height:30px;
284 | width: 100%;
285 | background-color: #F1F2F4;
286 | top:0px;
287 | left: 0px;
288 | position: absolute;
289 |
290 | }
291 | .ecode .controller .copy{
292 | height:30px;
293 | padding: 0px 5px;
294 | color: #fff;
295 | background-color: #45A3E1;
296 | line-height: 30px;
297 | font-size: 12px;
298 | text-decoration: none;
299 | position: absolute;
300 | right: 0px;
301 | top: 0px;
302 | }
303 | .ecode .controller .desc{
304 | height:30px;
305 | width: 100%;
306 | top:0px;
307 | left: 0px;
308 | position: absolute;
309 | font-size: 14px;
310 | text-indent: 10px;
311 | line-height: 30px;
312 |
313 | }
314 |
--------------------------------------------------------------------------------
/ecode.js:
--------------------------------------------------------------------------------
1 | //-------------------------------------------------------------//
2 | //* Ecode 3.5.10 *//
3 | //* Created by zhangshirong Jarvis *//
4 | //-------------------------------------------------------------//
5 |
6 | var Ecode = {
7 | create: function() {
8 | var ecode={};
9 | var lastPart=-1;
10 | var doubleCom=[
11 | [".如果真",".如果真结束"],
12 | [".判断开始",".判断结束"],
13 | [".如果",".如果结束"],
14 | [".判断循环首",".判断循环尾"],
15 | [".变量循环首",".变量循环尾"],
16 | [".计次循环首",".计次循环尾"],
17 | [".循环判断首",".循环判断尾"]
18 | ]
19 | var replaceCommand=[
20 | {origi:".如果真",replace:"如果真"},
21 | {origi:".如果真结束",replace:"如果真结束"},
22 | {origi:".判断开始",replace:"判断"},
23 | {origi:".判断",replace:"判断"},
24 | {origi:".默认",replace:"默认"},
25 | {origi:".判断结束",replace:"判断结束"},
26 | {origi:".如果",replace:"如果"},
27 | {origi:".否则",replace:"否则"},
28 | {origi:".如果结束",replace:"如果结束"},
29 | {origi:".判断循环首",replace:"判断循环首"},
30 | {origi:".判断循环尾",replace:"判断循环尾"},
31 | {origi:".计次循环首",replace:"计次循环首"},
32 | {origi:".计次循环尾",replace:"计次循环尾"},
33 | {origi:".变量循环首",replace:"变量循环首"},
34 | {origi:".变量循环尾",replace:"变量循环尾"},
35 | {origi:".循环判断首",replace:"循环判断首"},
36 | {origi:".循环判断尾",replace:"循环判断尾"}
37 | ];
38 | var sysCom=[
39 | "返回",
40 | "跳出循环",
41 | "到循环尾",
42 | "结束"
43 | ];
44 | var sysCom2=[
45 | "或",
46 | "且"
47 | ];
48 | var sysSta=[
49 | "真",
50 | "假"
51 | ]
52 | ecode.trans=function(ele){ //ele如果为空则转换当前所有class为ecode的,ele为指定的即转换指定,同时ele可以为自定义的元素数组
53 | var eleEcode;
54 | if(ele){
55 | if(ele.length>1){eleEcode=[ele];}
56 | else{eleEcode=ele;}
57 | }
58 | else{
59 | eleEcode=document.querySelectorAll(".ecode");
60 | }
61 | for(var a=0;a/g,">");
69 | eleEcode[a].innerHTML="Loading...
"
70 | var lineCodes=origiData.split("\n");
71 | var b;
72 | for(b=0;b0){
122 | var program=new Array();
123 | for(var c=limit[b][0];c";
142 | html+=drawn(assembly[b]);
143 | }
144 |
145 | var allHTML=""+eleEcode[a].getAttribute("desc")+"复制代码 "+html+"
";
147 | eleEcode[a].innerHTML=allHTML;
148 | var eleOrigiData=eleEcode[a].querySelector(".origiData");
149 | eleEcode[a].style.height=eleEcode[a].clientHeight+"px";
150 | eleOrigiData.style.height=eleEcode[a].clientHeight-30+"px";
151 | var eleEcodeIfTrue=eleEcode[a].querySelectorAll(".ifTrue");
152 | var eleEcodeCyc=eleEcode[a].querySelectorAll(".cycle");
153 | var eleEcodeShow=eleEcode[a].querySelector(".show");
154 | var eleEcodeJudge=eleEcode[a].querySelectorAll(".judge");
155 | var eleEcodeIf=eleEcode[a].querySelectorAll(".if");
156 | var eleEcodeUl=eleEcode[a].querySelectorAll("ul");
157 | eleEcodeShow.style.width=window.screen.availWidth+"px";
158 | //处理高度//////////////////////////////////////
159 | for(var b=0;b-1)turn3=1;
297 | }
298 | }
299 | var add=turn0*4;
300 | var line1_;
301 | var line2_;
302 | var line3_;
303 | tempData['parent']=parent;
304 | tempData['turn0']=turn0;
305 | tempData['turn1']=turn1;
306 | tempData['turn2']=turn2;
307 | tempData['turn3']=turn3;
308 | tempData['def']=def;
309 | tempData['add']=add;
310 | tempData['all']=all;
311 | judgeValueFixed[judgeValueFixed.length]=tempData;
312 | if(all[0] && all[0]-2==1){
313 | parent.children[2].style.marginBottom="20px";
314 | }
315 | for(var c=0;c 0 || parentNext.children[0].className.indexOf("def") > 0)) {
336 | parent.children[close].style.marginBottom = "20px";
337 | }
338 | }
339 | //如果真预处理//////////////////////////////////////
340 | var ifTrueValueFixed=new Array();
341 | for(var b=0;b-1)turn3=1;
423 | }
424 | }
425 | var add=turn0*4;
426 | line1.style.top=10+add+"px";
427 | line1.style.height=parent.children[def].offsetTop-add+"px";
428 | line1.querySelector(".triangle-right").style.bottom="-5px";
429 | line1.querySelector(".triangle-right").style.display="block";
430 | if(turn1){
431 | line2.querySelector(".triangle-right").style.display="block";
432 | line2.querySelector(".triangle-right").style.bottom="-5px";
433 | line2.style.borderBottomWidth="1px";
434 | if(add==0){
435 | add=6;
436 | }
437 | line2.style.height=parent.children[close].offsetTop-parent.children[def].offsetTop+20+parent.children[close].offsetHeight+"px";
438 | line2.style.top=parent.children[def].offsetTop-10+"px";
439 | line2.style.display="block";
440 | }
441 | else{
442 | line2.querySelector(".triangle-down").style.display="block";
443 | line2.style.height=parent.children[close].offsetTop-parent.children[def].offsetTop+10+parent.children[close].offsetHeight+"px";
444 | line2.style.top=parent.children[def].offsetTop-10+"px";
445 | line2.style.display="block";
446 | }
447 | if(turn2){
448 | line1.style.borderBottomWidth="0px";
449 | line1.style.height=line1.clientHeight-6+"px";
450 | line1.querySelector(".triangle-right").style.left="32px";
451 | line3.style.display="block";
452 | }
453 | if(turn3){
454 | line2.style.borderTopWidth="0px";
455 | line2.style.height=line2.clientHeight-8+"px";
456 | line2.style.top=parent.children[def].offsetTop-10+4+"px";
457 | line4.style.display="block";
458 | }
459 |
460 | }
461 | //计算判断流程线//////////////////////////////////////////
462 | for(var b=0;b-1){
504 | line2_.style.top=line1_.offsetHeight+2+"px";
505 | line2_.style.width="30px";
506 | }
507 | else{
508 | line2_.style.top=line1_.offsetHeight-2+"px";
509 | }
510 | line2_.style.left="-12px";
511 | line2_.style.borderTopWidth="1px";
512 | line2_.style.display="block";
513 |
514 | }
515 | line1.style.top=10+add+"px";
516 | line1.style.height=parent.children[def].offsetTop-add+"px";
517 | line1.querySelector(".triangle-right").style.bottom="-5px";
518 | line1.querySelector(".triangle-right").style.display="block";
519 | if(all.length){
520 | line1.style.height=parent.children[all[0]].offsetTop-10+6-add+"px";
521 | if(turn1){
522 | line2.querySelector(".triangle-right").style.display="block";
523 | line2.querySelector(".triangle-right").style.bottom="-5px";
524 | line2.querySelector(".triangle-right").style.right="-1px";
525 | line2.style.borderBottomWidth="1px";
526 | line2.style.height=parent.children[close].offsetTop-parent.children[all[0]].offsetTop+20-6+"px";
527 | }
528 | else{
529 | line2.querySelector(".triangle-down").style.display="block";
530 | line2.style.height=parent.children[close].offsetTop-parent.children[all[0]].offsetTop+20-10-6+"px";
531 | }
532 | line2.style.top=parent.children[all[0]].offsetTop-10+"px";
533 | line2.style.display="block";
534 | if(turn2){
535 | line1_.style.borderBottomWidth="0px";
536 | line1_.style.height=line1_.offsetHeight-4+"px";
537 | line1_.querySelector(".triangle-right").style.left="32px";
538 | line3_.style.display="block";
539 | }
540 | if(turn3){
541 | line2.style.borderTopWidth="0px";
542 | line2.style.height=line2.clientHeight-2+"px";
543 | line2.style.top=line2.offsetTop+4+"px";
544 | line4.style.display="block";
545 | }
546 |
547 | }
548 | else{
549 | if(turn1){
550 | line2.querySelector(".triangle-right").style.display="block";
551 | line2.querySelector(".triangle-right").style.bottom="-5px";
552 | line2.style.borderBottomWidth="1px";
553 | if(add==0){
554 | add=6;
555 | }
556 | line2.querySelector(".triangle-right").style.right="-1px";
557 | line2.style.height=parent.children[close].offsetTop-parent.children[def].offsetTop+20-add+parent.children[close].offsetHeight+"px";
558 |
559 | }
560 | else{
561 | line2.querySelector(".triangle-down").style.display="block";
562 | line2.style.height=parent.children[close].offsetTop-parent.children[def].offsetTop+10+parent.children[close].offsetHeight+"px";
563 | }
564 | line2.style.top=parent.children[def].offsetTop-10+"px";
565 | line2.style.display="block";
566 | if(turn2){
567 | line1.style.borderBottomWidth="0px";
568 | line1.style.height=line1.clientHeight-6+"px";
569 | line1.querySelector(".triangle-right").style.left="34px";
570 | line3.style.display="block";
571 | }
572 | if(turn3){
573 | line2.style.borderTopWidth="0px";
574 | line2.style.height=line2.clientHeight-6+"px";
575 | line2.style.top=line2.offsetTop+6+"px";
576 | line4.style.display="block";
577 | }
578 | }
579 |
580 | }
581 | //计算如果真流程线//////////////////////////////////////
582 | for(var b=0;bquoteMat[a][0]){
623 | k=a+1;
624 | break;
625 | }
626 | }
627 | return k;
628 | }
629 | function drawn(origiArr){
630 | var html="";
631 | var endDivTag=0;
632 | for(var b=0;b