在线编码工具（ace editor）

引入js库

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

代码容器

<!--代码输入框（注意请务必设置高度，否则无法显示）-->
<pre id="code" class="ace_editor" style="min-height:400px"><textarea class="ace_text-input">
	<div>
		<ul>
	        <li>惊！某羊村附近出现狼堡</li>
	        <li>惊！某羊村附近出现狼堡</li>
	        <li>惊！某羊村附近出现狼堡</li>
		</ul>
	</div>
</textarea></pre>

初始化

<script>
	//初始化对象
	editor = ace.edit("code");
	
	//设置风格和语言（更多风格和语言，请到github上相应目录查看）
	theme = "chaos"
	language = "c_cpp"
	editor.setTheme("ace/theme/" + theme);
	editor.session.setMode("ace/mode/" + language);
	
	//字体大小
	editor.setFontSize(18);
	
	//设置只读（true时只读，用于展示代码）
	editor.setReadOnly(false);
	
	//自动换行,设置为off关闭
	editor.setOption("wrap", "free")
	
	editor.setShowPrintMargin(false);
	//获取编辑器内容
	console.log(editor.getValue())
	//启用提示菜单
	ace.require("ace/ext/language_tools");
	editor.setOptions({
	enableBasicAutocompletion: true,
	enableSnippets: true,
	enableLiveAutocompletion: true
	});
</script>

看效果

Github: https://github.com/ajaxorg/ace/
vue版: https://github.com/chairuosen/vue2-ace-editor