vue中显示原网页代码--codemirror

yesu 2021-08-15 原文

在项目中遇到了一个需求，后台返回string类型的html源码，要求前端这边按照codeview这种类型把这个源码展示出来。现总结如下

1.如果没啥样式的需求，只是要求该缩进缩进的话，可以直接使用innerText属性，然后给你这个包裹了html源码的div加上white-space:pre;就可以了。效果如下：

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
        },


this.resArr = res;

效果：

注意：我们在使用的时候，想要高度自适应，这个时候需要在

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;
}

一些具体的配置信息，大家可以去搜搜，我这边只写了部分