代码编辑器

本文使用的是第三方代码编辑器 vue-codemirror (opens new window)

效果

安装

Node

npm install vue-codemirror

浏览器

<link rel="stylesheet" href="https://unpkg.com/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="https://unpkg.com/codemirror/theme/monokai.css">
<script type="text/javascript" src="https://unpkg.com/codemirror/lib/codemirror.js"></script>
<script type="text/javascript" src="https://unpkg.com/codemirror/mode/javascript/javascript.js"></script>
<script type="text/javascript" src="https://unpkg.com/vue-codemirror/dist/vue-codemirror.js"></script>

导入

Node

import VueCodemirror from 'vue-codemirror'

// language
import 'codemirror/mode/javascript/javascript.js'
// theme css
import 'codemirror/theme/monokai.css'

浏览器

var VueCodemirror = window.VueCodemirror;

挂载

Vue.use(VueCodemirror);

生成

fApi = formCreate.create([
    {
        type:'codemirror',
        field:'code',
        props:{
            options:{
                tabSize: 4,
                mode: 'text/javascript',
                theme: 'monokai',
                lineNumbers: true,
                line: true,
            }
        },
        value:`a = formCreate.create([
             {type:'codemirror',field:'code',props:{options:{
                 // codemirror options
                 tabSize: 4,
                 mode: 'text/javascript',
                 theme: 'monokai',
                 lineNumbers: true,
                 line: true,
                 // more codemirror options, 更多 codemirror 的高级配置...
               }}, value:'let fApi = formCreate.create([])'}
         ])`
    }
])