Vuejs 和 CodeMirror 的绑定
实现 vuejs 和 codemirror 的相互绑定
Vue.directive("codemirror", {
twoWay: true,
bind: function () {
// 请自行初始化CodeMirror, 可使用 $(this.el).data('codemirror')
this.editor = editor;
// model主动赋值标记
this.silent = false;
this.handler = function () {
if (!this.silent) {
this.set(this.editor.getValue(), true); // 加锁，防止相互赋值
}
}.bind(this);
this.editor.on("change", this.handler);
},
update: function (value, oldValue) {
this.silent = true;
this.editor.setValue(this.vm.$data[this.raw]);
this.silent = false;
}
});使用:
<!-- code 为 Vue data 中使用的变量名 -->
<textarea id="codepad" v-codemirror="code"></textarea>
谢谢，不错的引入方式。
我看了sql语句美化的在线工具，想请教一下怎么实现的，关于sql语句解析我没有找到类似的组件可以把sql语句格式化的，望不吝赐教，感谢！
java的druid 或者 python的sql-parser 或者 自己写sql词法语法分析器
npm install vue-codemirror
试试这个吧
想问下博主，如果要在组件内声明codemirror的directive要怎样写呢？我尝试在App.vue里这样写:
<template> <div id="app"> <textarea v-snippet="msg"></textarea> </div> </template> <script> import CodeMirror from './components/v-codemirror/alias' export default { data () { return { 'msg': 'function test() { console.log("This is for test")}' } }, directives: { 'snippet': { twoWay: true, bind: function () { this.editor = CodeMirror.fromTextArea(this.el, { lineNumbers: true, mode: 'javascript' }) this.editor.on('change', function () { this.set(this.editor.getValue()) }.bind(this)) }, update: function (value, oldValue) { this.editor.setValue(value || '') console.log(this.editor.getMode()) } } } } </script>components/v-codemirror/alias.js:
import CodeMirror from 'codemirror/lib/codemirror.js' require('codemirror/lib/codemirror.css') require('codemirror/addon/lint/lint.css') require('codemirror/mode/javascript/javascript.js') require('codemirror/mode/css/css.js') // require('jsonlint') require('codemirror/addon/lint/lint.js') require('codemirror/addon/lint/javascript-lint.js') // require('codemirror/addon/lint/json-lint.js') require('codemirror/addon/selection/active-line.js') export default CodeMirror现在页面上css看起来不对，代码内容和行号重叠在一起了，博主有什么建议吗？
什么样的重叠？能给出一个比较直观的页面吗？
谢谢你，我也遇到了这问题，你的方案很优雅
能把方案分享下么
初始化editor那里 不太明白，能详解一下吗 谢谢
222