在線代碼編輯器利器-codeMirror

Doyle 發布于2019-08-23 17:13 / 1343人閱讀

摘要：說明是一款十分強大的代碼編輯插件，提供了十分豐富的，最近在項目中用到了這款插件，做一個記錄。

說明

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上提問，作者回復的也很快，非常好用，贊一個

云服務器 GPU云服務器在線網頁代碼編輯器 html代碼在線編輯器服務器在線代碼編輯 CodeMirror

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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