【实战精讲】网页嵌入代码展示/编辑器

公司项目中有个需求，前端需要请求后端的代码文件，读取文件里面代码内容，返回到前端展示

具体需求：

1、返回网页前端代码能正常展示

2、展示到前端的代码能像后端源码一样，换行缩进什么的原模原样输出到页面

3、前端可以修改代码，并提交传到后端，传到后端后可以覆盖源文件，相当于是修改后端代码文件

效果图：

下方为效果图，工作中以实现需求为第一原则，优化美化是后面考虑的事情

1、代码插件样式我并没有过多调整，可以看到下方代码样式显示完全正常，换行、缩进、高亮该有的都有（加载的是后端Django模型类里面的代码文件）

2、插件下方有一个保存脚本按钮，点击可以提交编辑的代码

3、截图显示的富文本编辑器跟代码插件没有关系，后面也会公布相关教程

流程步骤：

1、前端代码插件ace.js

代码插件比较多，我这里选了ace.js , 依赖文件如下图路径所示，自己从网上下载即可

<script src="/static/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script> <script src="/static/src-noconflict/ext-language_tools.js" type="text/javascript"></script></script>
<script src="/static/src-noconflict/ext-language_tools.js" type="text/javascript"></script>

HTML部分直接写个div即可，一定要设置宽、高、id、

<div style="width:500px;height:300px;" id="