在线代码编辑器利器-codeMirror

Doyle 发布于2019-08-23 17:13 / 1172人阅读

摘要：说明是一款十分强大的代码编辑插件，提供了十分丰富的，最近在项目中用到了这款插件，做一个记录。

说明

codeMirror是一款十分强大的代码编辑插件，提供了十分丰富的API，最近在项目中用到了这款插件，做一个记录。

官网

github地址

安装

下载安装包在github上直接download 或者 clone

npm 安装

    npm install --save  codemirror

引入

*手动引入外部的

 // 必要
 // 必要
 // 在线编辑的语言 sql
 // 在线编辑的语言 javascript

*npm引入（vue项目中）

import "codemirror/lib/codemirror.css" //必要
const CodeMirror = require("codemirror/lib/codemirror") // 必要
require("codemirror/mode/sql/sql") // 在线编辑的语言 sql
require("codemirror/addon/display/placeholder") // 需要使用placeholder属性

使用

基本使用

获取输入内容 this.myCodeMirror.getValue()

获取选中内容 this.myCodeMirror.getSelection()

说明

官网提供了十分丰富的API，当有什么问题是在github上提问，作者回复的也很快，非常好用，赞一个

私有云服务器托管在线网页代码编辑器 html代码在线编辑器服务器在线代码编辑 CodeMirror

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104009.html

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

摘要：项目地址为了减少打包后的体积，所有的语言模式和插件在默认的情况下没有加载要使用它们见本地运行实例编辑器的值传递给实例的配置选项前往查看更多可用选项中包含了许多的语言模式默认情况下所有 Vue-Codemirror-Lite 项目地址：https://github.com/cnu4/vue-codemirror-lite CodeMirror Component For Vue.js (...

sushi 2019-08-20 13:47 评论0 收藏0
如何制作一款在线编译器

摘要：在文章开始之前先展示一下我自己做的在线编译器点此预览大概三四个月之前我开始有了制作在线编译器的想法，在此之前我接触过很多的在线编译器，如等，这些都非常优秀且有着庞大的用户群体的编译器。是一个用于浏览器的实现的多功能文本编辑器。在文章开始之前先展示一下我自己做的在线编译器 JS-Encoder: 点此预览 showImg(https://i.loli.net/2019/07/21/5d...

Alan 2019-08-26 10:14 评论0 收藏0
在线代码编辑器 Codemirror 的轻量级 React 组件

代码编辑器 CodeMirror 的轻量级 React 组件 demo @uiw-react.github.io/react-codemirror/ showImg(https://segmentfault.com/img/bVbdKMK?w=1040&h=825); 特性:

canopus4u 2019-08-22 18:42 评论0 收藏0
js拖拽粘贴上传与CodeMirror

摘要：属性介绍默认是默认是在粘贴操作时为空剪切板中的各项数据剪切板中的数据类型。避免重复创建上传中文件成功失败处理已上传上传出错添加文件到队列并上传开始上传其他参考获取剪切板内容，控制图片粘贴在线代码编辑器事件说明 Markdown编辑器选用https://simplemde.com它是一款纯js实现的markdown编辑器。缺点不支持图片上传。那我们就得改造它。simplemde是基于co...

FullStackDeveloper 2019-08-20 12:09 评论0 收藏0
Javascript codemirror 高级应用

摘要：可能是在环境或者直接在浏览器的控制台中进行调试。阮老师的代码传送门在此这个代码的演示程序，如下图所示本系统的特点系统采用进行开发的。搭建javascript在线IDE 项目地址 github:https://github.com/sixtrees/j... 这两天在看阮一峰的《ES6标准入门》，对其中涉及到的代码示例部分，感觉到很不方便，不知道阮老师是如何进行代码调试的。可能是在no...

DesGemini 2019-08-23 11:28 评论0 收藏0