为网站集成代码编辑功能

为网站集成代码编辑功能

由于网站管理后台提供对HTML模板页面的编辑功能，普通的textarea从效果上来说肯定达不到要求，所以才有了寻求拥有语法高亮，代码折叠等更接近客户端对代码编辑的体验的客户端。最终目标锁定为ace-builds。

ace的集成

1.ace代码获取
通过ace-builds github地址地址，可以获取ace-builds的最新代码。
git克隆：
git clone https://github.com/ajaxorg/ace.git

当然也可下载压缩包。

2.HTML页面集成
html页面引入js：
<script src="$staticUrl('static/ace-builds/ace.js')"></script>

html页面增加代码编辑标签
<pre id = "htmleditor"></pre>

html页面设置ace-editro
<script>
htmleditor = ace.edit("htmleditor");
htmleditor.setTheme("ace/theme/eclipse");
htmleditor.session.setMode("ace/mode/html");
htmleditor.setFontSize(13);
</script>

3.给ace-editor添加内容
<script>
para.setValue(data.file,1);
</script>

4.获取ace-editor的内容
<script>
val = para.getValue();
var result = val.replace(/\n/g,"<<hh>>");
</script>

这里解释下，由于我的项目获取到ace-editor的内容后，会将其设置到隐藏的textarea标签的innerText，然后用jQuery的serialize进行串行化，最后通过ajax上传到服务器。这一套走下来，后台收到的对应的文本，其中的换行符“\n”会丢失，所以才先将换行符换成不会其他不会丢失，切影响HTML代码的内容。

最总效果展示