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>

标签: none

已有 10 条评论

  1. zzt zzt

    谢谢,不错的引入方式。

  2. 片风 片风

    我看了sql语句美化的在线工具,想请教一下怎么实现的,关于sql语句解析我没有找到类似的组件可以把sql语句格式化的,望不吝赐教,感谢!

    1. java的druid 或者 python的sql-parser 或者 自己写sql词法语法分析器

  3. surmon surmon

    npm install vue-codemirror
    试试这个吧

  4. unknown unknown

    想问下博主,如果要在组件内声明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看起来不对,代码内容和行号重叠在一起了,博主有什么建议吗?

    1. 什么样的重叠?能给出一个比较直观的页面吗?

  5. 谢谢你,我也遇到了这问题,你的方案很优雅

    1. liangshao liangshao

      能把方案分享下么

    2. jesse jesse

      初始化editor那里 不太明白,能详解一下吗 谢谢

  6. 11 11

    222

添加新评论