【这是一个代码编辑器插件】
1.【首先我们要先引入】
npm install vue-codemirror --save 【--save是为了多人开发时在pagejson中同步】
2.【然后我们下载完成后到组件中引入】
import { codemirror } from 'vue-codemirror'
require("codemirror/mode/javascript/javascript"); // 这里引入的模式的js，根据设置的mode引入，一定要引入！！
import 'codemirror/lib/codemirror.css'
import "codemirror/theme/ambiance.css"; // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
import 'codemirror/mode/htmlmixed/htmlmixed'
import 'codemirror/mode/javascript/javascript'
import 'codemirror/theme/monokai.css'
3.【以上最好全部引入 这样风格才不会报错 黑色风格在缺少对应css会有问题】
4.【在js中 引入组件 components:{codemirror}】
5.【在data中写 入参数对象】
cmOptions:{
value:'',
mode:"text/javascript",//text/javascript
theme: "ambiance",//主题风格
lineNumbers: true,//显示行号
}
6.html中写
<codemirror ref="mycode"
:model="dataSourceArrForm.dataSourceSql"
:options="cmOptions"
@changes="changes"
class="code">
</codemirror>
完成 可以了
以上可以完成了需求
那么格式化sql 怎么办呢
import sqlFormatter from "sql-formatter";
需要引入这个【npm下载哟 】
npm install --save sql-formatter
【下载完成后有很多时候 项目起不来 因为依赖没获取到 需要删除modules再下载一次就好了】
import 'codemirror/mode/sql/sql.js' //我主要是想高亮sql语句，如果是其他的语言，则引入相应的js
【编辑器默认给出的高度是300】
改变高度需要改变他的两个类 并且在外层加个div 给外层div设置高度
.CodeMirror {
border: 1px solid #eee;
height: auto;
}
.CodeMirror-scroll {
height: auto;
overflow-y: hidden;
overflow-x: auto;
}
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
});
【editor.setSize('800px', '950px'); //设置代码框的长宽】
【editor.setValue(""); //给代码框赋值】
【editor.getValue(); //获取代码框的值】
