接入ACE编辑器

Author: chengyu2333

package.json

@@ -15,7 +15,8 @@
     "codemirror": "^5.58.3",
     "file-saver": "^2.0.5",
     "qrcode.vue": "^1.6.2",
-    "vue": "^2.5.2"
+    "vue": "^2.5.2",
+    "vue2-ace-editor": "^0.0.15"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <PythonEditor />
+    <PythonEditor editorType="ace"/>
   </div>
 </template>
 

src/AppPlayer.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="player">
-    <PythonPlayer />
+    <PythonPlayer editorType="ace"/>
   </div>
 </template>
 

src/components/AceEditor.vue

@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <editor
+      v-model="code"
+      @init="editorInit"
+      :options="options"
+      :lang="language"
+      theme="monokai"
+      :height="height"
+      ref="aceEditor"
+    />
+  </div>
+</template>
+
+<script>
+import ace from "brace";
+export default {
+  name: "AceEditor",
+  components: {
+    editor: require("vue2-ace-editor"),
+  },
+  props: {
+    // 外部传入的内容，用于实现双向绑定
+    value: {
+      type: String,
+      default: "",
+    },
+    //是否只读
+    readOnly: {
+      type: [Boolean, String],
+      default: false,
+    },
+    // 外部传入的语法类型
+    language: {
+      type: String,
+      default: "python",
+    },
+    height: {
+      type: [Number, String],
+      default: 800,
+    },
+  },
+  data() {
+    return {
+      options: {
+        readOnly: this.readOnly,
+        enableBasicAutocompletion: true,
+        enableSnippets: true,
+        enableLiveAutocompletion: true,
+        // enableBasicAutocompletion: [{
+        //     getCompletions: (editor, session, pos, prefix, callback) => {
+        //     // note, won't fire if caret is at a word that does not have these letters
+        //     callback(null, [
+        //         {name: 'hello', value: 'hello', score: 1, meta: 'some comment'},
+        //         {name: 'world', value: 'world', score: 1, meta: 'some other comment'},
+        //         ]);
+        //         },
+        // }],
+      },
+      code: "",
+      editor: null,
+    };
+  },
+  mounted() {
+    this.setCodeContent(this.value || this.code);
+    console.log(this.editor.completers);
+    // 加入自定义语法提示
+  },
+  methods: {
+    editorInit(editor) {
+      require("brace/ext/language_tools");
+      require("brace/mode/python");
+      require("brace/theme/tomorrow_night_blue");
+      require("brace/theme/monokai");
+      require("brace/snippets/python");
+
+      // editor.on('change', this.change);
+      //   editor.commands.addCommand({
+      //     name: "save",
+      //     bindKey: { win: "Ctrl-S", mac: "Command-S" },
+      //     exec: (editor) => this.$emit("save-change", this.value, editor),
+      //   });
+      //   editor.commands.addCommand({
+      //     name: "formatter",
+      //     bindKey: { win: "Ctrl-Shift-F", mac: "Command-Shift-F" },
+      //     exec: () => this.$emit("formatter", this.editor),
+      //   });
+      let that = this;
+      let langTools = ace.acequire("ace/ext/language_tools");
+      var customCompleter = {
+        getCompletions: function (editor, session, pos, prefix, callback) {
+          that.setCompletions(editor, session, pos, prefix, callback);
+        },
+      };
+      langTools.addCompleter(customCompleter);
+
+      this.editor = editor;
+    },
+    setCompletions(editor, session, pos, prefix, callback) {
+      // ace自定义提示文字列表
+      let data = [
+        { caption: "test", meta: "解释：测试关键词", value: "testKeyWord" },
+      ];
+      if (prefix.length == 0) {
+        return callback(null, []);
+      } else {
+        return callback(null, data);
+      }
+    },
+    getCodeContent() {
+      return this.code;
+    },
+    setCodeContent(val) {
+      this.code = val;
+    },
+  },
+};
+</script>
+
+<style>
+</style>

src/components/PythonEditor.vue

@@ -46,12 +46,20 @@
         <a-layout-content>
           <a-form-item>
             <JCodeEditor
+              v-if="editorType == 'codemirror'"
               language="python"
               v-model="code"
               :fullScreen="true"
               placeholder="请输入代码"
               ref="codeEditor"
             />
+            <AceEditor
+              v-if="editorType == 'ace'"
+              language="python"
+              v-model="code"
+              :height="'calc(100vh - 74px)'"
+              ref="codeEditor"
+            />
           </a-form-item>
         </a-layout-content>
         <a-layout-sider :collapsible="false" :width="500" :theme="'light'">
@@ -69,6 +77,7 @@
 <script>
 import { saveAs } from "file-saver";
 import JCodeEditor from "./JCodeEditor";
+import AceEditor from "./AceEditor";
 import "../python/skulpt.min.js";
 import "../python/skulpt-stdlib.js";
 
