الصفحة الرئيسية>موارد بناء الموقع>موارد أخرى
تنزيل

أمثلة

لبناء الأمثلة محليًا ، قم بتشغيل: 

yarn
cd example
yarn
yarn start

ثم افتح http://localhost:8886 في متصفح.

تثبيت 

yarn add react-monaco-editor

استخدام مع webpack 

 import React from 'react' ;
import { createRoot } from "react-dom/client" ;
import MonacoEditor from 'react-monaco-editor' ;

class App extends React . Component {
  constructor ( props ) {
    super ( props ) ;
    this . state = {
      code : '// type your code...' ,
    }
  }
  editorDidMount ( editor , monaco ) {
    console . log ( 'editorDidMount' , editor ) ;
    editor . focus ( ) ;
  }
  onChange ( newValue , e ) {
    console . log ( 'onChange' , newValue , e ) ;
  }
  render ( ) {
    const code = this . state . code ;
    const options = {
      selectOnLineNumbers : true
    } ;
    return (
      < MonacoEditor
        width = "800"
        height = "600"
        language = "javascript"
        theme = "vs-dark"
        value = { code }
        options = { options }
        onChange = { :: this . onChange }
        editorDidMount = { :: this . editorDidMount }
      />
    ) ;
  }
}

const container = document . getElementById ( 'root' ) ;
const root = createRoot ( container ) ;
root . render ( < App /> ) ;

أضف موناكو WebPack Plugin monaco-editor-webpack-plugin إلى webpack.config.js : 

 const MonacoWebpackPlugin = require ( 'monaco-editor-webpack-plugin' ) ;
module . exports = {
  plugins : [
    new MonacoWebpackPlugin ( {
      // available options are documented at https://github.com/microsoft/monaco-editor/blob/main/webpack-plugin/README.md#options
      languages : [ 'json' ]
    } )
  ]
} ;

Sidenote: يستخدم محرر Monaco واردات CSS داخليًا ، لذلك إذا كنت تستخدم وحدات CSS في مشروعك - فمن المحتمل أن تحصل على تعارض افتراضيًا. لتجنب ذلك-منفصل عن حزمة CSS للتطبيق وحزمة Monaco-Editor: 

 // Specify separate paths
const path = require ( 'path' ) ;
const APP_DIR = path . resolve ( __dirname , './src' ) ;
const MONACO_DIR = path . resolve ( __dirname , './node_modules/monaco-editor' ) ;

{
  test : / .css$ / ,
  include : APP_DIR ,
  use : [ {
    loader : 'style-loader' ,
  } , {
    loader : 'css-loader' ,
    options : {
      modules : true ,
      namedExport : true ,
    } ,
  } ] ,
} , {
  test : / .css$ / ,
  include : MONACO_DIR ,
  use : [ 'style-loader' , 'css-loader' ] ,
}

ملكيات

جميع الخصائص أدناه اختيارية.

الأحداث والأساليب

الرجوع إلى واجهة موناكو ieditor.

واجهات موناكو متوفرة بالاستيراد 

 import { monaco } from 'react-monaco-editor' ;

سؤال وجواب

لا أحصل على بناء بناء الجملة / الإكمال التلقائي / التحقق من الصحة.

تأكد من استخدام المكون الإضافي لموناكو WebPack أو اتبع الإرشادات حول كيفية تحميل إصدار ESM من Monaco.

كيفية التفاعل مع مثيل monacoeditor

باستخدام المعلمة الأولى من editorDidMount ، أو استخدام ref (على سبيل المثال <MonacoEditor ref="monaco"> ) بعد إطلاق حدث editorDidMount .

ثم يمكنك استدعاء أساليب المثيل عبر this.refs.monaco.editor ، على سبيل المثال this.refs.monaco.editor.focus() لتركيز مثيل monacoeditor.

كيفية الحصول على قيمة المحرر

باستخدام this.refs.monaco.editor.getValue() أو عبر طريقة مثيل Model : 

 const model = this . refs . monaco . editor . getModel ( ) ;
const value = model . getValue ( ) ;

افعل شيئًا قبل تثبيت المحرر

على سبيل المثال ، قد ترغب في تكوين بعض مخططات JSON قبل تثبيت المحرر ، ثم يمكنك الذهاب مع editorWillMount(monaco) : 

 class App extends React . Component {
    editorWillMount ( monaco ) {
        monaco . languages . json . jsonDefaults . setDiagnosticsOptions ( {
            validate : true ,
            schemas : [ {
                uri : "http://myserver/foo-schema.json" ,
                fileMatch : [ '*' ] ,
                schema : {
                    type : "object" ,
                    properties : {
                        p1 : {
                            enum : [ "v1" , "v2" ]
                        } ,
                        p2 : {
                            $ref : "http://myserver/bar-schema.json"
                        }
                    }
                }
            } ]
        } ) ;
    }
    render ( ) {
        return (
          < MonacoEditor language = "json" editorWillMount = { this . editorWillMount } />
        ) ;
    }
}

استخدام موضوعات متعددة

Monaco يدعم فقط موضوع واحد.

كيفية استخدام محرر Diff 

 import React from 'react' ;
import { MonacoDiffEditor } from 'react-monaco-editor' ;

class App extends React . Component {
  render ( ) {
    const code1 = "// your original code..." ;
    const code2 = "// a different version..." ;
    const options = {
      //renderSideBySide: false
    } ;
    return (
      < MonacoDiffEditor
        width = "800"
        height = "600"
        language = "javascript"
        original = { code1 }
        value = { code2 }
        options = { options }
      />
    ) ;
  }
}

الاستخدام مع create-react-app

أسهل طريقة لاستخدام react-monaco-editor مع create-react-app هي استخدام المشروع المنصوص عليه في تطبيق React. لإعداده ، هناك حاجة إلى الخطوات التالية:

  1. تثبيت react-app-rewired : npm install -D react-app-rewired
  2. استبدل react-scripts بواسطة react-app-rewired في قسم البرامج النصية في packages.json الخاصة بك. json
  3. قم بإنشاء config-overrides.js في الدليل الجذر لمشروعك مع المحتوى التالي: 
 const MonacoWebpackPlugin = require ( 'monaco-editor-webpack-plugin' ) ;

module . exports = function override ( config , env ) {
  config . plugins . push ( new MonacoWebpackPlugin ( {
    languages : [ 'json' ]
  } ) ) ;
  return config ;
}

لمزيد من المعلومات ، الخروج من توثيق react-app-rewired هنا.

رخصة

معهد ماساتشوستس للتكنولوجيا ، راجع ملف الترخيص للحصول على التفاصيل.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل