blocks|key|211966|text|您可以使用一个overlay元素并在HTML中定义占位符内容，并提供将执行操作的链接(例如，更改编辑器主题、更改语言等)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|211967|占位符的HTML应该如下所示：|211968|<div+class="monaco-placeholder">
++++This+is+a+test+placeholder+that+will+disappear+when+you+click+into+the+editor.
++++Click+
++++<a+href="#"+class="change-language">here</a>
++++first+if+you+want+to+change+the+editor+language+from+HTML+to+JavaScript,+or+click
++++<a+href="#"+class="change-theme">here</a>
++++if+you+want+to+change+the+editor+theme
</div>|code-block|syntax|javascript|211969|与以下CSS一起：|211970|.monaco-placeholder+{
++color:+darkturquoise;
++display:+none;
++position:+absolute;
++top:+0;
++left:+65px;
++pointer-events:+all;
++z-index:+1;
++opacity:+0.7;
}|211971|然后，您可以将其连接到JavaScript中，如下所示：|211972|函数来隐藏和显示占位符：|211973|function+showPlaceholder()+{
++document.querySelector(".monaco-placeholder").style.display+=+"initial";
}

function+hidePlaceholder()+{
++document.querySelector(".monaco-placeholder").style.display+=+"none";
}|211974|创建编辑器并显示占位符：|211975|const+instance+=+monaco.editor.create(document.getElementById('container'),+{
++++value:+"",
++++language:+'html'
});

showPlaceholder();|211976|为要在单击时执行操作的占位符中的任何链接添加事件处理程序：|211977|document.getElementsByClassName('change-language')[0].addEventListener('click',+(e)+=>+{
++++e.stopPropagation();
++++var+model+=+instance.getModel();
++++monaco.editor.setModelLanguage(model,+"javascript")
++++console.log('language+successfully+changed+to+JavaScript')
});


document.getElementsByClassName('change-theme')[0].addEventListener('click',+(e)+=>+{
++++e.stopPropagation();
++++monaco.editor.setTheme('vs-dark')
++++console.log('theme+successfully+changed')
});|211978|事件处理程序来清除占位符，并在用户单击除链接之外的占位符的任何部分时将焦点转移到编辑器中：|211979|document.getElementsByClassName('monaco-placeholder')[0].addEventListener('click',+()+=>+{
++++hidePlaceholder();
++++instance.focus();
});|211980|如果您将下面的HTML、CSS和JavaScript复制到摩纳哥游乐场中，您将看到这样的效果：|offset|length|211981|211982|<div+id="container"+style="height:+100%25"></div>
<div+class="monaco-placeholder">
++++This+is+a+test+placeholder+that+will+disappear+when+you+click+into+the+editor.
++++Click+
++++<a+href="#"++class="change-language">here</a>
++++first+if+you+want+to+change+the+editor+language+from+HTML+to+JavaScript,+or+click
++++<a+href="#"++class="change-theme">here</a>
++++if+you+want+to+change+the+editor+theme
</div>|211983|CSS|style|BOLD|211984|.monaco-placeholder+{
++color:+darkturquoise;
++display:+none;
++position:+absolute;
++top:+0;
++left:+65px;
++pointer-events:+all;
++z-index:+1;
++opacity:+0.7;
}|211985|JavaScript|211986|const+instance+=+monaco.editor.create(document.getElementById('container'),+{
++++value:+"",
++++language:+'html'
});

showPlaceholder();

function+showPlaceholder()+{
++document.querySelector(".monaco-placeholder").style.display+=+"initial";
}

function+hidePlaceholder()+{
++document.querySelector(".monaco-placeholder").style.display+=+"none";
}

document.getElementsByClassName('monaco-placeholder')[0].addEventListener('click',+()+=>+{
++++hidePlaceholder();
++++instance.focus();
});

document.getElementsByClassName('change-language')[0].addEventListener('click',+(e)+=>+{
++++e.stopPropagation();
++++var+model+=+instance.getModel();
++++monaco.editor.setModelLanguage(model,+"javascript")
++++console.log('language+successfully+changed+to+JavaScript')
});


