前端插件库之vue3使用vue-codemirror插件

最新推荐文章于 2024-04-29 14:02:05 发布
最新推荐文章于 2024-04-29 14:02:05 发布
阅读量5.6k 收藏 7
点赞数
分类专栏： 面试 阿里巴巴 文章标签： android 前端 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54883970/article/details/126080987
版权

vue3插件vue-codemirror使用步骤和实例

vue-codemirror

基于 CodeMirror ，适用于 Vue 的 Web 代码编辑器。

使用

1.命令行安装

npm install vue-codemirror --save
// cnpm install vue-codemirror --save

如果运行官网例子时, 报错:

@codemirror/lang-javascript
@codemirror/theme-one-dark

可以在终端中安装对应文件, 解决问题

npm i  @codemirror/lang-javascript
npm i  @codemirror/theme-one-dark

2.在需要的组件中配置

<templat
最低0.47元/天 解锁文章
m0_54883970
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
在vue项目中使用codemirror插件实现代码编辑器功能
01-19
在vue项目中使用codemirror插件实现代码编辑器功能（代码高亮显示及自动提示），具体内容如下所示： 1、使用npm安装依赖 npm install --save codemirror; 2、在页面中放入如下代码 <textarea ref=mycode class...
在vite5和vue3开发环境中使用jodit4富文本编辑器，并添加自定义插件和使用highlight.js实现代码块高亮（附其他自定义配置项和全部代码）
超小少的博客
01-17 1121
在vite5和vue 3中的开发环境使用jodit 4富文本编辑器，并添加自定义插件和使用highlight.js实现代码块高亮，还有其他配置：标签属性配置（createAttributes: ）、字体、字号、图片上传、中文显示（i18n）等等。附上全部代码
vue3 codemirror yaml文件编辑器插件
村长在路上
02-09 876
需求：前端编写yaml配置文件 ，检查yaml语法 提供语法高亮。
【vue3+ts版】使用Codemirror
最新发布
weixin_46210899的博客
04-29 493
【vue3+ts版】使用Codemirror实例
Vue3项目中在线编辑组件，codemirror-editor-vue3
zhang_zan
05-08 2721
codemirror-editor-vue3
vue3+TS使用Codemirror插件实现浏览器的多功能文本编辑器
m0_68804724的博客
03-17 2818
Codemirror
Vue3使用codemirror
bingbingyihao的博客
03-24 2035
Vue3使用codemirror（在线编辑器Demo）
在vue3中使用codemirror
m0_53062835的博客
04-08 6673
在vue3中使用codemirror，浅介绍
vue使用codemirror的两种用法
01-21
代码显示这里用的是vue-codemirror插件。 第一种用法： 1、安装：npm install vue-codemirror --save 2、在main.js中引入 import VueCodeMirror from 'vue-codemirror' import 'codemirror/lib/codemirror.css' ...
vue中使用codemirror的实例详解
12-01
这篇文章在vue里使用codemirror...import { codemirror } from 'vue-codemirror' 　import 'codemirror/lib/codemirror.css' 　Vue.use(VueCodemirror) 再到组件中使用　 import { codemirror } from 'vue-codemirro
vue2-codemirror-lite-js:V适用于Vue.js 2.x的轻量级CodeMirror组件（仅通过JSHINT插入JS的JS）
05-15
Vue2 Codemirror Lite 2.x的组件，仅配置为linting和js模式，以保持轻便。动机对于仅将CodeMirror用于JavaScript的应用程序，可以通过消除...入门正在安装npm install vue2-codemirror-lite-js --save # yarn add vue
在vue里使用codemirror遇到的问题
10-17
主要介绍了在vue里使用codemirror遇到问题，本文给大家记录下来了,需要的朋友可以参考下
vue实现codemirror代码编辑器中的SQL代码格式化功能
10-16
主要介绍了vue实现codemirror代码编辑器中的SQL代码格式化功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
codemirror-plugin:用于CodeMirror Web编辑器的Emmet插件
05-03
如何使用该扩展可以作为常规的npm模块安装： npm i @emmetio/codemirror-plugin该软件包有两种形式：独立的浏览器捆绑包和可在您的应用程序中使用的ES / CommonJS模块。 如果您要构建应用程序，则可以使用以下扩展...
codeMirror插件使用讲解
11-28
codeMirror是一款十分强大的代码编辑插件，提供了十分丰富的API，最近在项目中用到了这款插件，于是在这里给大家分享下使用方法和心得： codeMirror调用非常方便 首先在页面中载入插件CSS及JS文件 <link href=...
【前端插件库】Vue.js 使用 vue-codemirror 插件
day day up
01-03 2536
VUE3 插件 vue-codemirror 使用步骤和实例、基于 CodeMirror ，适用于 Vue 的 Web 代码编辑器。
vue3中使用codemirror6增加代码提示功能
qq_30959781的博客
04-04 4661
/ 安装codemirror、语言包、主题、自动补全。
vue3脚本绑定CodeMirror的使用
qq_46617584的博客
07-07 1589
codeMirror组件。
vue3封装codemirror
05-02
封装 CodeMirror 可以让我们在 Vue 中更方便地使用它，以下是一个简单的封装示例： 1. 安装 CodeMirror ```bash npm install codemirror ``` 2. 创建 Codemirror.vue 组件 ```html <template> <div> <textarea ref="textarea"></textarea> </div> </template> <script> import CodeMirror from 'codemirror' export default { name: 'Codemirror', props: { value: { type: String, default: '' }, options: { type: Object, default: () => ({}) } }, mounted() { this.cm = CodeMirror.fromTextArea(this.$refs.textarea, this.options) this.cm.on('change', this.handleChange) this.cm.setValue(this.value) }, beforeUnmount() { this.cm.off('change', this.handleChange) this.cm.toTextArea() }, methods: { handleChange() { this.$emit('input', this.cm.getValue()) } } } </script> ``` 3. 在需要使用的组件中引入 Codemirror 组件 ```html <template> <div> <Codemirror v-model="code" :options="options" /> </div> </template> <script> import Codemirror from './Codemirror.vue' import 'codemirror/lib/codemirror.css' import 'codemirror/theme/material.css' import 'codemirror/mode/javascript/javascript' export default { name: 'App', components: { Codemirror }, data() { return { code: `function sayHello() {\n console.log('Hello, world!')\n}`, options: { mode: 'javascript', theme: 'material', lineNumbers: true } } } } </script> ``` 以上示例中，我们封装了一个名为 Codemirror 的组件，它接受两个 props：value 和 options。value 表示 CodeMirror 的值，options 表示 CodeMirror 的选项。在组件中，我们使用了 CodeMirror.fromTextArea() 方法创建 CodeMirror 实例，并将其挂载到组件的 textarea 上。当值发生变化时，我们使用 v-model 语法糖和 $emit() 方法将值传递给父组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值