react monacoeditor

React-Monacoeditor

Компонент редактора Monaco для React. Demo @uiwjs.github.io/React-Monacoeditor/

Установка

npm install @uiw/react-monacoeditor --save

С использованием

 import React from 'react' ;
import MonacoEditor from '@uiw/react-monacoeditor' ;

export default function Demo ( ) {
  return (
    < MonacoEditor
      language = "html"
      value = "<h1>I ♥ react-monacoeditor</h1>"
      height = "300px"
      options = { {
        theme : 'vs-dark' ,
      } }
    />
  ) ;
} 

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

 import React from 'react' ;
import { render } from 'react-dom' ;
import MonacoEditor from '@uiw/react-monacoeditor' ;

const code = `import React, { PureComponent } from 'react';
import MonacoEditor from '@uiw/react-monacoeditor';

export default class App extends PureComponent {
  render() {
    return (
      <MonacoEditor
        language="html"
        value="<h1>I ♥ react-codemirror2</h1>"
        options={{
          selectOnLineNumbers: true,
          roundedSelection: false,
          cursorStyle: 'line',
          automaticLayout: false,
          theme: 'vs-dark',
        }}
      />
    );
  }
}
` ;

class App extends React . Component {
  constructor ( props ) {
    super ( props ) ;
    this . state = {
      code : '// type your code...' ,
    }
  }
  editorDidMount ( editor , monaco ) {
    console . log ( 'editorDidMount' , editor , monaco ) ;
    editor . focus ( ) ;
  }
  onChange ( newValue , e ) {
    console . log ( 'onChange' , newValue , e ) ;
  }
  render ( ) {
    const options = {
      selectOnLineNumbers : true ,
      roundedSelection : false ,
      readOnly : false ,
      cursorStyle : 'line' ,
      automaticLayout : false ,
      theme : 'vs-dark' ,
      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 : 'visible' ,
        // Render horizontal scrollbar.
        // Accepted values: 'auto', 'visible', 'hidden'.
        // Defaults to 'auto'
        horizontal : 'visible' ,
        verticalScrollbarSize : 17 ,
        horizontalScrollbarSize : 17 ,
        arrowSize : 30 ,
      } ,
    } ;
    return (
      < MonacoEditor
        height = "500px"
        language = "javascript"
        editorDidMount = { this . editorDidMount . bind ( this ) }
        onChange = { this . onChange . bind ( this ) }
        value = { code }
        options = { options }
      />
    ) ;
  }
}

render (
  < App /> ,
  document . getElementById ( 'root' )
) ;

Добавьте плагин Monaco Editor WebPack Loader monaco-editor-webpack-plugin в webpack.config.js :

 const MonacoWebpackPlugin = require ( 'monaco-editor-webpack-plugin' ) ;
module . exports = {
  plugins : [
    new MonacoWebpackPlugin ( )
  ]
} ; 

Характеристики

Если вы указываете свойство value , компонент ведет себя в контролируемом режиме. В противном случае он ведет себя в неконтролируемом режиме.

• width ширины редактора. По умолчанию до 100% .
• height редактора. По умолчанию до 100% .
• value значения модели создания автоматического в редакторе.
• defaultValue Первоначальное значение созданной авто, созданной в редакторе.
• language Начальный язык созданного авто, созданного в редакторе.
• theme Тема редактора vs , vs-dark , hc-black
• options см. В интерфейсе Monaco IeditorConstructionOptions.
• editorDidMount(editor, monaco) событие, испускаемое, когда редактор был установлен (аналогично componentDidMount of React).
• onChange(newValue, event) событие, испускаемое при изменении содержания текущей модели.
• autoComplete?: (model: monaco.editor.ITextModel, position: monaco.Position) => languages.CompletionItem[]; Пользователь предоставил поставщик функций расширения для автоматического полного. #47

События и методы

Обратитесь к интерфейсу Monaco Ieditor.

Связанный

• @UIW/React-Textarea-Code-Editor: простой редактор кода с синтаксисом.
• @UIW/React-Codemirror: Компонент Codemirror для React. @codemirror
• @UIW/React-Markdown-Editor: редактор Markdown с предварительным просмотром, реализованный с React.js и TypeScript.
• @UIW/React-MD-Editor: простой редактор Markdown с предварительным просмотром, реализованный с React.js и TypeScript.
• @UIW/React-Markdown-Preview: предварительный просмотр компонента React в веб-браузере.
• Nginx Редактор Nginx Language для Monaco Editor.

Участники

Как всегда, благодаря нашим удивительным участникам!

Сделано из-за контроля GitHub-Action.

Лицензия

Лицензирован по лицензии MIT.