我们可以将 html 内容传递给摩纳哥编辑器吗？
[英]Can we pass html content to monaco editor?
问题描述
We have a requirement to highlight parts of the content inside monaco editor, can anyone give some direction on this?
我们需要在 monaco editor 中突出显示部分内容，有人可以就此提供一些指导吗？
I want to parse monaco code content and change part of it into html, or use to underline it, but it seemed monaco only treat that as pure text.我想解析 monaco 代码内容并将它的一部分更改为 html，或者用来给它加下划线，但似乎 monaco 只将其视为纯文本。
Is this doable or not doable at all?这是可行的还是根本不可行的？
1 个解决方案
解决方案1
1 2021-06-27 16:40:52
Maybe these fiddle helps you?也许这些小提琴对你有帮助？
<!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>
解决方案2
0 2020-03-23 15:34:41
We have a requirement to highlight parts of the content inside monaco editor, can anyone give some direction on this?我们要求在monaco编辑器中突出显示部分内容，有人可以对此提供一些指导吗？
I want to parse monaco code content and change part of it into html, or use to underline it, but it seemed monaco only treat that as pure text.我想解析monaco代码的内容并将其一部分更改为html或使用下划线显示，但是monaco似乎只将其视为纯文本。
Is this doable or not doable at all?这是可行的还是根本不可行的？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.