效果图1.npminstallmonaco-editor-- save-devnpminstallmonaco-editor-web pack-plugin-- save-de v2 .配置http://www.sinnww
constmonacowebpackplugin=require (Monaco-editor-web pack-plugin ) ) module.exports={ configure web pack 3360 } plugin 3 .创建通用组件templatedivref=' container ' class=' Monaco-editor ' 3360 style=' ' height 3360 ' height ' px ' '/div editor.API ' export default { name 3360 ' AC Monaco '，props : { lango } default : ' JSON '，}，oldValue: String， height: { type: Number，default: 400，}，data () return ) monacodiffinstance: '，/主要为defaultopts: ) valata 有关设置/编辑器主题的详细信息，请参阅官网roundedSelection: false，//右侧的编辑器预览框autoIndent: true，//readonly3360false，//读取请参阅originalModel: ' '修改模型： '，}，mounted({this.init ) }， //听取来自父组件的值的变化，并实时更新到编辑器中的watch : { old value 3360 } handler 3360 ff的oldval (this.original model=Monaco.eddval this.language ) this.monacodiffinstance.set model modified 3360 this.modified model，}，value : { handler : function oldVal ) this.modified model=model this.language (this.monacodiffinstance.set model (original 3360 this.original model ) modified : this.modified model this.modified model.getvalue ()、)、methods:{init(}//初始化编辑器实例this.) this.default opts (this.original model=Monaco.editor.create model ) this.oldvalue，this.language (this.modified ) this.language (this.monacodiffinstance.set model (original 3360 this.original model， modified : this.modified model父组件getvalue((this.$emit )、this.modifiedModel.getValue )、)、(/scriptstyll Overflow :自动； Monaco-editor.scroll-decoration { box-shadow : none； }}/style 4.组件Monaco ref=' Monaco ' : old value=' old value ' 3360 value=' value ' @ change=' change value '/mm