项目:若依框架做的管理平台(vue3)
需求:使用monaco-editor编辑器做js、java、sql编辑,
实现方案:编辑器组件代码是移入其他开源项目代码,移入的是vue2的写法
组件部分原代码:
以上是移入组件部分原代码,解决报错主要也是在这里面添加代码解决
在项目中java和sql编辑没有问题,但是切换到js编辑时创建编辑器或输入就报错如下:
Error: Unexpected usage at EditorSimpleWorker.loadForeignModule
在网上找了很多大佬写的帖子
帖子1.
使用了一下无法生效
帖子2.
在找了一些说在vite.config.js中进行强制构建
按照上图使用
还是无法解决报错。
最终解决方案:
看到了一个帖子如下:
根据这个帖子对自己的代码进行了一下更改
如图将代码添加后终于没有报错,使用也正常也不影响其他类型编辑
附组件代码:
import * as monaco from "monaco-editor";
import createSqlCompleter from "./util/sql-completion";
import createJavascriptCompleter from "./util/javascript-completion";
import registerLanguage from "./util/log-language";
import { toRaw } from "vue";
import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
const global = {};
const getHints = model => {
let id = model.id.substring(6);
return (global[id] && global[id].hints) || [];
};
monaco.languages.registerCompletionItemProvider(
"sql",
createSqlCompleter(getHints)
);
monaco.languages.registerCompletionItemProvider(
"javascript",
createJavascriptCompleter(getHints)
);
// 解决 js编辑 报错提示EditorSimpleWorker.loadForeignModule问题
self.MonacoEnvironment={
getWorker(_, label){
if (label === "typescript" || label === "javascript") {
return new tsWorker();
}
return new editorWorker();
}
}
monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);
registerLanguage(monaco);
/**
* monaco options
* https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandaloneeditorconstructionoptions.html
*/
export default {
props: {
options: {
type: Object,
default() {
return {};
}
},
modelValue: [String, Object, Array],
// value: {
// type: String,
// required: false
// },
language: {
type: String
},
hints: {
type: Array,
default() {
return [];
}
}
},
name: "MonacoEditor",
data() {
return {
editorInstance: null,
defaultOptions: {
theme: "vs-dark",
fontSize: 14
}
};
},
watch: {
modelValue() {
if (this.modelValue !== toRaw(this.editorInstance).getValue()) {
toRaw(this.editorInstance).setValue(this.modelValue);
}
}
},
mounted() {
this.initEditor();
global[toRaw(this.editorInstance)._id] = this;
window.addEventListener("resize", this.layout);
// this.layout();
},
destroyed() {
toRaw(this.editorInstance).dispose();
global[toRaw(this.editorInstance)._id] = null;
window.removeEventListener("resize", this.layout);
},
methods: {
layout() {
toRaw(this.editorInstance).layout();
},
undo() {
toRaw(this.editorInstance).trigger("anyString", "undo");
this.onValueChange();
},
redo() {
toRaw(this.editorInstance).trigger("anyString", "redo");
this.onValueChange();
},
getOptions() {
let props = { value: this.modelValue };
this.language !== undefined && (props.language = this.language);
let options = Object.assign({}, this.defaultOptions, this.options, props);
return options;
},
onValueChange() {
// this.$emit("input", toRaw(toRaw(this.editorInstance)).getValue() );
// this.$emit("change", toRaw(toRaw(this.editorInstance)).getValue() );
this.$emit("update:modelValue", toRaw(this.editorInstance).getValue())
},
initEditor() {
this.MonacoEnvironment = {
getWorkerUrl: function () {
return "./editor.worker.bundle.js";
}
};
this.editorInstance = monaco.editor.create(
this.$refs.editor,
this.getOptions()
);
toRaw(this.editorInstance).onContextMenu(e => {
this.$emit("contextmenu", e);
});
toRaw(this.editorInstance).onDidChangeModelContent(() => {
this.onValueChange();
});
toRaw(this.editorInstance).addCommand(
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S,
() => {
this.$emit("save", toRaw(this.editorInstance).getValue());
}
);
}
}
};
.main :deep(.view-lines *) {
font-family: Consolas, "Courier New", monospace !important;
}
找了很多帖子都无法解决报错问题,最后借鉴一些大佬的帖子结合自己的改一下最后解决报错问题,怕后面再次遇到忘记,所以特此记录一下,如有更简便的方法还请多多指教。
相关阅读
发表评论