前言

最近项目中有一个需求是，需要添加一个代码编辑器到项目中。也不知道是谁设计的，将代码编辑器添加到项目中？

费了九牛二虎之力终于找到了 vue-codemirror 和 CodeMirror 感觉是最合适的。

看一下官方对这两个库的介绍（插件翻译后的）：

git地址

vue-codemirror： https://github.com/surmon-china/vue-codemirror

codemirror5： https://github.com/codemirror/codemirror5

下面是关于自己使用的一些介绍。

vue-codemirror

安装

安装库

npm install codemirror vue-codemirror --save

安装语言和主题

支持的语言：语言
支持的主题：主题

暂时就安装下面这些

npm install @codemirror/lang-html --save
npm install @codemirror/lang-css --save
npm install @codemirror/lang-javascript --save
npm install @codemirror/lang-sql --save
npm install @codemirror/lang-java --savenpm install @codemirror/theme-one-dark --save

使用

如果需要从codemirror导入API/接口，则需要在package.json里添加如下代码：

"dependencies": {"@codemirror/state": "6.x"
}

import { EditorState } from '@codemirror/state'

demo

<template><codemirrorv-model="code"placeholder="代码编辑...":style="{ height: '400px' ,textAlign: 'left'}":autofocus="true":indent-with-tab="true":tab-size="2":extensions="extensions"@ready="handleReady"@change="log('change', $event)"@focus="log('focus', $event)"@blur="log('blur', $event)"/>
</template><script lang="ts">
import { defineComponent, ref, shallowRef } from 'vue';
// 核心库
import { Codemirror } from 'vue-codemirror';
// 引入的语言包
import { javascript } from '@codemirror/lang-javascript';
// 引入的主题
import { oneDark } from '@codemirror/theme-one-dark';export default defineComponent({components: {Codemirror},setup() {// 默认显示的diamondconst code = ref('');// 扩展，包括语言和主题const extensions = [javascript(), oneDark];// 代码镜像编辑器查看实例引用// 说实话shallowRef还真不知道是vue里的const view = shallowRef();// 准备状态const handleReady = (payload) => {view.value = payload.view;};// 获取状态，状态始终通过Codemirror编辑器视图可用const getCodemirrorStates = () => {const state = view.value.state;const ranges = state.selection.ranges;const selected = ranges.reduce((r, range) => r + range.to - range.from, 0); // 选中的值const cursor = ranges[0].anchor; // 光标const length = state.doc.length; // 代码长度const lines = state.doc.lines; // 行数// 其他状态信息};return {code,extensions,handleReady,log: console.log};}
});
</script>

ctrl + f 快捷键也是支持的

注意： 无法同时添加多个语言和主题，如果添加多个主题和语言用于是前面的生效。我尝试添加了一下html 和 javascript 只能有一个生效（生效是指有代码提示）

属性和事件

属性

modelValue，绑定的值，默认空字符串
autofocus，是否在编辑器挂载之后自动获取焦点，默认否
disabled，是否禁用输入，默认否
indentWithTab，是否按照制表符缩进，默认是
tabSize，按tab键缩进的格数，默认2
placeholder，输入提示语，默认空字符串
style，style样式，默认空对象
autoDestroy，是否在组件卸载之前自动销毁，默认是
extensions，扩展，默认空数组
selection，个人理解应该就是选中的代码
root，个人理解是dom的根节点

事件

change，编辑器内容改变触发的事件
update，状态更新触发的事件
focus，当获取焦点后触发的事件
blur，当失去焦点后触发的事件
ready，当编辑器挂载时触发的事件

codemirror5

看完了基于codemirror5封装的vue-codemirror，我们再看一下codemirror5。还是以vue项目为例子

最新版本好像是6，但是不明白github上为什么是5

安装

安装库

npm install codemirror --save

主题和语言

官方暂时只支持上面哪些语言和主题，还有一些插件可以去github上搜索

另外官方提供了自己开发语言包的案例，如果绝对语言不够，可以自己尝试开发。

参考

参考：https://codemirror.net/examples/

参考官方提供的用例，来学习如何使用

加载

<template><div id="editor"></div>
</template><script setup lang="ts">
import { onMounted, ref } from 'vue';
import { EditorView, basicSetup } from 'codemirror';
import { javascript } from '@codemirror/lang-javascript';const editor = ref();
onMounted(() => {editor.value = new EditorView({extensions: [basicSetup, javascript()],parent: document.getElementById('editor')});
});</script><style lang="scss" scoped>
#editor{// 高度是不生效的width: 600px;height: 600px;text-align: left;
}
</style>

配置

参考官方demo，配置tab缩进