document.getElementsByClassName('change-theme')[0].addEventListener('click',+(e)+=>+{
++++e.stopPropagation();
++++monaco.editor.setTheme('vs-dark')
++++console.log('theme+successfully+changed')
});|211987|entityMap|0|LINK|mutability|MUTABLE|url|https://microsoft.github.io/monaco-editor/playground.html^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|T|6|0|0|0|0|0|3|0|0|0|A|0|0^^$0|@$1|2|3|4|5|6|7|1T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1U|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1V|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1W|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|1X|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|20|8|@]|9|@]|A|$G|H]]|$1|S|3|T|5|6|7|21|8|@]|9|@]|A|$]]|$1|U|3|V|5|F|7|22|8|@]|9|@]|A|$G|H]]|$1|W|3|X|5|6|7|23|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|F|7|24|8|@]|9|@]|A|$G|H]]|$1|10|3|11|5|6|7|25|8|@]|9|@]|A|$]]|$1|12|3|13|5|F|7|26|8|@]|9|@]|A|$G|H]]|$1|14|3|15|5|6|7|27|8|@]|9|@$16|28|17|29|1|2A]]|A|$]]|$1|18|3|-4|5|6|7|2B|8|@]|9|@]|A|$]]|$1|19|3|1A|5|F|7|2C|8|@]|9|@]|A|$G|H]]|$1|1B|3|1C|5|6|7|2D|8|@$16|2E|17|2F|1D|1E]]|9|@]|A|$]]|$1|1F|3|1G|5|F|7|2G|8|@]|9|@]|A|$G|H]]|$1|1H|3|1I|5|6|7|2H|8|@$16|2I|17|2J|1D|1E]]|9|@]|A|$]]|$1|1J|3|1K|5|F|7|2K|8|@]|9|@]|A|$G|H]]|$1|1L|3|-4|5|6|7|2L|8|@]|9|@]|A|$]]]|1M|$1N|$5|1O|1P|1Q|A|$1R|1S]]]]

You can use an overlay element and define the placeholder content in HTML, with links that will perform actions (e.g. change the editor theme, change the language etc).
The HTML for the placeholder would look something like this:
<pre><code>&lt;div class=&quot;monaco-placeholder&quot;&gt;
 This is a test placeholder that will disappear when you click into the editor.
 Click 
 &lt;a href=&quot;#&quot; class=&quot;change-language&quot;&gt;here&lt;/a&gt;
 first if you want to change the editor language from HTML to JavaScript, or click
 &lt;a href=&quot;#&quot; class=&quot;change-theme&quot;&gt;here&lt;/a&gt;
 if you want to change the editor theme
&lt;/div&gt;

</code></pre>
Along with the following CSS:
<pre><code>.monaco-placeholder {
 color: darkturquoise;
 display: none;
 position: absolute;
 top: 0;
 left: 65px;
 pointer-events: all;
 z-index: 1;
 opacity: 0.7;
}
</code></pre>
You can then wire this up in JavaScript as follows:
Functions to hide and show the placeholder:
<pre><code>function showPlaceholder() {
 document.querySelector(&quot;.monaco-placeholder&quot;).style.display = &quot;initial&quot;;
}

function hidePlaceholder() {
 document.querySelector(&quot;.monaco-placeholder&quot;).style.display = &quot;none&quot;;
}
</code></pre>
Create the editor and show the placeholder:
<pre><code>const instance = monaco.editor.create(document.getElementById('container'), {
 value: &quot;&quot;,
 language: 'html'
});

showPlaceholder();
</code></pre>
Add event handlers for any links in the placeholder that you want to perform actions when clicked:
<pre><code>document.getElementsByClassName('change-language')[0].addEventListener('click', (e) =&gt; {
 e.stopPropagation();
 var model = instance.getModel();
 monaco.editor.setModelLanguage(model, &quot;javascript&quot;)
 console.log('language successfully changed to JavaScript')
});


