chrome-plugin/js/CodeEditor.js

class CodeEditor {
    constructor() { }
    dataID = "";
    set dataType(value) {
        if(value == this._dataType) return;
        this._dataType = value;
        if (value == 0) {
            this.language = "html";
        } else if (value == 1 || value == 2) {
            this.language = "css";
        } else if (value == 3) {
            this.language = "javascript";
        } else if (value == 4) {
            this.language = "json";
        }
        if (this.editor) {
            let model = this.editor.getModel();
            monaco.editor.setModelLanguage(model, this.language);
        }
    }

    /**
     * 初始化编辑器
     * @param {*} container 创建编辑器的主容器，通常为DIV
     * @param {*} language 编辑器支持的语言，html,css,javascript三选一
     * @param {*} contextmenu 是否开启鼠标右键菜单，默认false
     * @param {*} minimap 是否开启缩略图，默认false
     * @param {*} btnItems 自定义按钮，格式为[{name: "自定义按钮", callback: function(){}}]
     * @param {*} showSupplementCodeList 是否显示补充代码列表，默认false
     */
    InitEditor(
        container,
        contextmenu = true,
        minimap = false,
        btnItems = [],
        showSupplementCodeList = false
    ) {
        let _this = this;
        this.container = container;
        this.showSupplementCodeList = showSupplementCodeList;
        if (!container) {
            throw new Error("codeEditor.InitEditor()必须传入container参数");
        }

        //初始化容器
        let html = ``;
        if (this.showSupplementCodeList) {
            html = `<div id="supplementCodeList" style="overflow: auto;height:calc(50% - 50px);"></div>
                    <div style="width:100%;height:50%;">
                        <div id="html_editor" style="height:100%;border: 1px solid #d4d4d4;"></div>
                    </div>`;
        } else {
            html = `<div style="width:100%;height:100%;">
                        <div id="html_editor" style="height:100%;border: 1px solid #d4d4d4;"></div>
                    </div>`;
        }

        this.container.innerHTML = html;
        btnItems.forEach((btnItem) => {
            let btn = document.createElement("button");
            btn.classList.add("code-btn");
            container.appendChild(btn);
            btn.innerText = btnItem.name;
            btn.onclick = function (e) {
                btnItem.callback(
                    e,
                    _this._dataType,
                    _this.dataID,
                    _this.editor.getValue(),
                    _this.oldData
                );
            };
        });

        //#region 初始化编辑器
        this.waitShowCode = "";
        let editorContainer = this.container.querySelector(`#html_editor`);
        require.config({ "vs/nls": { availableLanguages: { "*": "zh-cn" } } });
        require.config({
            paths: { vs: "../../lib/zlExpressEditor/monaco-editor/min/vs" },
        });
        require(["vs/editor/editor.main"], function () {
            _this.editor = monaco.editor.create(editorContainer, {
                language: _this.language ?? "html",
                value: "",
                // automaticLayout: true,
                minimap: {
                    enabled: minimap,
                },
                contextmenu: contextmenu,
            });

            let editorModel = _this.editor.getModel();
            editorModel.setValue(_this.waitShowCode);
            _this.editor.getAction("editor.action.formatDocument").run();
        });
    }

    /**
     * 设置编辑器代码
     * @param {*} code 代码
     */
    SetCode(code) {
        if (this.editor) {
            let editorModel = this.editor.getModel();
            editorModel.setValue(code ?? "");
            // this.editor.getAction("editor.action.formatDocument").run();
        } else {
            this.waitShowCode = code ?? "";
        }
    }

    /**获取代码 */
    GetCode() {
        return this.editor.getValue();
    }
    #decorationsIds = [];
    CreateHighlight({ startLine, startColumn, endLine, endColumn }) {
        // 创建装饰
        const decorations = [
            {
                range: new monaco.Range(startLine, startColumn, endLine, endColumn),
                options: {
                    isWholeLine: false,
                    className: "monaco-highlight",
                },
            },
        ];

        // 添加装饰并保存 ID
        let decorationsIds = this.editor.deltaDecorations([], decorations);
        this.#decorationsIds.push(...decorationsIds);

        // 确保装饰的范围滚动到视图中
        const rangeToReveal = new monaco.Range(startLine, startColumn, endLine, endColumn);
        this.editor.revealRangeInCenterIfOutsideViewport(rangeToReveal);

        // 返回取消装饰的回调函数
        return () => {
            this.#decorationsIds = this.#decorationsIds.filter(id => !decorationsIds.includes(id));
            this.editor.deltaDecorations(decorationsIds, []); // 取消装饰
        };
    }

    RemoveAllHighlight() {
        this.editor.deltaDecorations(this.#decorationsIds, []);
    }
}
window.CodeEditor = CodeEditor;