所有要用到的js文件:https://pagecdn.com/lib/ace
教程:https://github.com/ajaxorg/ace
自己写了个python编辑器的示例代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> #editor { width: 600px; height: 400px; position: absolute; line-height: 20px; font-size: 15px; } </style> </head> <body> <div id="editor"></div> <script type="text/javascript" src="https://pagecdn.io/lib/ace/1.4.13/ace.min.js" charset="utf-8"></script> <script type="text/javascript" src="https://pagecdn.io/lib/ace/1.4.13/theme-vibrant_ink.min.js"></script> <script type="text/javascript" src="https://pagecdn.io/lib/ace/1.4.13/mode-python.min.js"></script> <script type="text/javascript"> let editor = ace.edit("editor"); editor.setTheme("ace/theme/vibrant_ink") let PythonScriptMode = ace.require("ace/mode/python").Mode; editor.session.setMode(new PythonScriptMode()); </script> </body> </html>
有一些可以用到的属性和方法:
editor.getValue(); // 获得表单的内容 editor.setValue("code"); // 设置表单的内容 editor.destroy(); // 移除表单 editor.getReadOnly(); // 查看表单的只读状态 editor.setReadOnly(true); // 设置表单为只读,如果是false的话就解除只读