公司项目中有个需求,前端需要请求后端的代码文件,读取文件里面代码内容,返回到前端展示
具体需求:
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="