Vue-Codemirror-Lite: 在线代码编辑器 Codemirror 的轻量级 Vue.js 组件

最新推荐文章于 2024-08-16 09:28:44 发布
最新推荐文章于 2024-08-16 09:28:44 发布
阅读量2.2k 收藏 1
点赞数
文章标签： javascript webpack ViewUI
原文链接：https://segmentfault.com/a/1190000008136780
版权
Vue-Codemirror-Lite 是一个支持 Vue.js 1.x 和 2.x 的轻量级 CodeMirror 组件。它默认不包含语言模式和插件以减小打包体积，但可以按需安装和配置。项目提供在线Demo，并遵循 MIT 许可。
摘要由CSDN通过智能技术生成

Vue-Codemirror-Lite

项目地址：https://github.com/cnu4/vue-codemirror-lite

CodeMirror Component For Vue.js (support 1.x and 2.x).

Lightweight

为了减少打包后的体积，所有的语言模式和插件在默认的情况下没有加载, 要使用它们,
见 Using Language Modes and Addons.

Demo

Live Demo: https://cnu4.github.io/vue-codemirror-lite

本地运行实例：

npm install && npm run dev

Installation

npm install vue-codemirror-lite

Usage

// Require in Webpack
var Vue = require('vue')
var VueCodeMirror = require('vue-codemirror-lite')

Vue.use(VueCodeMirror)

