我们想 在problem-detail上具体显示代码 建一个component 叫 editor 将ace集成上去,算是他的画布吧。
支持各种语言 可以reset 提交写好的代码到server端编译运行
然后我们就去 problem-detail页面把他加上 也就是在详细页面显示
首先呢 我们还是用那个网格 但是呢?因为我们是想把ace放里面 所以 不适合太小,如果很小,不显示。比较小就占12个,一行。如果是middle就 占8个
所以
下面我们安装ace 一种和auth类似的用法下载源码在publc文件夹下 index.html中引入cdn 但是呢 以后版本更新会很多麻烦
所以我们用命令行安装
安装完成以后呢“?和 安装bootstrap一样 都要再引入才能使用”
以后也会加入C++ PYTHON等
下面我们修改editor的html css 以及逻辑
上面的写法写错了
然后是css
我们从ace官网的API可以了解到 有很多事件
比如 change
所以我们就不用自己写
我们得到这写even或者说变化
通过socket io 传到server 告诉其他所有人这些变化 然后client端接收这些变化
从而达到 同步
我们看看效果
报错
因为他是angular一个保留的用处 不能直接使用,因为,怕xxs注入,比如,我们绑定数值都是{{}}},如果黑客注入,就惨了。如果要使用就加一行 ng-non-bindable
我们换一种写法
我们在ts文件里面 以string的形式写出来 然后把代码再setValue到editor里面去
就想操作一个dom一样 网页元素一样
我们看效果
就一条很细的线
这是ace的问题 他不能动态的设置大小
也就是他们的height是个固定值
我们只能改下
我们再看看
出现了
有时候写了很多代码,想清除,我们做一个reset的功能
设计一个button 怕用户误按 我们做成弹出框,让用户确认一下
再设计一个下拉菜单,可以选择多个语言
<section> <header class="editor-header"> <select class="form-control pull-left lang-select" name="language" [(ngModel)]="language" (change)="setLanguage(language)"> <option *ngFor="let language of languages" [value]="language"> {{language}} </option> </select> <!-- reset button --> <!-- Button trigger modal --> <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal"> <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Reset</h4> </div> <div class="modal-body"> You will lose current code in the window, are you sure? </div> <div class="modal-footer"> <button type="button" class="btn btn-success" data-dismiss="modal" (click)="resetEditor()">Reset</button> <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button> </div> </div> </div> </div> </header> <div class="row"> <div id="editor"></div> </div> <footer class="editor-footer"> <button type="button" class="btn btn-success pull-right" (click)="submit()">Submit Solution</button> </footer> </section>
未下节课预留的submit 就是提交代码的按钮
我们原来的css强制定位不行了 要改
改成
@media screen { #editor { height: 600px; } .lang-select { width: 100px; margin-right: 10px; } header .btn { margin: 0 5px; } footer .btn { margin: 0 5px; } .editor-footer, .editor-header { margin: 10px 0; } .cursor { /*position:absolute;*/ background: rgba(0, 250, 0, 0.5); z-index: 40; width: 2px!important } }
看看效果
我们在前端加入几个语言
当然这是很简单的 只是加入几个字符串
后端就比较难 下一次做
意思是当我们切换语言,我们会调用resetEditor()方法 切换到那个语言
我们需要更改mode既 语言
和setValue 既 那个字符串模板代码
就是字符串 变量拼接
那么就可以改成
启动的时候重置一下语言
我们写一点代码
提交
无所谓我们写什么 他只是把页面的代码全部返回
切换语言我们完成了
但是当我们切换语言到python
仍然是用的Java的语言高亮
虽然我们已经将setMode对应相符的语言 但是呢 具体的包我们还没引入项目中
我们去angular.json
看看效果
OK python和C++语法高亮有了