document.getElementsByClassName('change-theme')[0].addEventListener('click', (e) =&gt; {
 e.stopPropagation();
 monaco.editor.setTheme('vs-dark')
 console.log('theme successfully changed')
});
</code></pre>
Event handler to clear the placeholder and focus into the editor when the user clicks on any part of the placeholder apart from the links:
<pre><code>document.getElementsByClassName('monaco-placeholder')[0].addEventListener('click', () =&gt; {
 hidePlaceholder();
 instance.focus();
});
</code></pre>
If you copy the HTML, CSS and JavaScript below into the <a href="https://microsoft.github.io/monaco-editor/playground.html" rel="nofollow noreferrer">Monaco Playground</a>, you will see this working:
HTML
<pre><code>&lt;div id=&quot;container&quot; style=&quot;height: 100%&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;monaco-placeholder&quot;&gt;
 This is a test placeholder that will disappear when you click into the editor.
 Click 
 &lt;a href=&quot;#&quot; class=&quot;change-language&quot;&gt;here&lt;/a&gt;
 first if you want to change the editor language from HTML to JavaScript, or click
 &lt;a href=&quot;#&quot; class=&quot;change-theme&quot;&gt;here&lt;/a&gt;
 if you want to change the editor theme
&lt;/div&gt;

</code></pre>
CSS
<pre><code>.monaco-placeholder {
 color: darkturquoise;
 display: none;
 position: absolute;
 top: 0;
 left: 65px;
 pointer-events: all;
 z-index: 1;
 opacity: 0.7;
}
</code></pre>
JavaScript
<pre><code>const instance = monaco.editor.create(document.getElementById('container'), {
 value: &quot;&quot;,
 language: 'html'
});

showPlaceholder();

function showPlaceholder() {
 document.querySelector(&quot;.monaco-placeholder&quot;).style.display = &quot;initial&quot;;
}

function hidePlaceholder() {
 document.querySelector(&quot;.monaco-placeholder&quot;).style.display = &quot;none&quot;;
}

document.getElementsByClassName('monaco-placeholder')[0].addEventListener('click', () =&gt; {
 hidePlaceholder();
 instance.focus();
});

document.getElementsByClassName('change-language')[0].addEventListener('click', (e) =&gt; {
 e.stopPropagation();
 var model = instance.getModel();
 monaco.editor.setModelLanguage(model, &quot;javascript&quot;)
 console.log('language successfully changed to JavaScript')
});


document.getElementsByClassName('change-theme')[0].addEventListener('click', (e) =&gt; {
 e.stopPropagation();
 monaco.editor.setTheme('vs-dark')
 console.log('theme successfully changed')
});
</code></pre>

I'd like to add a hyperlink in a editor, like vscode does:
<a href="https://i.stack.imgur.com/fARQ7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fARQ7.png" alt="enter image description here" /></a>
I'd like to add this formatted document and when you click into it, some operation happens, open a file dialog, for example.
I have no code to show yet because I didn't find anything like that yet, only for regular text that goes like this:
<pre><code>const line = editor.getPosition();
if(!line) {
 throw new Error('line is null');
}
const range = new monaco.Range(line.lineNumber, 1, 
 line.lineNumber, 1);
const text = &quot;empty tab&quot;;
const op: monaco.editor.IIdentifiedSingleEditOperation = {
 range: range, 
 text: text, 
 forceMoveMarkers: true
};
editor.executeEdits('my-source', [op]);
</code></pre>
but I didn't see how add a format it.

How do I insert a link in the editor?

我想在编辑器中添加一个超链接，就像vscode那样：​​我想添加这个格式化的文档，当您单击它时，会发生一些操作，例如打开一个文件对话框。我还没有显示代码，因为我还没有找到类似的东西，只有这样的常规文本：const line = editor.getPosition();if(!line) {  throw new Er...

问如何在编辑器中插入链接？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在编辑器中插入链接？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在编辑器中插入链接？
EN