使用ace作为脚本编辑器

zhangzengfei

2021-11-19 af1f5e1d049f669b3295e8f357c1be4f6a811b1c

使用ace作为脚本编辑器

 package.json

@@ -74,6 +74,7 @@
    "stylelint-config-recess-order": "^2.5.0",
    "svg-sprite-loader": "^6.0.9",
    "vue-template-compiler": "^2.6.14",
    "vue2-ace-editor": "^0.0.15",
    "webpackbar": "^4.0.0"
  },
  "engines": {

 src/views/project/components/ProjectEdit.vue

@@ -24,8 +24,7 @@
              autocomplete="off"
              show-password
            >
              ></el-input
            >
            </el-input>
          </el-form-item>
          <el-form-item label="项目描述" prop="desc">
            <el-input v-model="form.desc"></el-input>
@@ -53,10 +52,28 @@
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="编译脚本" name="build">
        <textarea v-model="form.buildScript" cols="60" rows="10"></textarea>
        <!-- <textarea v-model="form.buildScript" cols="60" rows="10"></textarea> -->
        <code-editor
          v-if="activeName == 'build'"
          v-model="form.buildScript"
          lang="sh"
          theme="chrome"
          width="500"
          height="100"
          @init="editorInit"
        ></code-editor>
      </el-tab-pane>
      <el-tab-pane label="打包脚本" name="pack">
        <textarea v-model="form.packScript" cols="60" rows="10"></textarea>
        <!-- <textarea v-model="form.packScript" cols="60" rows="10"></textarea> -->
        <code-editor
          v-if="activeName == 'pack'"
          v-model="form.packScript"
          lang="sh"
          theme="chrome"
          width="500"
          height="100"
          @init="editorInit"
        ></code-editor>
      </el-tab-pane>
    </el-tabs>

@@ -69,15 +86,20 @@

<script>
import { doEdit } from "@/api/project";
import CodeEditor from "vue2-ace-editor";

export default {
  name: "ProjectEdit",
  components: {
    CodeEditor,
  },
  data() {
    return {
      activeName: "base",
      form: {
        title: "",
        author: "",
        packScript:
          "#!/bin/sh\n#打包开始会在项目下创建integrate-build的临时文件夹\n#打包脚本执行路径为项目下的integrate-build文件夹内\n#需复制上级目录的编译完成的目标文件到当前位置\n",
        buildScript: "#!/bin/sh\n",
      },
      rules: {
        title: [{ required: true, trigger: "blur", message: "请输入标题" }],
@@ -88,9 +110,10 @@
      edit: false,
    };
  },
  created() {},
  mounted() {},
  methods: {
    showEdit(row) {
      this.activeName = "base";
      if (!row) {
        this.title = "添加";
        this.edit = false;
@@ -126,6 +149,11 @@
    handleClick(tab, event) {
      // console.log(tab, event)
    },
    editorInit() {
      require("brace/ext/language_tools"); //language extension prerequsite...
      require("brace/mode/sh");
      require("brace/theme/chrome");
    },
  },
};
</script>

 src/views/project/index.vue

@@ -81,7 +81,10 @@
            </el-table-column>
            <el-table-column width="300">
              <template #default="scope">
                <el-button size="small" @click="handlePublish(scope.row)"
                <el-button
                  v-show="props.row.type == 'os'"
                  size="small"
                  @click="handlePublish(scope.row)"
                  >发布</el-button
                >
                <el-button size="small" @click="handleDownload(scope.row)"