大家好！ 在本文中，我们将编写我们的在线代码编辑器。
我为什么要编写在线代码编辑器
有一天，我想知道创建自己的在线编辑器（如jsfiddle）有多困难，这就是为什么我决定编写自己的编辑器的原因。 编写编辑器给了我很好的Java知识和概念。
图书馆选择
选择库是创建自己的代码编辑器的重要部分。 您可以在没有库的情况下进行管理，但是编辑器不会那么漂亮。
有两个流行的库
-Codemirror和
Ace 。 我的选择落在王牌上。
开始
我们需要做的第一件事是创建ace并将其连接到我们的文件。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> </title> <link rel="stylesheet" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://rawgithub.com/ajaxorg/ace-builds/master/src/ext-language_tools.js" type="text/javascript" charset="utf-8"></script> <script src="https://rawgithub.com/ajaxorg/ace-builds/master/src/ace.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js"></script> <meta name="viewport" content="width=device-width, initial=scale=1"> </head>
现在我们需要创建textarea并为其设置样式。 此代码将创建textarea以输出html代码。
<style type="text/css" media="screen"> #html-editor{ min-height: 40vh; width: 35%; } #result { background-color: white; width: 100%; height: 50vh; } </style> <div id="html-editor"></div> <div id="result-block"> <iframe id="result" frameborder="0"></iframe> </div> <br>
我们剩下的最后一件事是添加js代码。
var htmlEditor = ace.edit("html-editor"); htmlEditor.setTheme("ace/theme/monokai"); htmlEditor.session.setMode("ace/mode/html"); htmlEditor.getSession().on('change', function() { update(); }) function update() { var res = document.getElementById('result').contentWindow.document; res.open(); res.write(htmlEditor.getValue()); res.close(); } update();
现在，当我们在此文本区域中编写html代码时，结果将显示在iframe中。
每行的功能：ace.edit（）; 就像document.getElementById一样，只是王牌。
htmlEditor.setTheme（） -定义字段的主题（所有主题都可以在其github上查看-https:
//github.com/ajaxorg/ace ）
htmlEditor.session.setMode（） -定义语言。
htmlEditor.getSession（）。on（'change'，function（）{
//代码
}）
-在iframe上显示输入的代码。
让我们再添加2个此类字段，现在仅1个字段用于CSS代码，而1个字段用于JavaScript代码。
整个代码
index.php
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> </title> <link rel="stylesheet" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://rawgithub.com/ajaxorg/ace-builds/master/src/ext-language_tools.js" type="text/javascript" charset="utf-8"></script> <script src="https://rawgithub.com/ajaxorg/ace-builds/master/src/ace.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js"></script> <meta name="viewport" content="width=device-width, initial=scale=1"> </head> <body> <style type="text/css" media="screen"> #html-editor, #css-editor, #js-editor { min-height: 40vh; width: 35%; } #result { background-color: white; width: 100%; height: 50vh; } .all_editors { display: flex; } </style> <div class="all_editors"> <div id="html-editor"></div> <div id="css-editor"></div> <div id="js-editor"></div> </div> <div id="result-block"> <iframe id="result" frameborder="0"></iframe> </div>
app.js
var htmlEditor = ace.edit("html-editor"); htmlEditor.setTheme("ace/theme/monokai"); htmlEditor.session.setMode("ace/mode/html"); var cssEditor = ace.edit("css-editor"); cssEditor.setTheme("ace/theme/monokai"); cssEditor.session.setMode("ace/mode/css"); var jsEditor = ace.edit("js-editor"); jsEditor.setTheme("ace/theme/monokai"); jsEditor.session.setMode("ace/mode/javascript"); htmlEditor.getSession().on('change', function() { update(); }) cssEditor.getSession().on('change', function() { update(); }) jsEditor.getSession().on('change', function() { update(); }) function update() { var res = document.getElementById('result').contentWindow.document; res.open(); res.write('<style>' + cssEditor.getValue() + '</style>'); res.write('<script>' + jsEditor.getValue() + '</script>'); res.write(htmlEditor.getValue()); res.close(); } update();
至此，创建自己的代码编辑器的第一部分结束了。
在第二部分中，我们将具有将代码保存在localStorage中的功能，并且通过更新页面，此代码将被插入这3个字段中，并且还将具有将该代码下载为文件的功能。
我们得到的代码编辑器