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 {
    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++语法高亮有了