как использовать редактор monaco без node.js - PullRequest
Новая
       70

как использовать редактор monaco без node.js

1 голос
/ 30 мая 2020

Мне нужно интегрировать monaco-editor на веб-страницу с чисто клиентским решением и без node.js.

Я нашел хороший ответ от @SimperT Как реализовать monaco- редактор на веб-странице без nodejs и электронного , но его репозиторий слишком устарел (js - дикий мир), и у меня есть дополнительное ограничение, что файлы могут обслуживаться только локально (без cdn, это для intr anet, без внешнего доступа).

Итак, это немного сообщение в bottle, но если у кого-то есть подсказки или указания, как это сделать, я все слышу .. . (Если придумаю решение, выложу здесь)

1 Ответ

0 голосов
/ 30 мая 2020

Вопрос был немного неуклюжим. Тем не менее, мои ошибки могут быть полезны другим: проблема была в переменной require, которая не была правильно установлена. Вот обслуживаемая страница html (с cherrypy): 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>monaco editor</title>
    <link rel="stylesheet" data-name="vs/editor/editor.main" href="_static/js/ext/monaco-editor/min/vs/editor/editor.main.css">
</head>
<body style="background-color: rgb(140, 190, 190);">
    <h1>monaco editor</h1>
    <div id="monaco_editor" style="height:400px">
</div>

<script>var require = { paths: { 'vs': '_static/js/ext/monaco-editor/min/vs' } };</script>

<script src="_static/js/ext/monaco-editor/min/vs/loader.js"></script>
<script src="_static/js/ext/monaco-editor/min/vs/editor/editor.main.nls.js"></script>
<script src="_static/js/ext/monaco-editor/min/vs/editor/editor.main.js"></script>

<script>

var h_div = document.getElementById('monaco_editor');
var editor = monaco.editor.create(h_div, {
    value: [
        'function x() {',
        '\tconsole.log("Hello world!");',
        '}'
    ].join('\n'),
    language: 'javascript'
});

</script>
</body>
</html>

с пакетом, найденным здесь: https://microsoft.github.io/monaco-editor/ распаковано и правильно обслуживается статически.

...