<template><div id="editor"></div>
</template><script setup lang="ts">
import { onMounted, ref } from 'vue';
import { EditorView, basicSetup } from 'codemirror';
import { EditorState, Compartment } from '@codemirror/state';
import { javascript } from '@codemirror/lang-javascript';const view = ref();const tabSize = ref();onMounted(() => {// 创建语言扩展const language = new Compartment();// 创建tab缩进扩展tabSize.value = new Compartment();// 创建编辑器状态const state = EditorState.create({extensions: [basicSetup,language.of(javascript()),tabSize.value.of(EditorState.tabSize.of(8))]});// 获取编辑器试图view.value = new EditorView({state,parent: document.getElementById('editor')});
});// 用于更新tab缩进的方法
const setTabSize = (view, size) => {view.dispatch({effects: tabSize.value.reconfigure(EditorState.tabSize.of(size))});
};
</script>

样式

基础

可以直接定义样式，当然有些样式可能会不生效，这时你可以直接查看源码，来确定具体修改那一块的样式

#editor{width: 600px;text-align: left;background-color: black;color: #fff !important;
}

可以看一下我的这篇文章 vue3：基于highlight实现代码高亮、显示代码行数、添加复制功能，感觉应该是可以实现下面的效果（我自己没有尝试）

官方api
官方提供的改变样式和主题的方式，没太理解。不过问题不大，完全可以查看源码的方式来修改相应的类。

其他例子

其他例子略，感兴趣的可以自行查看。

扩展

除了上面的编辑器外还有下面这两款

https://github.com/ajaxorg/ace ：这个好像是不支持es6的导入，只能通过传统的src加载，感兴趣的可以看看

另一个是 Monaco-Editor 和vscode有很大的关系，但是有点复杂，没搞明白怎么使用

通过vue-codemirror和CodeMirror将代码编辑器添加到web项目中相关推荐

html调用腾讯地图定位当前位置,vue web项目中调用腾讯地图API获取当前位置的经纬度...
vue web项目中调用腾讯地图API获取当前位置的经纬度 vue web项目中调用腾讯地图API获取当前位置的经纬度在main.js 中添加一下代码 import axios from 'axio ...
编写高质量代码改善java程序的151个建议——[110-117]异常及Web项目中异常处理
编写高质量代码改善java程序的151个建议--[110-117]异常及Web项目中异常处理原创地址:http://www.cnblogs.com/Alandre/(泥沙砖瓦浆木匠),需要转载的,保 ...
网页中调用matlab,在C#的Web项目中调用Matlab代码的步骤
在C#的Web项目中调用Matlab代码的方法为了毕设的图形检索方向的研究,本人需要在信科的师兄师姐们已经完成的C#界面中,调用现在研究的算法的Matlab代码,以便看到实验的效果.前段时间已经拖延 ...
CodeMirror 多功能在线代码编辑器
CodeMirror 是一款允许在浏览器中使用的多功能文本编辑器,专用于编辑代码,并附带超过 100 种语言模式和各种插件,可实现高级的代码编辑功能,包括代码高亮显示.功能扩展以及多个主题样式 Cod ...
vue理由设置_在你的下一个Web应用中使用Vue.js的三个理由
Vue.js是那么地易上手,它在提供了大量开箱即用的功能的同时也提供了良好的性能.请继续阅读以下事例及代码片段以便更加了解Vue.js. 选择一个JavaScript框架真是太难了--因为有太多的框架 ...
分享.NET开发中经常使用到的代码片段完全从实际项目中提取出来，也可被反反复复的重复借用...
几年前,一篇<ASP.NET开发人员经常使用的三十三种代码>非常流行,它总结了一些经常在ASP.NET开发中使用到的代码,直接可以拿来使用.今天重读这篇文章,有感而发,善于总结也是进步,于 ...
前端学习（1874）vue之电商管理系统电商系统之处理项目中eslint语法报错
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
每天记录学习的新知识：开源代码是否可以商用在项目中？
开源代码是否可以商用? 是否可以商用? 如何查看许可证是哪个? 什么是 Apache License 2.0 ? 如何使用开源代码? 1.根路径添加 LICENSE 文件 2.根路径添加 NOTICE ...
java代码异常处理会影响性能_编写高质量代码改善java程序的151个建议——[110-117]异常及Web项目中异常处理...
原创地址:http://www.cnblogs.com/Alandre/(泥沙砖瓦浆木匠),需要转载的,保留下! 文章宗旨:Talk is cheap show me the code. 大成若缺,其 ...

通过vue-codemirror和CodeMirror将代码编辑器添加到web项目中

前言

vue-codemirror

安装

使用

属性和事件

codemirror5

安装

参考

加载

配置

样式

其他例子

扩展

通过vue-codemirror和CodeMirror将代码编辑器添加到web项目中相关推荐

最新文章

热门文章