vue集成monaco editor实现代码之间的diff效果

官方文档

https://microsoft.github.io/monaco-editor/

关键点

• 创建monacoEditor实例和需要对比的两个模型实例，然后将模型实例注册到monacoEditor实例中，

    instance = monacoEditor.editor.createDiffEditor(dom, editorConfig)

    originalModel = monacoEditor.editor.createModel(props.diffValue, props.language)
    modifiedModel = monacoEditor.editor.createModel(props.modelValue, props.language)

    instance.setModel({
      original: originalModel, // origin values, on the left
      modified: modifiedModel, // modified values, on the right
    })

• get set方法

const getValue = () => {
  return modifiedModel?.getValue()
}

const getDiffValue = () => {
  return originalModel?.getValue()
}

const setValue = value => {
  modifiedModel?.setValue(value)
}

const setDiffValue = value => {
  originalModel?.setValue(value)
}

• watch值变化，重新渲染编辑器

watch(
    () => props.modelValue,
    value => {
      if (getValue() !== value) {
        setValue(value)
      }
    },
)
watch(
    () => props.diffValue,
    value => {
      if (getDiffValue() !== value) {
        setDiffValue(value)
      }
    },
)

实现效果

简易demo

https://github.com/ComingCL/monaco-editor-vue-demo

• 需要增加功能请评论区留言，或者请github提issue