我们想 在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是个固定值
我们只能改下
我们再看看
出现了