BlazorMonaco

Blazormonaco

Blazor Component для Microsoft Monaco Editor, который поддерживает Visual Studio Code.

Большая часть основного набора функций Monaco Editor поддерживается с некоторыми менее часто используемыми функциями, которые в настоящее время отсутствуют. Любые вклад, комментарии или предложения очень приветствуются. Пожалуйста, не стесняйтесь обращаться ко мне по адресу x.com/serdarciplak или через Github.

Текущая версия Blazormonaco:

• Использует Monaco Editor v0.52.2
• Поддержка netstandard2.0 , net5.0 , net6.0 , net7.0 , net8.0 и net9.0

Демо

Здесь вы можете увидеть рабочее приложение Webassembly.

Установка

• Добавьте пакет Nuget в свой Blazor Project.

   dotnet add package BlazorMonaco
  // or
  Install-Package BlazorMonaco
  

• Добавьте теги сценария ниже к концу тега HTML Body. Обратите внимание, что они должны быть размещены перед тегом сценария Blazor ( blazor.webassembly.js , blazor.server.js или blazor.web.js ).

   < script src =" _content/BlazorMonaco/jsInterop.js " > </ script >
  < script src =" _content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js " > </ script >
  < script src =" _content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js " > </ script >

• Все находится в трех пространствах имен. Вы можете добавить следующее, используя директивы в ваш корень _Imports.razor файл или любое другое место, которое вам может понадобиться.

   @ using BlazorMonaco
  @ using BlazorMonaco . Editor
  @ using BlazorMonaco . Languages

• Добавьте в свой файл StandaloneCodeEditor или StandaloneDiffEditor компонент в файле бритвы, и вы увидите редактор, отображаемый с параметрами по умолчанию.

  < StandaloneCodeEditor />
  <!-- or -->
  < StandaloneDiffEditor />

ПРИМЕЧАНИЕ. Если у вас есть какие -либо проблемы, такие как редактор, который не виден или неправильно инициализируется, проверьте раздел по устранению неполадок ниже.

Использование

Предоставление начальных вариантов

Чтобы настроить первоначальные варианты вашего редактора, установите параметр ConstructionOptions и предоставьте метод, который возвращает StandaloneEditorConstructionOptions EditorConstructionOptions.

< StandaloneCodeEditor Id = " my-code-editor " ConstructionOptions = " EditorConstructionOptions " />

@code {
    private StandaloneEditorConstructionOptions EditorConstructionOptions ( StandaloneCodeEditor editor )
    {
        return new StandaloneEditorConstructionOptions
        {
            AutomaticLayout = true ,
            Language = " javascript " ,
            Value = " function xyz() { n " +
                    "   console.log( " Hello world! " ); n " +
                    " } "
        };
    }
}

Слушание событий редактора

Вы можете подписаться на события редактора (например, OnDidKeyUp или OnDidPaste ) через параметры события редактора.

< StandaloneCodeEditor Id = " my-code-editor " OnDidChangeCursorPosition = " EditorDidChangeCursorPosition " />

@code {
    private void EditorDidChangeCursorPosition ( CursorPositionChangedEvent eventArgs )
    {
        Console . WriteLine ( " EditorDidChangeCursorPosition " );
    }
}

Доступ к внутренним редакторам и событиям редактора DIFF

StandaloneDiffEditor предоставляет два свойства, названные OriginalEditor и ModifiedEditor для доступа коэффициента внутреннего редактора. Вы можете использовать их, как любой другой экземпляр StandaloneCodeEditor .

Вы можете зарегистрироваться на событиях внутренних редакторов, используя параметры вспомогательного события основного экземпляра StandaloneDiffEditor .

< StandaloneDiffEditor @ref = " _diffEditor " Id = " my-diff-editor " OnKeyUpOriginal = " OnKeyUpOriginal " OnKeyUpModified = " OnKeyUpModified " />

@code {
    private StandaloneDiffEditor _diffEditor ;

    private void OnKeyUpOriginal ( KeyboardEvent keyboardEvent )
    {
        StandaloneCodeEditor originalEditor = _diffEditor . OriginalEditor ;
        Console . WriteLine ( " OnKeyUpOriginal : " + keyboardEvent . Code );
    }

    private void OnKeyUpModified ( KeyboardEvent keyboardEvent )
    {
        StandaloneCodeEditor modifiedEditor = _diffEditor . ModifiedEditor ;
        Console . WriteLine ( " OnKeyUpModified : " + keyboardEvent . Code );
    }
}

Стиль CSS

Есть 3 селектора CSS, которые вы можете использовать для настройки стилей CSS для ваших редакторов.

• Все экземпляры редактора содержатся в элементе div , который имеет CSS-класс monaco-editor-container .
• Значение Id , которое вы установили для экземпляра вашего редактора, также устанавливается в качестве идентификатора его элемента div .
• Если вы установите свойство вашего редактора CssClass , это значение добавляется в атрибут класса элемента Div Container.

Это означает, что компонент бритвы ниже;