@@ -80,6 +89,13 @@ export default {
   name: "PythonEditor",
   components: {
     JCodeEditor,
+    AceEditor,
+  },
+  props: {
+    editorType: {
+      type: String,
+      default: "ace", //ace codemirror
+    },
   },
   data() {
     return {
@@ -90,7 +106,7 @@ export default {
   },
   mounted() {},
   created() {
-    var that = this
+    var that = this;
     //载入网络项目
     var url = this.urlParam("url");
     if (url) {
@@ -99,22 +115,22 @@ export default {
       this.downloadFile("./static/defaultPython.py");
     }
     //兼容载入项目事件
-     window.document.addEventListener('loadPorject', function(e) {
-       console.log("load project:"+e.detail.projectName);
-       console.log(e.detail.url);
-       that.projectName = e.detail.projectName
-       that.downloadFile(e.detail.url)
+    window.document.addEventListener("loadPorject", function (e) {
+      console.log("load project:" + e.detail.projectName);
+      console.log(e.detail.url);
+      that.projectName = e.detail.projectName;
+      that.downloadFile(e.detail.url);
     });
   },
   methods: {
     runit() {
       var that = this;
       this.clear();
       Sk.pre = "output";
-      Sk.configure({ output: that.outf, read: that.builtinRead });
+      Sk.configure({ output: that.terminalOut, read: that.builtinRead });
       (Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = "mycanvas";
       var myPromise = Sk.misceval.asyncToPromise(function () {
-        return Sk.importMainWithBody("<stdin>", false, that.code, true);
+        return Sk.importMainWithBody("<stdin>", false, that.getCode(), true);
       });
       myPromise.then(
         function (mod) {
@@ -167,11 +183,15 @@ export default {
       this.code = code;
       this.$refs.codeEditor.setCodeContent(code);
     },
+    getCode() {
+      this.code = this.$refs.codeEditor.getCodeContent();
+      return this.code;
+    },
     clear() {
       document.getElementById("output").innerHTML = "";
       document.getElementById("mycanvas").innerHTML = "";
     },
-    outf(v) {
+    terminalOut(v) {
       var mypre = document.getElementById("output");
       mypre.innerHTML = mypre.innerHTML + v;
     },
@@ -200,7 +220,7 @@ export default {
 .CodeMirror {
   /* Set height, width, borders, and global font properties here */
   font-family: monospace;
-  height: calc(100vh - 64px) !important;
+  height: calc(100vh - 74px) !important;
   color: black;
   direction: ltr;
 }

src/components/PythonPlayer.vue

@@ -10,14 +10,22 @@
     <div id="mycanvas"></div>
     <!-- 代码输出 -->
     <pre id="output">{{ out }}</pre>
-
     <a-form-item>
       <JCodeEditor
+        v-if="editorType == 'codemirror'"
+        language="python"
+        v-model="code"
+        :fullScreen="true"
+        readOnly="true"
+        placeholder="请输入代码"
+        ref="codeEditor"
+      />
+      <AceEditor
+        v-if="editorType == 'ace'"
         language="python"
         v-model="code"
-        :readOnly="'nocursor'"
-        :autoHeight="false"
-        :height="'20rem'"
+        readOnly="true"
+        :height="500"
         ref="codeEditor"
       />
     </a-form-item>
@@ -27,6 +35,7 @@
 <script>
 import { saveAs } from "file-saver";
 import JCodeEditor from "./JCodeEditor";
+import AceEditor from "./AceEditor";
 import "../python/skulpt.min.js";
 import "../python/skulpt-stdlib.js";
 
@@ -38,6 +47,13 @@ export default {
   name: "PythonEditor",
   components: {
     JCodeEditor,
+    AceEditor,
+  },
+  props: {
+    editorType: {
+      type: String,
+      default: "ace", //ace codemirror
+    },
   },
   data() {
     return {
@@ -51,9 +67,7 @@ export default {
       this.downloadFile(url);
     }
   },
-  created() {
-    
-  },
+  created() {},
   methods: {
     runit() {
       var that = this;
@@ -161,14 +175,14 @@ export default {
 }
 .control {
   margin: 10px;
-  button{
+  button {
     margin: 10px 0;
   }
 }
-.ant-layout-header{
+.ant-layout-header {
   background: #dfefff;
 }
-.ant-layout-sider{
+.ant-layout-sider {
   padding: 10px;
 }
 </style>

yarn.lock

@@ -1114,6 +1114,11 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
+brace@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/brace/-/brace-0.11.1.tgz#4896fcc9d544eef45f4bb7660db320d3b379fe58"
+  integrity sha1-SJb8ydVE7vRfS7dmDbMg07N5/lg=
+
 braces@^2.3.1, braces@^2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
@@ -7099,6 +7104,13 @@ vue-template-es2015-compiler@^1.6.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
+vue2-ace-editor@^0.0.15:
+  version "0.0.15"
+  resolved "https://registry.yarnpkg.com/vue2-ace-editor/-/vue2-ace-editor-0.0.15.tgz#569b208e54ae771ae1edd3b8902ac42f0edc74e3"
+  integrity sha512-e3TR9OGXc71cGpvYcW068lNpRcFt3+OONCC81oxHL/0vwl/V3OgqnNMw2/RRolgQkO/CA5AjqVHWmANWKOtNnQ==
+  dependencies:
+    brace "^0.11.0"
+
 vue@^2.5.2:
   version "2.6.12"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"