monaco-editorはvueプロジェクトで使用されています

表示データを編集するためのプロジェクトのようなエディターのような機能が欲しいです。Monaco-editorが使用されます。詳細については、https：//microsoft.github.io/monaco-editor/のドキュメントを参照してください

インストールの依存関係

npm install monaco-editor --save

Vueで使用

<!-- 容器 -->
<div ref="main"></div>

// 引用组件
import * as monaco from 'monaco-editor/esm/vs/editor/editor.main.js'
import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution'

// 使用 - 创建 monacoEditor 对象
this.monacoEditor = monaco.editor.create(this.$refs.main, {
    
    
          // theme: 'vs-dark', // 主题
          // value: '', // 默认显示的值
          language: 'json',
          folding: true, // 是否折叠
          foldingHighlight: true, // 折叠等高线
          foldingStrategy: 'indentation', // 折叠方式  auto | indentation
          showFoldingControls: 'always', // 是否一直显示折叠 always | mouseover
          disableLayerHinting: true, // 等宽优化
          emptySelectionClipboard: false, // 空选择剪切板
          selectionClipboard: false, // 选择剪切板
          automaticLayout: true, // 自动布局
          codeLens: false, // 代码镜头
          scrollBeyondLastLine: false, // 滚动完最后一行后再滚动一屏幕
          colorDecorators: true, // 颜色装饰器
          accessibilitySupport: 'off', // 辅助功能支持  "auto" | "off" | "on"
          lineNumbers: 'on', // 行号 取值： "on" | "off" | "relative" | "interval" | function
          lineNumbersMinChars: 5, // 行号最小字符   number
          enableSplitViewResizing: false,
          readOnly: true //是否只读  取值 true | false
})

// 获取 编辑框中当前的值
const value = this.monacoEditor.getValue()

// 编辑 监听内容变化
this.monacoEditor.onDidChangeModelContent(() => {
    
    
  console.log('目前内容为：', this.monacoEditor.getValue())
})

// 设置 data：想更新进去的值
this.monacoEditor.setModel(monaco.editor.createModel(data))

たぶんそれだけです、記録を作ってください、