评分规则详情增加高亮效果

package.json

@@ -10,6 +10,8 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@wangeditor/editor": "^5.1.14",
+    "@wangeditor/editor-for-vue": "^1.0.2",
     "axios": "^0.19.0",
     "bootstrap": "^4.3.1",
     "core-js": "^2.6.5",
@@ -37,7 +39,6 @@
     "vue-resource": "^1.5.1",
     "vue-router": "^3.0.7",
     "vuex": "^3.1.1",
-    "wangeditor": "^4.6.3",
     "xlsx": "^0.16.9"
   },
   "devDependencies": {

src/views/sceneLibrary/components/editor.vue

@@ -0,0 +1,121 @@
+<template>
+    <div style="border: 1px solid #ccc">
+        <Toolbar
+            style="border-bottom: 1px solid #ccc"
+            :editor="editor"
+            :defaultConfig="toolbarConfig"
+            :mode="mode"
+        />
+        <Editor
+            style="height: 500px; overflow-y: hidden"
+            v-model="html"
+            :defaultConfig="editorConfig"
+            :mode="mode"
+            @onCreated="onCreated"
+        />
+    </div>
+</template>
+
+<script>
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import "@wangeditor/editor/dist/css/style.css"; // 引入 css
+
+export default {
+    name: "editor", // 富文本编辑器
+    components: { Editor, Toolbar },
+    data() {
+        return {
+            editor: null,
+            html: "",
+            toolbarConfig: {
+                toolbarKeys: ["codeBlock", "codeSelectLang"],
+            },
+            editorConfig: {
+                placeholder: "",
+                MENU_CONF: {
+                    codeSelectLang: {
+                        codeLangs: [{ text: "Python", value: "python" }],
+                    },
+                },
+            },
+            mode: "simple", // or 'simple'
+        };
+    },
+    props: {
+        content: {
+            type: String,
+            default: "",
+        },
+    },
+    watch: {
+        content(newVal, oldVal) {
+            if (newVal && newVal != oldVal) {
+                this.html = `<pre><code>${newVal}</code></pre>`;
+            }
+        },
+    },
+    methods: {
+        onCreated(editor) {
+            this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
+            // this.html = `<pre><code>${this.content}</code></pre>`;
+        },
+    },
+    mounted() {
+        // if (this.content) {
+        //     this.html = `<pre><code>${this.content}</code></pre>`;
+        // }
+        // this.html = `<pre><code>${this.content}</code></pre>`;
+        // 模拟 ajax 请求，异步渲染编辑器
+        /* setTimeout(() => {
+            console.log(this.content);
+            console.log(this.content.length);
+            //     this.editor = Object.seal(editor)
+            //     const editor = this.editor
+            // if (editor == null) return
+            // if (editor == null) return
+            // if (editor == null) return
+            // editor.destroy() // 组件销毁时，及时销毁编辑器
+            this.html = `<pre><code>  
+        ${this.content}
+             
+                 </code></pre>`;
+            // return
+            // setTimeout(() => {
+
+            //     // console.log(this.editor.getHtml());
+            //     // console.log(this.editor.getText());
+            //     console.log(this.editor.getText().trim().length);
+            //     return
+            //     // console.log(this.editor.getMenuConfig('codeSelectLang').codeLangs);//{text: 'Python', value: 'python'}
+            //     console.log(this.editor.children);
+
+            //     let c = ""
+
+            //     this.editor.children.forEach(i => {
+            //         c += i.children[0].text + '\r\n'
+            //         // this.editor.insertBreak()
+
+            //     })
+
+            //     console.log(c);
+
+            //     // this.html = `   <pre><code>
+            //     //     ${c}
+            //     //    </code> </pre>  `
+
+            //     console.log(this.editor.getHtml());
+            //     console.log(this.editor.getText());
+            //     console.log(this.editor.getText().length);
+            // })
+        }, 1200); */
+    },
+    beforeDestroy() {
+        const editor = this.editor;
+        if (editor == null) return;
+        editor.destroy(); // 组件销毁时，及时销毁编辑器
+    },
+};
+</script>
+
+<style lang='less' scoped>
+</style>

src/views/sceneLibrary/gradingRule.vue

@@ -22,7 +22,7 @@
             </el-form-item>
 
             <el-form-item label="规则详情:" prop="ruleDetails">
-                <el-input
+                <!-- <el-input
                     v-autoTrim="{
                         obj: form,
                         key: 'ruleDetails',
@@ -33,7 +33,8 @@
                     :autosize="{ minRows: 8, maxRows: 8 }"
                     maxlength="10000"
                     show-word-limit
-                ></el-input>
+                ></el-input> -->
+                <editor :content="content" ref="editor"></editor>
             </el-form-item>
 
             <div class="btns">
@@ -59,11 +60,11 @@
 </template>
 
 <script>
-//import  from '';
+import editor from "./components/editor";
 
 export default {
     name: "gradingRule", // 评分规则
-    components: {},
+    components: { editor },
     data() {
         return {
             share: "-1", //控制显示按钮
@@ -74,6 +75,7 @@ export default {
                 ruleDescription: "",
                 ruleDetails: "",
             },
+            content: "",
             rules: {
                 ruleName: [
                     { required: true, message: "请输入", trigger: "blur" },
@@ -92,9 +94,17 @@ export default {
 
     methods: {
         save(isAdd) {
+            let ruleDetails = this.$refs.editor.editor.getText().trim();
+            this.form.ruleDetails = ruleDetails;
+
             // 调用save时，应写成save()，给不给参数均可，不写小括号的话，isAdd会是事件源，则为true
             this.$refs.form.validate((valid) => {
                 if (valid) {
+                    if (ruleDetails && ruleDetails.length > 10000) {
+                        this.$message.error("规则详情长度不得超过10000");
+                        return;
+                    }
+
                     if (isAdd || !this.$route.query.rulesId) {
                         // 另存为或新增页面
                         this.form.rulesId = "";
@@ -142,6 +152,7 @@ export default {
                 }).then((res) => {
                     if (res.code == 200 && res.info) {
                         this.form = res.info;
+                        this.content = res.info.ruleDetails;
                     } else {
                         this.$message.error(res.message || "获取信息失败");
                     }