react monacoeditor
v3.6.0
موناكو محرر مكون للرد. 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' ,
} }
/>
) ;
} 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' )
) ; أضف موناكو محرر Webpack Loader Plugin 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-blackoptions إلى واجهة Monaco IeditorConstructionOptions.editorDidMount(editor, monaco) حدث ينبعث عندما تم تثبيت المحرر (على غرار componentDidMount من React).onChange(newValue, event) حدث ينبعث عندما يتغير محتوى النموذج الحالي.autoComplete?: (model: monaco.editor.ITextModel, position: monaco.Position) => languages.CompletionItem[]; قدم المستخدم مزود وظيفة التمديد لإكمال تلقائي. #47 الرجوع إلى واجهة موناكو ieditor.
كما هو الحال دائمًا ، بفضل مساهمينا المذهلين!
مصنوعة من github-action-contributors.
مرخصة بموجب ترخيص معهد ماساتشوستس للتكنولوجيا.
