vue中使用代码编辑器插件
参考:https://github.com/Paul-Chan007/vue-code-editor.git
·
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<link href="https://cdn.bootcss.com/codemirror/5.48.4/codemirror.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/codemirror/5.48.4/codemirror.js"></script>
<script src="https://cdn.bootcss.com/codemirror/5.48.4/mode/python/python.js"></script>
</head>
<body>
<div id="app" style="margin-top: 60px;">
<el-row :gutter="40">
<el-col :span="20" :offset="2">
<div style="border: 1px solid #ddd;" id="div1">
<textarea id="editor_demo"></textarea>
</div>
</el-col>
<el-col :span="2" :offset="20" style="margin-top: 20px;">
<el-button type="primary" @click="handleAdd">添加</el-button>
</el-col>
</el-row>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
editor: null
},
mounted() {
this.init()
},
methods: {
init() {
this.editor = CodeMirror.fromTextArea(document.getElementById("editor_demo"), {
lineNumbers: true,
indentWithTabs: true,
mode: "python",
matchBrackets: true
});
this.editor.setSize('auto','600px');
},
handleAdd() {
axios.post(site_url + "create_blog/", {"content": this.editor.getValue()}).then(res => {
if (res.data.result) {
this.$message.success('添加内容成功');
} else {
this.$message.error('添加内容失败');
}
}, 'json');
}
}
})
</script>
</body>
</html>
更多推荐
已为社区贡献6条内容
所有评论(0)