很多网站提供了在线网页编辑的功能，支持javascript+css+html，类似于简书markdown编辑模式的实时预览功能。下面我们就通过简单的几个步骤解释如何开发一下自制的网页，可以在该页面中编辑并直接预览页面编辑的结果。
1.先决条件
开发该功能需要以下条件：
- 连接网络的电脑（能看到这个页面，相应已经具备这个条件）
- 文本编辑器 （记事本就可以，最好可以有notepad++,vscode之类的高级文本编辑工具）
- 现代浏览器(chrome,firefox,safari,edge等)
2.开始
2.1 新建H5页面
参考下面内容使用文件编辑器新建一个空白html5页面，参考w3cschool。
<!DOCTYPE html>
<html>
<head>
<title>页面编辑器</title>
</head>
<body>
文档的内容......
</body>
</html>
2.2 编辑页面结构
我们需要一个文本框用于输入目标编辑代码(javascript,css,html)，以及一个结果iframe用于产生页面的结果。修改2.1中的页面内容如下。
<!DOCTYPE html>
<html>
<head>
<title>页面编辑器</title>
</head>
<body>
<div id="container">
<textarea id="input"></textarea>
<iframe id='target' frameBorder="0"></iframe>
</div>
</body>
</html>
为页面增加css，使编辑器(input)与输出目标(target)左右分栏
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
#container {
height: 100%;
width: auto;
white-space: nowrap;
overflow: hidden;
position: relative;
}
#input {
height: 100%;
width: 50%;
display: inline-block;
}
#target {
height: 100%;
display: inline-block;
width: 50%;
}
页面布局
2.3 增加行为
当页面载完成后进行页面功能的初始化和相应事件的绑定。
<body onload="init()">
初始化的方法
function generate()
{
var idoc = document.getElementById('target').contentWindow.document;
idoc.open();
var input = document.getElementById('input');
idoc.write(input.value);
idoc.close();
}
function init()
{
console.log(`function init`)
var input = document.getElementById('input');
input.addEventListener('keyup',()=>{
//console.log('src changed');
generate();
});
}
至此我们已经完成了一个简单的在线网页编辑器，我们可以在左侧的文本框中输入页面的内容，包括JavaScript，css,html，输入的页面内容会直接更新到右侧的输出窗口中，效果如下图所示：
[图片上传失败...(image-9d34f-1534061195252)]
3. 让编辑器更专业
直接使用一个纯文本的textarea会让页面整体感觉比较low,这里我们可以使用第三方的文本编辑库来增强我们的页面。在这里我们选用 AWS Cloud9所使用的ace 项目（类似的也可以选择codemirror之类）。
3.1 替换掉textarea
首先将页面的文本框换为div。
<!--<textarea id="input"></textarea>-->
<div id="input"></div>
3.2 初始化ace文本编辑工具
参考ace的文档，初始化div，将其作为一个代码编辑窗口。
首先加入引用链接
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ace.js" type="text/javascript"></script>
更新原有初始化方法
function init() {
console.log(`function init`)
/*var input = document.getElementById('input');
input.addEventListener('keyup',()=>{
//console.log('src changed');
generate();
});*/
window.editor = ace.edit("input");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/html");
editor.setValue(`<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>`, 1);
editor.getSession().on('change', function () {
generate();
});
editor.focus();
editor.setOptions({
fontSize: "16pt",
showLineNumbers: false,
showGutter: false,
vScrollBarAlwaysVisible: true,
enableBasicAutocompletion: false, enableLiveAutocompletion: false
});
editor.setShowPrintMargin(false);
editor.setBehavioursEnabled(false);
}
更新generate()方法，使之从ace 编辑控件中获取输入内容。
function generate() {
var idoc = document.getElementById('target').contentWindow.document;
idoc.open();
//var input = document.getElementById('input');
//idoc.write(input.value);
idoc.write(editor.getValue());
idoc.close();
}
此时我们的在线页面编辑工具，看上去就高大尚很多了。
最终结果
4 结语
至此我们的在线页面编辑工具已经开发完毕，如果一步步跟着流程走，应该能得到上面的一个页面，大家也可以通过代码链接直接粘贴代码，由于 qiang的原因，所以cdn经常会不好使，建议大家直接下载相关三方工具的代码放到自己的页面目录中直接引用:-)。
网友评论