17.嵌入ace插件

我们想在problem-detail上具体显示代码建一个component 叫 editor 将ace集成上去，算是他的画布吧。

支持各种语言可以reset 提交写好的代码到server端编译运行

17.嵌入ace插件

然后我们就去 problem-detail页面把他加上也就是在详细页面显示

首先呢我们还是用那个网格但是呢？因为我们是想把ace放里面所以不适合太小，如果很小，不显示。比较小就占12个，一行。如果是middle就占8个

所以

17.嵌入ace插件

下面我们安装ace 一种和auth类似的用法下载源码在publc文件夹下 index.html中引入cdn 但是呢以后版本更新会很多麻烦

所以我们用命令行安装

17.嵌入ace插件

安装完成以后呢“？和安装bootstrap一样都要再引入才能使用”

17.嵌入ace插件

以后也会加入C++ PYTHON等

下面我们修改editor的html css 以及逻辑

17.嵌入ace插件

上面的写法写错了

17.嵌入ace插件

然后是css

17.嵌入ace插件

我们从ace官网的API可以了解到有很多事件

比如 change

所以我们就不用自己写

我们得到这写even或者说变化

通过socket io 传到server 告诉其他所有人这些变化然后client端接收这些变化

从而达到同步

我们看看效果

17.嵌入ace插件

报错

17.嵌入ace插件

因为他是angular一个保留的用处不能直接使用，因为，怕xxs注入，比如，我们绑定数值都是{{}}}，如果黑客注入，就惨了。如果要使用就加一行 ng-non-bindable

我们换一种写法

我们在ts文件里面 以string的形式写出来 然后把代码再setValue到editor里面去

就想操作一个dom一样网页元素一样

17.嵌入ace插件

我们看效果

17.嵌入ace插件

就一条很细的线

这是ace的问题他不能动态的设置大小

也就是他们的height是个固定值

我们只能改下

17.嵌入ace插件

我们再看看

17.嵌入ace插件

出现了

17.嵌入ace插件

有时候写了很多代码，想清除，我们做一个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>

17.嵌入ace插件

未下节课预留的submit 就是提交代码的按钮

我们原来的css强制定位不行了要改

17.嵌入ace插件

改成

@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

  }

}