vue-codemirror实现一个前端代码在线编辑器，可处理 HTML,VUE,JS,CSS代码在线编辑

先找个目录创建一个vue项目

例如我们想要项目叫 editor 在终端执行

vue create editor

2和3其实都可以但个人建议最近还是2会更稳定一些

在终端执行

npm i codemirror@5 vue-codemirror@4.0.6 @types/codemirror -S

引入依赖包

然后在项目src目录下创建 utils 文件夹里面创建一个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'

然后这边调用组件的代码因为项目也刚创我直接写 src下的 App.vue上啦

<template><div><select name="selectList" v-model="options.mode"><option :value = "'text/html'">HTML</option><option :value = "'text/javascript'">javascript</option><option :value = "'text/css'">css</option></select><codemirror  id="editor" v-model="code" :options="options"></codemirror><button @click = "OutputStructure">输出结构</button></div>
</template><script>
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 './utils/setting.js'export default {components: {codemirror},data () {return {code: '', // 编辑器绑定的值codejava: "",// 默认配置options: {tabSize: 2, // tabstyleActiveLine: true, // 高亮选中行lineNumbers: true, // 显示行号styleSelectedText: true,line: true,foldGutter: true, // 块槽gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true }, // 可以启用该选项来突出显示当前选中的内容的所有实例mode: 'text/html',// hint.js optionshintOptions: {// 当匹配只有一项的时候是否自动补全completeSingle: false},// 快捷键 可提供三种模式 sublime、emacs、vimkeyMap: 'sublime',matchBrackets: true,showCursorWhenSelecting: true,theme: 'monokai', // 主题extraKeys: { 'Ctrl': 'autocomplete' } // 可以用于为编辑器指定额外的键绑定，以及keyMap定义的键绑定},}},methods: {OutputStructure(){console.log(this.code);},},computed: {codemirror() {return this.$refs.myCm.codemirror}},mounted() {}
}
</script>

然后界面就是这样的

现在是一个html模板我们来写两个div什么的

看着也是非常的舒服
然后我们点击上面的下拉框切换成 js

写两行

然后切成css

然后点下面的输出结构就会将代码打印在控制台上

vue-codemirror实现一个前端代码在线编辑器，可处理 HTML,VUE,JS,CSS代码在线编辑相关推荐

html玫瑰花效果代码,html5渲染3D玫瑰花情人节礼物js特效代码
情人节马上就要到来了,这里给程序员前端设计师们献上一个,html5渲染而成的3D玫瑰花js效果,可以作为虚拟的情人节礼物送给自己的爱人.支持html5的浏览器查看. 查看演示下载资源: 16 次下 ...
网页html/js/css错误代码在线检测网站汇总
在用IE浏览网站时,发现下面显示"网页上有错误",虽然不影响浏览,但总归让人感觉不舒服,大概多数站长都遇到过.而如果你的代码基础不是很好的话也许根本找不到办法去解决这个问题,以致 ...
python在线编辑器最新_Editor.md 二次开发-markdown在线编辑器
需求分析经常需要在网络论坛发布文章进行宣传良心工作室最新免费服务,但每个论坛的编写格式存在差异,给发布带来了很大的障碍. 最近markdown格式的兴起,给广大发布者带来了福音,一种文档格式大部分网 ...
WEB端代码文本编辑器ACE的使用指南（附代码）
快速导航一.ACE的介绍二.快速开始 1. package.json引入ace-builds 2. vue页面引入相应script 3. 初始化ace编辑器 4.展示效果三.进阶使用 1. 代码 ...
最全BAT前端开发面试80题：算法+html+js+css！含答案大赠送！
最全前端开发面试题目:包含算法+网络+css面试+js+h5面试题目,尾部有最全BAT前端面试经典77题和答案,想要的就快来领走吧~(领取方式见文末) 一.前端算法面试 1.基本排序的方式冒泡.快排 ...
聊天会话常用JS/CSS代码
滑动到列表底部 <div class="chat-dialog-cont"> <ul class="im-chat-ul"></u ...
【精灵雪花特效】（HTML+JS+CSS+代码+效果）
效果展示其余的效果,大家自己去体验叭! 代码下雪.html <!doctype html> <html> <head> <
css修改代码,网站模板修改中常用到的CSS代码详解
在上一篇文章中,提到了一些修改网站模板中常用到的方法,工具.但其中也牵涉到不到关于CSS样式表的一些知识,对于这些知识,缺乏的还占大多数,今天我就将常用的一些CSS样式表语法整理一下,发出来给大家,希 ...
炫酷科技感黑客感瀑布流html+js+css代码
效果如下代码如下 <!DOCTYPE html><html><head><meta http-equiv="Content-Type" ...

vue-codemirror实现一个前端代码在线编辑器，可处理 HTML,VUE,JS,CSS代码在线编辑

vue-codemirror实现一个前端代码在线编辑器，可处理 HTML,VUE,JS,CSS代码在线编辑相关推荐

最新文章

热门文章