使用monaco-editor实现一个带语法高亮和代码提示的在线编辑器

这是我进入公司遇到的第一个难题,项目里需要实现一个带语法高亮和代码提示在线页面编辑器的效果,就是那种左边代码右边界面的编辑器,页面编辑器作为一个以前我从来没有接触过的领域,这个需求对我来说是一个巨大的挑战,首先得确定使用哪个在线编辑器插件来实现这个功能,我在github,各种技术论坛找了一圈市面上口碑较好的编辑器大概有Monaco-editor,codemirror编辑器,AceEditor等等,我最终选择的是Monaco-editor编辑器原因就是他真的比其他的好用。先上最终实现的效果图:使用monaco-editor实现一个带语法高亮和代码提示的在线编辑器_第1张图片
界面主要分为两块一块放html和js代码一块放css代码,有代码提示和语法高亮可以实时显示,接下来讲怎么实现的。
首先放上git地址
第一步先要安装Monaco-editor编辑器
我使用的npm的方式安装代码如下:

npm install monaco-editor

安装完了之后先新建一个index.html来放html代码


<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <link rel="stylesheet" href="./code.css">
head>
<body>
  <div class="all">
<div class="main">
<div class="write">
<div id="container" >div>
<div id="container1">div>
div>
<div class="live">
    <iframe id="preview" frameborder="0">iframe>
div>
div>
<div class="bt">
    <button id="b1">获取代码button>
    <button id="b2">运行代码button>
    <button id="b3">清空代码button>
    
div>div>
<script src="node_modules/monaco-editor/min/vs/loader.js">script>
<script src="./code.js">
   
script>
body>
html>

引入下载的monaco-editor插件
css代码进行样式调整比较简陋

html,body{
     
    height: 100%;
    padding: 0px;
    margin: 0px;
    width: 1920px;
}
.main{
     
display: flex;
height: 100%;
overflow: hidden;

}
.live{
     
width: 1000px;
height: 100%;
background-color: #ffffff;
}
.bt{
     
position: absolute;
right: 1000px;
top: 0px;
}
.all{
     
position: relative;
height: 100%;
}
#container1
{
     
    width:920px;
    height:70%;
    border:1px solid grey;
}
#container
{
     
    width:920px;height:70%;
    border:1px solid grey;
}
button{
     
    background-color: black;
    color: white;
}
button:hover{
     
    background-color: blue;
}

最后是重头戏的js代码新建一个code.js

require.config({
      paths: {
      'vs': 'node_modules/monaco-editor/min/vs' } });
var editorArray = [];
var real = false
require(['vs/editor/editor.main'], function () {
     
  var editor = monaco.editor.create(document.getElementById('container'), {
     
    value: [
      '
', '
'
, '

你可能感兴趣的:(html,编辑器)