yii2 百度编辑器输出了 转义_【实战精讲】网页嵌入代码展示/编辑器

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

具体需求：

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>

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

"width:500px;height:300px;" id="editorDiv">div>

2、页面加载，请求后端读取代码数据

def webproduct_manage8(request):
   BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
   filepath = os.path.join(BASE_DIR,"webproduct\\models.py")
   with open(filepath,"r",encoding='utf-8-sig') as f:
       test_code = f.read()
       import json
       test_code=json.dumps(test_code)
   return render(request, "3.html",{"test_code": test_code})

读取后端代码需要注意几个地方：

①、我是在Windows下测试的，拼接文件路径用的\\

②、with open，内部实现了close方法，不管是读取异常/完毕都会执行close

③、编码问题，f.read()读取整个文件为字符串，首行出现的”\ufeff“叫BOM("ByteOrder Mark")用来声明该文件的编码信息，而我们读取文件时候，可以传入encoding参数，指定编码，我们这里传入utf-8不行，而传入了utf-8-sig

”utf-8“ 是以字节为编码单元,它的字节顺序在所有系统中都是一样的,没有字节序问题,因此它不需要BOM,所以当用"utf-8"编码方式读取带有BOM的文件时,它会把BOM当做是文件内容来处理, 也就会发生类似上边的错误.

"utf-8-sig"中sig全拼为 signature 也就是"带有签名的utf-8", 因此"utf-8-sig"读取带有BOM的"utf-8文件时"会把BOM单独处理,与文本内容隔离开,也是我们期望的结果.

④、json.dumps为了传到前端时候有引号包裹，不然前端会报错

In [12]: a="acd"
In [13]: json.dumps(a)
Out[13]: '"acd"'

3、前端渲染

首先来了解下api，其实核心功能就是创建好editor对象，通过getValue()获取值和setValue(value)设置值即可，都是字符串形式，理解起来并不难

var editor = ace.edit("editorDiv");
editor.getValue();
editor.setValue(value);

渲染编辑插件样式，参数editor对象

function show_editor(editor){
   //设置编辑器样式，对应theme-*.js文件
   editor.setTheme("ace/theme/twilight");
   //设置代码语言，对应mode-*.js文件
   editor.session.setMode("ace/mode/javascript");
   //设置打印线是否显示
   editor.setShowPrintMargin(false);
   //设置是否只读
   editor.setReadOnly(false);
   //以下部分是设置输入代码提示的，如果不需要可以不用引用ext-language_tools.js
   ace.require("ace/ext/language_tools");
   editor.setOptions({
      enableBasicAutocompletion: true,
      enableSnippets: true,
      enableLiveAutocompletion: true
   });
 };

渲染数据，后端返回的代码字符串用变量接收，safe禁止转义，后端返回的字符串都以原始字符返回，setValue即可渲染，即为文章开头展示的图片效果

var editor = ace.edit("editorDiv");
 show_editor(editor);
var test_code = {{ test_code|safe }};
console.log(test_code);
 editor.setValue(test_code);

4、代码修改提交

我在这里输入“# python爬虫人工智能学习”，点击保存脚本

编辑好后，ajax发送请求，getValue()获取值

function save_code(){
   code_text = editor.getValue();
   console.log(code_text);
   param = {"code_text":code_text};
   $.post("/webproduct/save_code/",param,function(data){
   console.log(data)
 })
 }

获取后f.write()将数据写入文件，我这里开了一个新文件做演示

def save_code(request):
   code_text = request.POST.get("code_text")
   BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
   filepath = os.path.join(BASE_DIR, "webproduct\\save_code.py")
   with open(filepath, "w", encoding='utf-8-sig') as f:
       f.write( code_text)

效果图，刚才前端编辑的数据已经显示进去，如果需要在源文件操作，就覆盖源文件内容即可

(本文完！)

python爬虫人工智能大数据公众号