【實(shí)戰(zhàn)精講】網(wǎng)頁嵌入代碼展示/編輯器
導(dǎo)入相應(yīng)的js文件,然后寫代碼html和js初始化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
{% load static %}
<!--導(dǎo)入js庫-->
<script src="https://cdn.bootcdn.net/ajax/libs/ace/1.4.11/ace.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/ace/1.4.11/ext-beautify.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/ace/1.4.11/ext-error_marker.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/ace/1.4.11/ext-language_tools.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/ace/1.4.11/mode-python.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/ace/1.4.11/theme-terminal.min.js"></script>
<script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
<link rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<style>
button{
width: 120px;
height: 50px;
color:white;
background-color:cornflowerblue;
border-radius: 3px;
border-width: 0;
margin: 0;
outline: none;
font-size: 17px;
text-align: center;
cursor: pointer; }
button:hover{
background-color: #b1cbf3; }
</style>
</head>
<body>
<button id="btn_save">保存</button>
<button id="btn_start1" style="margin-left: 10px">
<a href="{% url 'workspace:deal_strategy' pk=pk %}" style="text-decoration: none; color: #f6f6fa "> 運(yùn)行回測 </a></button>
<button style="margin-left: 20px"><a href="{% url 'workspace:deal_strategy_win' pk=pk %}" style="text-decoration: none; color: #f6f6fa ">
運(yùn)行回測WIN
</a></button>
<button style="margin-left: 30px"><a href="{% url 'workspace:workspace' %}" style="text-decoration: none; color: #f6f6fa ">
返回上一級
</a></button>
<div id="editor" style="width: 1400px; height: 650px; margin-top: 20px">{{ test_code }}</div>
</body>
<script>
var editor = ace.edit('editor');
editor.setTheme("ace/theme/terminal");
editor.setFontSize(18);
editor.setHighlightActiveLine(false);
editor.setOption("wrap", "free");
editor.setShowPrintMargin(false);
var PythonMode = ace.require("ace/mode/python").Mode;
editor.session.setMode(new PythonMode());
editor.getSession().setUseWrapMode(true);
ace.require("ace/ext/language_tools");
editor.setOptions({
enableLiveAutocompletion: true,
enableBasicAutocompletion: true,
});
$(document).ready(function () {
}).on('click', '#btn_save', function () {
code_content = editor.getValue();
param = {"code_content": code_content};
$.post("{% url 'workspace:workspace_update' name=name %}", param, function (data) {
swal({title: '保存成功'});
})
})
</script>
</html>
