vue中显⽰原⽹页代码--codemirror
在项⽬中遇到了⼀个需求，后台返回string类型的html源码，要求前端这边按照codeview这种类型把这个源码展⽰出来。现总结如下
1.如果没啥样式的需求，只是要求该缩进缩进的话，可以直接使⽤innerText属性，然后给你这个包裹了html源码的div加上white-space:pre；就可以了。效果如下：html实现用户注册登录代码
2.如果要求你的源码可以编辑并且按照codeview的那种主题样式展⽰可以使⽤codemirror插件
我是在vue中使⽤的
1.⾸先安装vue-codemirror
npm install vue-codemirror --save
2.在main.js中使⽤
import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/darcula.css'  //这个是你设置了什么主题，就要对应的在main.js中引⼊主题的css
3.在对应的组件中使⽤
html部分
<codemirror
ref="myCm"
:value="resArr" //对应的值
:options="cmOptions" //对应的配置
class="code"
></codemirror>
js部分
import { codemirror } from 'vue-codemirror'
require("codemirror/mode/python/python.js")
require('codemirror/addon/fold/foldcode.js')
require('codemirror/addon/fold/foldgutter.js')
require('codemirror/addon/fold/brace-fold.js')
require('codemirror/addon/fold/xml-fold.js')
require('codemirror/addon/fold/indent-fold.js')
require('codemirror/addon/fold/markdown-fold.js')
require('codemirror/addon/fold/comment-fold.js')
cmOptions:{
value:'',
//mode:'text/html',//模式
theme:'darcula', //主题
indentUnit:2,
smartIndent:true,
tabSize:4,
readOnly:true, //只读
showCursorWhenSelecting:true,
lineNumbers:false, //是否显⽰⾏数
firstLineNumber:1
},
效果：
注意：我们在使⽤的时候，想要⾼度⾃适应，这个时候需要在codemirror/lib/codemirror.css ⽂件中将样式改为
.CodeMirror {
/* Set height, width, borders, and global font properties here */
font-family: monospace;
height: auto;
color: black;
direction: ltr;
}
.CodeMirror-scroll {
height: auto;
overflow-y: hidden;
overflow-x: auto;
}
⼀些具体的配置信息，⼤家可以去搜搜，我这边只写了部分

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。