// Or use as component (ES6)
import Vue from 'vue'
import { c
最低0.47元/天 解锁文章
Joe?
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
js：使用vue-codemirror实现一个语法高亮的网页代码编辑器
彭世瑜的博客
06-22 1426
译文：@vuejs的codemirror代码编辑器组件。完整依赖 package.json。封装一个自定义的编辑器。
vue2-codemirror-lite-js:V适用于Vue.js 2.x的轻量级CodeMirror组件（仅通过JSHINT插入JS的JS）
05-15
Vue2 Codemirror Lite 2.x的组件，仅配置为linting和js模式，以保持轻便。 动机 对于仅将CodeMirror用于JavaScript的应用程序，可以通过消除某些功能，主题和模式来严重减小捆绑包的大小。 这不是功能齐全的CodeMirror插件（这就是为什么它是精简版的）。 如果您正在寻找它，请查看 。 大多数东西都是预先配置的（即模式，主题），但是可以设置其他CodeMirror选项（请参阅 ）。 里面有什么 仅JavaScript模式（不可配置） 通过JSHINT进行处理（捆绑，不可配置） 仅深色主题（略微修改了neo ， 。） 行号，换行 接受其他CodeMirror选项（），但模式，主题和需要附加组件的选项除外。 入门 正在安装 npm install vue2-codemirror-lite-js --save # yarn add vue
Vue-Codemirror-Lite 项目教程
最新发布
gitblog_00486的博客
08-16 674
Vue-Codemirror-Lite 项目教程 vue-codemirror-liteLightweight Codemirror Component for Vue.js项目地址:https://gitcode.com/gh_mirrors/vu/vue-codemirror-lite 1、项目的目录结构及介绍 Vue-Codemirror-Lite 项目的目录结构如下： vue-codem...
vue2 使用代码编辑器插件 vue-codemirror
大家好，我是+V
07-19 1482
之前用过一次，当时用的一知半解的，所以也没有成文，前几天又因为项目有需求，所以说有用了一次，当然，依旧是一知半解，但是还是稍微写一下子吧！万一以后用到，不用满网找资料了，个人学习记录，仅供参考，切勿尽信！
脚本编辑CodeMirror的用法与配置
fu_ycc的博客
12-13 1800
1、npm install vue-codemirror-lite, 安装vue-codemirrir-lite； 2、在需要用到的文件里面引入{codemirror}, codemirror/lib/codemirror.css, 语言：codemirror/mode/python/python.js, 主题样式：codemirror/theme/blackboard.css, codemirr...
Vue CodeMirror Lite 使用教程
gitblog_00313的博客
08-16 630
Vue CodeMirror Lite 使用教程 vue-codemirror-liteLightweight Codemirror Component for Vue.js项目地址:https://gitcode.com/gh_mirrors/vu/vue-codemirror-lite 项目介绍 Vue CodeMirror Lite 是一个轻量级的 CodeMirror 组件，专为 Vue...
vue使用codemirror的两种用法
10-16
主要介绍了在vue里使用codemirror的两种用法,每种方法通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue实现codemirror代码编辑器中的SQL代码格式化功能
10-16
CodeMirror是一个非常流行的、支持多种语言的开源代码编辑器，而SQL代码格式化功能能够帮助开发者更加清晰地查看和编辑SQL代码。本文将详细介绍如何在Vue应用中集成CodeMirror，并利用sql-formatter插件实现SQL代码...
在vue项目中使用codemirror插件实现代码编辑器功能
10-16
本文将详细介绍如何使用`codemirror`插件在Vue中创建一个具备代码高亮显示和自动提示功能的代码编辑器。 首先，我们需要通过npm安装`codemirror`依赖库，命令如下： ```bash npm install --save codemirror ``` ...
react html编辑器,在线代码编辑器 Codemirror 的轻量级 React 组件
weixin_35660371的博客
06-20 422
代码编辑器 CodeMirror 的轻量级 React 组件 demo @uiw-react.github.io/react-codemirror/特性:???? 自动根据 mode 配置加载 mode 文件。???? 快速简单的配置 API。安装npm install @uiw/react-codemirror --save使用import CodeMirror from '@uiw/react-codem...
vue中使用codemirror的实例详解
10-17
主要介绍了vue中使用codemirror的实例教程，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
Vue-Code-Editor
03-14
巴卡拉拉卡 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
vue-code-mirror 的使用
aithena的博客
09-16 1774
import Vue from 'vue' import vueQuillEditor from 'vue-quill-editor' import vueCodeMirror from 'vue-codemirror-lite' import App from './App.vue' import router from './router' import '@/assets/css/com...
Vue2 安装使用代码编辑器 vue-codemirror
zhichaogong的博客
04-28 1724
Vue2 如何安装使用代码编辑器 vue-codemirror
分享一个vue2的代码高亮编辑器vue-codemirror@4.0.6
u014197593的博客
06-12 806
vue-codemirror是我最近项目中使用的一款代码在线编辑器，支持语言范围广、简单、易配置。
通过vue-codemirror和CodeMirror将代码编辑器添加到web项目中
weixin_41897680的博客
10-22 3071
通过vue-codemirror和CodeMirror将代码编辑器添加到web项目中
vue-codemirror使用详细过程（包括修改宽度，更换语言模式，C++模式，HTML模式，括号补全）
热门推荐
laisy334514的博客
10-17 1万+
近期在做一个oj项目，要使用代码编辑器，过程中碰到一些问题，现在记录下步骤。 参考文章：https://blog.csdn.net/senmage/article/details/103742854 大致效果： 1.安装，直接在你的vue项目中使用npm指令 npm install vue-codemirror --save 2.引入和参数配置，这里直接参考https://blog.csdn.net/senmage/article/details/103742854 （先都按照参考文章..
vue-codemirror6—基于vue的代码在线编辑，代码实现
06-09
首先，你需要在你的Vue项目中安装`vue-codemirror6`依赖： ``` npm install vue-codemirror6 ``` 然后，在你的Vue组件中引入`vue-codemirror6`组件，并将其注册为局部组件： ```vue <template> <div> <codemirror v-model="code" :options="editorOptions"></codemirror> </div> </template> <script> import { codemirror } from 'vue-codemirror6' import 'codemirror/lib/codemirror.css' import 'codemirror/theme/material.css' import 'codemirror/mode/javascript/javascript' export default { components: { codemirror }, data () { return { code: '', editorOptions: { tabSize: 2, mode: 'javascript', theme: 'material' } } } } </script> ``` 在上述代码中，我们引入了`vue-codemirror6`组件，并将其命名为`codemirror`，然后在`components`中注册。我们设置了一个`data`对象，其中包含了`code`和`editorOptions`属性，分别用于存储用户输入的代码和编辑器的配置项。在模板中，我们使用了`v-model`指令将用户输入的代码和`code`属性进行绑定，使得编辑器中的内容能够实时反映到`code`属性中。同时，我们还将`editorOptions`对象传递给了`codemirror`组件的`options`属性，来自定义编辑器的一些属性，如缩进大小、语言模式和主题等。 上述代码中，我们使用了`javascript`语言模式，你可以根据你的需求选择其他语言模式，例如`html`、`css`或`python`等。同时，我们也引入了`codemirror`的CSS和主题文件，确保编辑器能够正常显示。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值