我们可以将 html 内容传递给摩纳哥编辑器吗?



我们需要在摩纳哥编辑器中突出显示部分内容,任何人都可以对此给出一些指导吗?

我想解析摩纳哥代码内容并将其部分更改为 html,或者用于下划线,但摩纳哥似乎只将其视为纯文本。

这是可行的还是根本不可行的?

也许这些小提琴对你有帮助?

<!doctype html>
<html>
<head>
<link rel="stylesheet" data-name="vs/editor/editor.main" href="https://unpkg.com/monaco-editor@0.25.2/min/vs/editor/editor.main.css">
<style>
html,
body {
overflow: hidden;
background-color: #1e1e1e;
}

.sql-container {
position: absolute;
top: 0;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#sql-editor {
left: 0;
width: 100%;
}
</style>
</head>
<body>
<template id="tmp">
<style>
#test1 {
background-color: blue;
}
#test2 {
background-color: red;
}
#test3 {
background-color: green;
}
</style>
<div id="test1">asdasdasd</div>
<div id="test2">sdfsdf,</div>
<div id="test3">nm,bm,nb</div>
<script>
let a = function(){
let b = 1;
let c = 2;
}
</script>
</template>
<div id="sql-editor" class="sql-container"></div>
<script>
var require = {
paths: {
'vs': 'https://unpkg.com/monaco-editor@0.25.2/min/vs'
}
};
</script>
<script src="https://unpkg.com/monaco-editor@0.25.2/min/vs/loader.js"></script>
<script src="https://unpkg.com/monaco-editor@0.25.2/min/vs/editor/editor.main.nls.js"></script>
<script src="https://unpkg.com/monaco-editor@0.25.2/min/vs/editor/editor.main.js"></script>
<script src="https://unpkg.com/monaco-editor@0.25.2/min/vs/base/worker/workerMain.js"></script>
<script>
var createEditor = function(language, elementId) {
var h_div = document.getElementById(elementId);
return monaco.editor.create(h_div, {
value: [
''
].join('n'),
language: language,
theme: 'vs-dark',
lineNumbers: "on",
roundedSelection: false,
scrollBeyondLastLine: false,
ariaLabel: "online code editor",
accessibilityHelpUrl: "Nothing yet...",
readOnly: false,
scrollBeyondLastLine: false,
minimap: {
enabled: false
},
scrollbar: {
// Subtle shadows to the left & top. Defaults to true.
useShadows: false,
// Render vertical arrows. Defaults to false.
verticalHasArrows: true,
// Render horizontal arrows. Defaults to false.
horizontalHasArrows: true,
// Render vertical scrollbar.
// Accepted values: 'auto', 'visible', 'hidden'.
// Defaults to 'auto'
vertical: 'hidden',
// Render horizontal scrollbar.
// Accepted values: 'auto', 'visible', 'hidden'.
// Defaults to 'auto'
horizontal: 'auto',
verticalScrollbarSize: 17,
horizontalScrollbarSize: 17,
arrowSize: 30
}
});
}
var editor = createEditor('sql', 'sql-editor');
var setEditor = function(type, content) {
editor.setValue(content);
editor.render();
monaco.editor.setModelLanguage(editor.getModel(), type);
}
let htmlContent = document.getElementById('tmp').innerHTML;
setEditor('html', htmlContent);
</script>
</body>
</html>

最新更新