HTML在线代码编译与预览(基于vue-codemirror)

成果图

在这里插入图片描述
大家可以看到在这个成果图内,左边会有一个代码框,用来写代码,右边会实时的更新左边代码实现出来的内容。
在代码框内,会如同VScode等代码编译器一样,不同的关键字有不同的颜色,不会说是全都是黑色,就如同真正的代码编译器一样,而且左边会显示行数,选中会有选中的颜色。

那么我这是如何做到的呢

代码编译器(vue-codemirror)

这是一个代码编译器的组件,他的官方网站在这里

https://www.npmjs.com/package/vue-codemirror

使用的话
需要先安装
npm install vue-codemirror --save

然后在调用处引入

import { codemirror } from 'vue-codemirror'
// 核心样式
import 'codemirror/lib/codemirror.css'
// 引入主题后还需要在 options 中指定主题才会生效
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/mode/css/css.js'
import 'codemirror/mode/vue/vue.js'
import './setting.js'

setting.js里面包含了一些主题文件,我的是这样的

import 'codemirror/lib/codemirror.css'
// require active-line.js
import 'codemirror/addon/selection/active-line.js'
// styleSelectedText
import 'codemirror/addon/selection/mark-selection.js'
// hint
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/sql-hint.js'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/javascript-hint.js'
// highlightSelectionMatches
import 'codemirror/addon/scroll/annotatescrollbar.js'
import 'codemirror/addon/search/matchesonscrollbar.js'
import 'codemirror/addon/search/match-highlighter.js'
// keyMap
import 'codemirror/mode/clike/clike.js'
import 'codemirror/mode/sql/sql.js'
import 'codemirror/addon/edit/matchbrackets.js'
import 'codemirror/addon/comment/comment.js'
import 'codemirror/addon/dialog/dialog.js'
import 'codemirror/addon/dialog/dialog.css'
import 'codemirror/addon/search/searchcursor.js'
import 'codemirror/addon/search/search.js'
import 'codemirror/keymap/sublime.js'
// foldGutter
import 'codemirror/addon/fold/foldgutter.css'
import 'codemirror/addon/fold/brace-fold.js'
import 'codemirror/addon/fold/comment-fold.js'
import 'codemirror/addon/fold/foldcode.js'
import 'codemirror/addon/fold/foldgutter.js'
import 'codemirror/addon/fold/indent-fold.js'
import 'codemirror/addon/fold/markdown-fold.js'
import 'codemirror/addon/fold/xml-fold.js'
// 编辑的主题文件
import 'codemirror/theme/monokai.css'
import 'codemirror/theme/base16-light.css'

然后声明这个编译器

  <codemirror  id="editor" v-model="code" :options="options"></codemirror>

他的配置信息

      code: 'Hello World!', // 编辑器绑定的值
      // 默认配置
      options: {
        tabSize: 2, // tab
        styleActiveLine: true, // 高亮选中行
        lineNumbers: true, // 显示行号
        styleSelectedText: true,
        line: true,
        foldGutter: true, // 块槽
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
        highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true }, // 可以启用该选项来突出显示当前选中的内容的所有实例
        mode: 'text/html',
        // hint.js options
        hintOptions: {
          // 当匹配只有一项的时候是否自动补全
          completeSingle: false
        },
        // 快捷键 可提供三种模式 sublime、emacs、vim
        keyMap: 'sublime',
        matchBrackets: true,
        showCursorWhenSelecting: true,
        theme: 'monokai', // 主题
        extraKeys: { 'Ctrl': 'autocomplete' } // 可以用于为编辑器指定额外的键绑定,以及keyMap定义的键绑定
      }

这里需要注意的是,如果你没指定文字左对齐,他的代码内容就会中间对齐,想更改的话,在他的容器的样式里面改就可以,比如

    #editor {
      text-align: left;
      width: 30%;
      height: 100%;
    }

显示代码编辑器内的内容(iframe)

 <section id="preview">
   <iframe id="frame" frameborder="0"></iframe>
 </section>

然后监听代码编辑器里面的内容,就是下图这个属性

在这里插入图片描述
然后将他的内容放到右边的容器内,就完成了

  watch: {
    code: {
      handler: function (newval) {
        const frame = document.querySelector('#frame')
        frame.contentWindow.document.open()
        frame.contentWindow.document.write(newval)
      }
    }
  },
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值