I’ve recently tried several editors embedded in the project, Monaco, json-Editor, and this Codemirror. Why do I use it? It has to be because of project requirements.

Memorial successfully embedded, here to make a small record.

The content used is relatively basic. For more options, please refer to the introduction on the official website (😀😀😀😀😀.

Codemirror: Code editor, introduced for json editing

Download the dependent

// This is the body
npm install --save codemirror

// Then this thing is used to process JSON
npm install --save jsonlint

// Finally, this is the thing to develop dependencies for easy introduction to JsonLint
npm install --save-dev script-loader
Copy the code

Considering that it might be used elsewhere, encapsulate it roughly

<template>
    <div class="json-editor">
        <textarea ref="textarea" />
    </div>
</template>

<script>
import CodeMirror from "codemirror";
import "codemirror/lib/codemirror.css";
import "codemirror/mode/javascript/javascript"; // Code highlighting must be introduced

// Code error checking
// eslint-disable-next-line import/no-webpack-loader-syntax
require("script-loader! jsonlint");
import "codemirror/addon/lint/lint.css";
import "codemirror/addon/lint/lint";
import "codemirror/addon/lint/json-lint";

// Theme style (I used pure white to look comfortable)
import "codemirror/theme/rubyblue.css";
// The parentheses show a match
import "codemirror/addon/edit/matchbrackets";
import "codemirror/addon/selection/active-line";
// Parentheses and quotes are edited and deleted in pairs
import "codemirror/addon/edit/closebrackets";
// Fold the code to use something
import "codemirror/addon/fold/foldgutter.css";
import "codemirror/addon/fold/foldgutter";
import "codemirror/addon/fold/xml-fold";
import "codemirror/addon/fold/foldcode";
import "codemirror/addon/fold/brace-fold";
import "codemirror/addon/fold/indent-fold.js";
import "codemirror/addon/fold/markdown-fold.js";
import "codemirror/addon/fold/comment-fold.js";

export default {
    name: "CodeMirror".components: {},
    props: {
        jsonCode: {
            type: String.default: "",},readonly: {
            type: Boolean.default: false,}},data() {
        return {
            jsonEditor: ""}; },watch: {
        jsonCode(newVal) {
            const editorValue = this.jsonEditor.getValue();
            if(newVal ! == editorValue) {this.jsonEditor.setValue(
                    // This is json formatting
                    JSON.stringify(JSON.parse(this.jsonCode), null.2));setTimeout(() = > {
                    this.jsonEditor.refresh();
                }, 1); }},immediate: true.deep: true,},mounted() {
        this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
            mode: "application/json".theme: "base16-light".// Theme style
            lint: true.tabSize: 2.smartIndent: true.// Whether to indent intelligently
            styleActiveLine: true.// Highlight the current line
            lineNumbers: true.// Display the line number
            gutters: [
                "CodeMirror-linenumbers"."CodeMirror-foldgutter"."CodeMirror-lint-markers",].lineWrapping: true.// Wrap the line
            matchBrackets: true.// Parentheses match display
            autoCloseBrackets: true.// Input is paired with backspace
            readOnly: this.readonly, / / read-only
            foldGutter: true});// This is json formatting
        this.jsonEditor.setValue(JSON.stringify(JSON.parse(this.jsonCode)));
        this.jsonEditor.on("change".cm= > {
            this.$emit("change", cm.getValue());
        });
    },
    methods: {
        // This is for refreshing the editor
        refresh() {
            /* * refresh: Fires when the editor is refreshed or resized. * Mostly useful to invalidate cached values that depend on the editor or character size. */
            this.jsonEditor && this.jsonEditor.refresh(); ,}}};</script>

<style>
.json-editor {
    height: 100%;
    position: relative;
}
/* Highly adaptive */
.json-editor .CodeMirror {
    height: auto;
}
.json-editor .CodeMirror-scroll {
    height: auto;
    overflow-y: hidden;
    overflow-x: auto;
}

.CodeMirror-foldgutter-folded.CodeMirror-guttermarker-subtle {
    color: black ! important;
    font-size: 14px;
}
.CodeMirror-foldgutter-open:after {
    color: black ! important;
    font-size: 14px;
}
.json-editor .cm-string {
    color: coral ! important;
}
</style>

Copy the code

Finally, use it in the page

<template>
    <div>
        <el-form :model="form" label-width="120px">
            <el-form-item label="New Version:">
                <el-input size="mini" v-model="form.version" readonly />
            </el-form-item>
            <el-form-item label="Json:">
                <div class="code-mirror-box">
                    <code-mirror
                        ref="jsonEditor"
                        :json-code="form.jsonCode"
                        :readonly="readonly"
                        @change="handleJsonChange"
                    />
                </div>
            </el-form-item>
            <el-form-item>
                <el-button> Cancle </el-button>
                <el-button> Submit </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import CodeMirror from ".. /.. /component/json_com/codemirror.vue";
export default {
    components: {
        CodeMirror,
    },
    props: {},
    data() {
        return {
            form: {
                jsonCode: "{}".version: null,},readonly: false}; },created(){... },mounted() {
        / / refresh jsonEditor
        this.$nextTick(() = > {
            this.$refs.jsonEditor.refresh();
        });
    },
    methods: {
        handleJsonChange(val) {
            if (this.jsonCode ! == val) {this.jsonCode = val; }},getData(_id) {
            this.apiGet("...", {
                _id,
            }).then(res= > {
                if (res.code === 0) {
                    this.form.version = res.body.config.version;
                    this.form.jsonCode = JSON.stringify(res.body.config);
                } else {
                    console.error(res.message, "version config detail data");
                    this.$message.error(res.message); }}); },submit(){... ,}}};</script>

<style scoped>
.code-mirror-box {
    height: 580px;
    overflow-y: scroll;
    overflow-x: auto;
}
</style>

Copy the code

Honeydew bug

1. One problem encountered during use is the rendering of editor data, which seems to be lazy loading. Then, the data at the bottom will fail to be loaded, as shown in the figure

I don’t really need to know why this thing is doing this, so my solution is to wrap this part of the page in a div, and then set the height of the div so that the scroll bar doesn’t show up, and that solves the problem.

If you have encountered the same problem, and successfully solve, also hope to point out the younger brother, thank you!!