17.嵌入ace插件

我们想在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">&times;</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 {
     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;
     2px!important
  }
}