monaco-editor的使用

devops-sample中已经添加相关示例页面 (devops-sample/pages/home/codeEditor)

简单的编辑器实现

使用editor.create(id,data)方法创建文件编辑查看器，参数id为html页面中要显示编辑器的标签的id，参数data为相关数据（具体说明见使用扩展）。
如，要在一个id为js-manoco-editor的标签中放入一个文件编辑器：

function done(editor) {
  displayEditor = editor.create($('#js-manoco-editor')[0], { //#js-manoco-editor为要渲染的标签的id
    value: nui.loadText("sample/pages/data/codeEditorDemo-java.txt"), //要显示的代码
    language: "java", //语言类型
    theme: "vs-dark" //显示的主题
  });
}
nui.loadCodeEditor(done); //加载编辑器

动态改变编辑器中的内容

修改语言

   使用displayEditor.setModel(newModel)方法设定编辑器中显示的内容, 参数newModel为编辑器中要显示的新内容通过editor.createModel(contentTxt,theme)方法创建，
 （editor.createModel(contentTxt,theme)中，参数contentTxt为要编辑器中的内容，参数theme为编辑器显示主题风格）
  如

      var url = "sample/pages/data/codeEditorDemo-javascript.txt";    //代码的url地址
      var contentTxt = nui.loadText(url);      //加载要显示的代码
      var newModel = monacoEditor.createModel(contentTxt,"java");   //创建新代码的模型，第二个参数为语言类型
      displayEditor.setModel(newModel);       //将新模型放进展示窗

修改编辑器中显示的内容使用displayEditor.getModel().setValue(code)，参数code为string

      var url = "sample/pages/data/codeEditorDemo-javascript.txt";    //用户选择的代码的url地址
      var contentTxt = nui.loadText(url);      //加载要显示的代码
      displayEditor.getModel().setValue(contentTxt);       //将新代码放进编辑器

修改编辑器中的显示风格

使用displayEditor.updateOptions(data)方法,如

displayEditor.updateOptions({
'theme': "vs-dark"     //vs-dark为要设置的显示风格
});

动态加载代码及当前语言获取

使用displayEditor.getModel().setValue(code)方法可以设置编辑器中显示的内容
使用displayEditor.getModel().getValue()方法可以获取到编辑器中的内容
使用editor.languages.getLanguages()获得当前编辑器语言

使用扩展

editor.create(id,data)中的data参数内可以包含很多属性，
通过设置这些属性可以改变编辑器的一些显示效果
(这里仅仅展示一部分属性，了解更多属性点这里)

{       
        value: nui.loadText("sample/pages/data/codeEditorDemo-java.txt"),   //要显示的代码
        language: "java",    //语言类型
        theme: "vs-dark",     //显示的主题
        frontSize: 12 ,       //显示器中的字号
        readOnly: true        //设置编辑器中的文字可编辑
 }

diff的使用

使用editor.createDiffEditor(id, data);方法创建编辑器，参数id为html页面中要显示编辑器的标签的id，参数data为相关数据（具体说明见使用扩展）
通过diffEditor.setModel({original:eidtorModel1,modified:eidtorModel2})方法来设置要对比的两段代码，editorModel为编辑模块，需要通过editor.createModel(code，language)方法创建（monaco-editor的使用中解释过该方法）如

var done = function(editor) {
      diffEditor = editor.createDiffEditor($('#js-manoco-diff-editor')[0], {
        theme: "vs-dark"  //设置编辑器主题风格
      });
      diffEditor.setModel({
        original: editor.createModel(nui.loadText("sample/pages/data/codeEditorDemo-diff-original.txt"), 'javascript'),    //原版内容
        modified: editor.createModel(nui.loadText("sample/pages/data/codeEditorDemo-diff-modified.txt"), 'javascript')     //修改的内容
      })
    }
    nui.loadCodeEditor(done);       //加载编辑器

使用monaco-editor文件编辑查看器及diff