在線代碼編輯器利器-codeMirror

Doyle 發(fā)布于2019-08-23 17:13 / 1350人閱讀

摘要：說(shuō)明是一款十分強(qiáng)大的代碼編輯插件，提供了十分豐富的，最近在項(xiàng)目中用到了這款插件，做一個(gè)記錄。

說(shuō)明

codeMirror是一款十分強(qiáng)大的代碼編輯插件，提供了十分豐富的API，最近在項(xiàng)目中用到了這款插件，做一個(gè)記錄。

官網(wǎng)

github地址

安裝

下載安裝包在github上直接download 或者 clone

npm 安裝

    npm install --save  codemirror

引入

*手動(dòng)引入外部的

 // 必要
 // 必要
 // 在線編輯的語(yǔ)言 sql
 // 在線編輯的語(yǔ)言 javascript

*npm引入（vue項(xiàng)目中）

import "codemirror/lib/codemirror.css" //必要
const CodeMirror = require("codemirror/lib/codemirror") // 必要
require("codemirror/mode/sql/sql") // 在線編輯的語(yǔ)言 sql
require("codemirror/addon/display/placeholder") // 需要使用placeholder屬性

使用

基本使用

獲取輸入內(nèi)容 this.myCodeMirror.getValue()

獲取選中內(nèi)容 this.myCodeMirror.getSelection()

說(shuō)明

官網(wǎng)提供了十分豐富的API，當(dāng)有什么問(wèn)題是在github上提問(wèn)，作者回復(fù)的也很快，非常好用，贊一個(gè)

GPU云服務(wù)器云服務(wù)器在線網(wǎng)頁(yè)代碼編輯器 html代碼在線編輯器服務(wù)器在線代碼編輯 CodeMirror

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104009.html

相關(guān)文章

Vue-Codemirror-Lite: 在線代碼編輯器 Codemirror 的輕量級(jí) Vue.j

摘要：項(xiàng)目地址為了減少打包后的體積，所有的語(yǔ)言模式和插件在默認(rèn)的情況下沒(méi)有加載要使用它們見(jiàn)本地運(yùn)行實(shí)例編輯器的值傳遞給實(shí)例的配置選項(xiàng)前往查看更多可用選項(xiàng)中包含了許多的語(yǔ)言模式默認(rèn)情況下所有 Vue-Codemirror-Lite 項(xiàng)目地址：https://github.com/cnu4/vue-codemirror-lite CodeMirror Component For Vue.js (...

sushi 2019-08-20 13:47 評(píng)論0 收藏0
如何制作一款在線編譯器

摘要：在文章開(kāi)始之前先展示一下我自己做的在線編譯器點(diǎn)此預(yù)覽大概三四個(gè)月之前我開(kāi)始有了制作在線編譯器的想法，在此之前我接觸過(guò)很多的在線編譯器，如等，這些都非常優(yōu)秀且有著龐大的用戶群體的編譯器。是一個(gè)用于瀏覽器的實(shí)現(xiàn)的多功能文本編輯器。在文章開(kāi)始之前先展示一下我自己做的在線編譯器 JS-Encoder: 點(diǎn)此預(yù)覽 showImg(https://i.loli.net/2019/07/21/5d...

Alan 2019-08-26 10:14 評(píng)論0 收藏0
在線代碼編輯器 Codemirror 的輕量級(jí) React 組件

代碼編輯器 CodeMirror 的輕量級(jí) React 組件 demo @uiw-react.github.io/react-codemirror/ showImg(https://segmentfault.com/img/bVbdKMK?w=1040&h=825); 特性:

canopus4u 2019-08-22 18:42 評(píng)論0 收藏0
js拖拽粘貼上傳與CodeMirror

摘要：屬性介紹默認(rèn)是默認(rèn)是在粘貼操作時(shí)為空剪切板中的各項(xiàng)數(shù)據(jù)剪切板中的數(shù)據(jù)類型。避免重復(fù)創(chuàng)建上傳中文件成功失敗處理已上傳上傳出錯(cuò)添加文件到隊(duì)列并上傳開(kāi)始上傳其他參考獲取剪切板內(nèi)容，控制圖片粘貼在線代碼編輯器事件說(shuō)明 Markdown編輯器選用https://simplemde.com它是一款純js實(shí)現(xiàn)的markdown編輯器。缺點(diǎn)不支持圖片上傳。那我們就得改造它。simplemde是基于co...

FullStackDeveloper 2019-08-20 12:09 評(píng)論0 收藏0
Javascript codemirror 高級(jí)應(yīng)用

摘要：可能是在環(huán)境或者直接在瀏覽器的控制臺(tái)中進(jìn)行調(diào)試。阮老師的代碼傳送門(mén)在此這個(gè)代碼的演示程序，如下圖所示本系統(tǒng)的特點(diǎn)系統(tǒng)采用進(jìn)行開(kāi)發(fā)的。搭建javascript在線IDE 項(xiàng)目地址 github:https://github.com/sixtrees/j... 這兩天在看阮一峰的《ES6標(biāo)準(zhǔn)入門(mén)》，對(duì)其中涉及到的代碼示例部分，感覺(jué)到很不方便，不知道阮老師是如何進(jìn)行代碼調(diào)試的。可能是在no...

DesGemini 2019-08-23 11:28 評(píng)論0 收藏0