JS在线代码编辑器多种方案monaco-editor,vue-monaco-editor

JS在线代码编辑器多种方案monaco-editor,vue-monaco-editor,第1张

JS在线代码编辑器多种方案monaco-editor,vue-monaco-editor

前言

  JavaScript在线代码编辑器。


  需要代码提示,关键字高亮,能够格式化代码。


(不需要在线运行)

  简简单单的需求。


源码地址:https://github.com/FannieGirl/vue-monaco-editor

方案一: Monaco-editor

  简介:微软的开源项目,开源中国上面的在线代码编辑器也是用的这个(我就是顺着藤爬到Monaco editor的)

     有 ‘在线 VS code’  美称

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

  优点:多语言支持,代码提示(内置函数蛮多的)。


文档很清晰,API很详细了。


更重要的是给出的案例非常多。


  缺点:一开始摸不着头脑(本人是在vue项目使用),静态资源的引用是魔鬼(官方就是ES5方式资源引用),最好的方案是要搭配 webpack plugin 使用

     找了那么多的资料,没见几个demo写的好(这也是我要再写一篇的原因啦  争取看到的人都可以快速上手)

  源码:https://github.com/Microsoft/monaco-editor

  案例:https://github.com/Microsoft/monaco-editor-samples/  一定要看这个,官方给你展示各种功能(一套git pull 下来,在本地环境直接看demo),

     鬼知道我走了多少冤枉路。


  本人案例展示,直接上源码吗?哈哈哈。


 npm install monaco-edtior //安装

 test.vue //新建一个文件
<template>
<div ref="container" style="width:800px;height:600px;border:1px solid grey;text-align: left"></div>
</template> <script>
import * as monaco from "monaco-editor"; // 包体很大了 但是demo可以跑起来 export default{
mounted() {
var editor = monaco.editor.create(this.$refs.container, {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript',
minimap:{
enabled:false
},
selectOnLineNumbers: true,
roundedSelection: false,
cursorStyle: 'line', // 光标样式
automaticLayout: false, // 自动布局
glyphMargin: true, // 字形边缘
useTabStops: false,
fontSize: 16, // 字体大小
autoIndent: false //自动布局
});
}
}
</script>

JavaScript 参考这个案例!!!

方案二 vue-monaco-editor(没错就是别人集成好的)

  原因:monaco  按需求加载太难了,官方案例也是在静态资源中引用 node_model中的(地狱来了)

  针对这个有两种解决方案

  方案一:资源引用哪家强,就到前端找webpack

  方案二:本人偷懒,直接用vue-Monaco-editor(Rect 有的)

  再次上源码,哈哈哈哈哈

  方案一的源码

npm install monaco-editor-webpack-plugin //安装

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = {
// ......
configureWebpack: {
plugins: [
new MonacoWebpackPlugin({
// available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
languages: ['javascript', 'css', 'html', 'typescript', 'json']
})
]
}
};

  方案二的源码

<template>
<div id="app">
<MonacoEditor
height="300"
width="1200"
class="vs"
style="text-align: left;background-color: #fff"
language="javascript"
:code="code"
:editorOptions="options"
@mounted="onMounted"
@codeChange="onCodeChange"
>
</MonacoEditor>
</div>
</template> <script>
import MonacoEditor from 'vue-monaco-editor' export default {
data() {
return {
code: '',
editor:null,
options: {
theme: "vs",
selectOnLineNumbers: true,
roundedSelection: false,
readOnly: false,
automaticLayout: true,
glyphMargin: true,
showFoldingControls: "always",
formatOnPaste: true,
formatOnType: true,
folding: true,
}
}
},
components: {
MonacoEditor
},
methods:{
onMounted (editor) { this.editor = editor; }, onCodeChange(editor) {},
}
}
</script>
<style>
</style>

前方有坑

  同一个项目里面

  既安装了vue-monaco-editor 又安装了Monaco-editor

  然后 就不会智能提示了(2333)

这个问题,emmm(稍后解决吧,我再搞codemirror的)

算了codeMirror 再分一篇文章

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/589089.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-12
下一篇 2022-04-12

发表评论

登录后才能评论

评论列表(0条)

保存