< StandaloneCodeEditor Id = " my-editor-id " CssClass = " my-editor-class " />

отображается с HTML ниже;

 < div id =" my-editor-id " class =" monaco-editor-container my-editor-class " >
    ...
</ div >

Таким образом, вы можете использовать селекторы CSS, как ниже, чтобы выбрать любой элемент в редакторе и настроить его стиль.

 # my-editor-id { /* applies to a specific editor instance */
    height : 100 px ;
}

. my-editor-class { /* applies to all editor instances with this class */
    height : 100 px ;
}

. monaco-editor-container { /* applies to all editor instances */
    height : 100 px ;
}

Глобальные методы

Редактор Monaco JavaScript определяет некоторые методы в глобальном объеме. Поскольку C# не позволяет глобальным методам, Blazormonaco группирует эти методы в двух статических классах под названием BlazorMonaco.Editor.Global и BlazorMonaco.Language.Global . Если вам нужно использовать метод Monaco Editor в глобальном объеме, проверьте, где в библиотеке JavaScript этот метод, и найдите его в соответствующем Global классе.

Например, вы можете использовать метод SetTheme , как ниже.

 await BlazorMonaco . Editor . Global . SetTheme ( jsRuntime , "my-custom-theme" ) ;

Использование пользовательской установки редактора Monaco

Если вы внесли изменения в Monaco Editor JS Library и вам необходимо использовать эту отредактированную версию вместо немодифицированной версии, встроенной в Blazormonaco, вы можете изменить теги сценария, как ниже.

 < script src =" _content/BlazorMonaco/jsInterop.js " > </ script >
< script > var require = { paths : { vs : 'my-path/monaco-editor/min/vs' } } ; </ script >
< script src =" my-path/monaco-editor/min/vs/loader.js " > </ script >
< script src =" my-path/monaco-editor/min/vs/editor/editor.main.js " > </ script > 

Поиск неисправностей

• Q: Я добавил StandaloneCodeEditor как описано выше, но он не загружается.

  О: Согласно, что редактор на самом деле загружается, но вы не можете увидеть его, потому что он имеет высоту 0. Как можно установить высоту элемента DOM, зависит от его родительских элементов и их стиля. Таким образом, Blazormonaco не может внутренне управлять высотой экземпляров редактора. Если вы не устанавливаете высоту редактора, он может быть невидимым, поскольку он имеет высоту 0px . Пожалуйста, добавьте стиль CSS, чтобы установить высоту вашего редактора в соответствии с тем, где он размещен.

   # my-editor-id {
      height : 100 px ;
  }

• В: Редактор не инициализируется правильно в моем приложении Blazor.

  О: Чтобы иметь возможность работать с интерактивной библиотекой Monacoeditor JS, Blazormonaco требует интерактивного режима рендеринга. Если вы размещаете экземпляр редактора на страницу, которая использует статическую рендеринг на стороне сервера (статический SSR), экземпляр редактора не может инициализировать и работать.

  Вы можете установить интерактивный режим рендеринга по всему миру на уровне приложения,

   <!-- In your App.razor file -->
  < Routes @rendermode = " InteractiveServer " />

  Только для определенной страницы,

   <!-- In the razor file of your page that contains the editor -->
  @page " /editor-page "
  @rendermode InteractiveServer
  
  < StandaloneCodeEditor />

  или только для компонента, который завершает экземпляр редактора.

   <!-- In the razor file of your interactive wrapper component -->
  @rendermode InteractiveServer
  
  < StandaloneCodeEditor />

• В: Редактор работает нормально в первый раз, когда он отображается. Но он сломан (как будто его стиль CSS неверен), если пользователь переходит на другую страницу и возвращается на страницу редактора.

  A: Пожалуйста, проверьте, что страница, содержащая экземпляр редактора, не открыта с помощью Blazor Enhanced Navigation. Улучшенные навигационные динамические изменения, внесенные в DOM библиотекой Monacoeditor JS, и нарушает редактор. Вам необходимо отключить улучшенную навигацию для страниц, которые содержат редактор.

  Вы можете установить атрибут data-enhance-nav , что ваши ссылки на false ,

   < a href =" editor-page " data-enhance-nav =" false " > Editor Page </ a >

  Установите параметр forceLoad в ваших вызовах NavigateTo() в True,

   Navigation . NavigateTo ( "editor-page" , true ) ;

  Или используйте здесь Blazor Docs, чтобы увидеть все методы отключения расширенной навигации.

Документация

Поскольку Blazormonaco - это всего лишь мост между JavaScript и Blazor, вы можете использовать документацию Monaco Editor.

Миграционный гид

После крупного обновления версии (например, от v2.x до v3.x ) вам может потребоваться внести некоторые изменения в вашу интеграцию. Пожалуйста, смотрите файл Migrate.md для получения подробной информации.

Изменение

Вы можете просмотреть историю и изменения в файле Changelog.md.

Лицензия

MIT, см. Файл лицензии для получения подробной информации.