หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ทรัพยากรอื่นๆ
ดาวน์โหลด

ตัวอย่าง

เพื่อสร้างตัวอย่างในพื้นที่ให้เรียกใช้: 

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 /> ) ;

เพิ่มปลั๊กอิน Monaco Webpack 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 Editor ใช้การนำเข้า CSS ภายในดังนั้นหากคุณใช้โมดูล CSS ในโครงการของคุณ - คุณน่าจะมีความขัดแย้งโดยค่าเริ่มต้น เพื่อหลีกเลี่ยงสิ่งนั้น-แยก CSS-Loader สำหรับแพ็คเกจแอพและโมนาโกแก้ไข: 

 // 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' ;

ถาม - ตอบ

ฉันไม่ได้รับการไฮไลต์ / การตรวจสอบอัตโนมัติ / การตรวจสอบอัตโนมัติ

ตรวจสอบให้แน่ใจว่าใช้ปลั๊กอิน Monaco Webpack หรือทำตามคำแนะนำเกี่ยวกับวิธีการโหลด Monaco เวอร์ชัน ESM

วิธีการโต้ตอบกับอินสแตนซ์ 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 ( ) ;

ทำอะไรก่อนติดตั้งบรรณาธิการ

ตัวอย่างเช่นคุณอาจต้องการกำหนดค่า schemas 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 } />
        ) ;
    }
}

ใช้หลายธีม

โมนาโกรองรับธีมเดียวเท่านั้น

วิธีใช้ตัวแก้ไข 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-App-Rewired สำหรับการตั้งค่าจำเป็นต้องมีขั้นตอนต่อไปนี้:

  1. ติดตั้ง react-app-rewired npm install -D react-app-rewired rewirer
  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 ที่นี่

ใบอนุญาต

MIT ดูรายละเอียดไฟล์ใบอนุญาต

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด