codemirror使用
JS使用
-
使用bower下载
bower i codemirror
-
引入样式文件
<link rel="stylesheet" type="text/css" href="bower_components/codemirror/lib/codemirror.css">
-
引入js文件
<script type="text/javascript" src="bower_components/codemirror/lib/codemirror.js"></script> <script type="text/javascript" src="bower_components/codemirror/mode/javascript/javascript.js"></script> <script type="text/javascript" src="bower_components/codemirror/mode/xml/xml.js"></script> <script type="text/javascript" src="bower_components/codemirror/mode/htmlmixed/htmlmixed.js"></script> <script type="text/javascript" src="bower_components/codemirror/mode/css/css.js"></script>
-
文档结构
<div class="container"> <textarea class="marpad " tyle="width:70%;height:300px;" id="editor" > <!-- 放入编辑对应的文本 --> </textarea> </div>
-
初始化
// mode: "text/javascript", // mode: "text/css" window.onload = function(){ var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("editor"), { lineNumbers: true, mode: "text/html" }); }
- mode需要注意的是,编辑器解析某种文本,必须引入mode下面对应的js文件,否则还是以纯文本的格式显示或者default
- 若是mode: "text/html",则必须在htmlmixed.js文件引入之上引入xml.js,否则html是不能被正确解析显示的
vue-cli中使用
-
下载
npm i -S vue-codemirror
-
main.js中使用
// codemirror 引入和使用 import VueCodemirror from 'vue-codemirror' import 'codemirror/lib/codemirror.css' Vue.use(VueCodemirror)
-
.vue文件中使用
-
template部分,使用双向绑定的写法
//v-model="infor.codeCss" 双向绑定的数据源 //:options="cssOptions" codemirror的配置项 <codemirror v-model="infor.codeCss" :options="cssOptions"></codemirror>
-
script部分
//引入xml,html,css,js对应的js解析文件 import 'codemirror/mode/javascript/javascript.js' import 'codemirror/mode/css/css.js' import 'codemirror/mode/xml/xml.js' import 'codemirror/mode/htmlmixed/htmlmixed.js' // 引入主题样式文件 import 'codemirror/theme/monokai.css'
//Vue实例中设置配置项 data(){ return { infor:{ codeCss:'' }, cssOptions: { tabSize: 4, mode: 'text/css', theme: 'monokai', lineNumbers: true, line: true, } } }
-
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· 深入理解Mybatis分库分表执行原理
· 使用 Dify + LLM 构建精确任务处理应用