資訊專欄INFORMATION COLUMN
摘要：如下，我們創(chuàng)建一個(gè)編輯代碼的編輯器上邊的代碼復(fù)制到文件即可運(yùn)行。完整的拓展列表在這里如下示例展示了開(kāi)啟語(yǔ)法糾錯(cuò)直接將代碼復(fù)制到文件即可運(yùn)行當(dāng)然，的功能十分豐富，比如按鍵映射主題定制模式等，更深入的使用可以查閱官網(wǎng)。
CodeMirror
CodeMirror 是一個(gè)可以鑲嵌到 Web 頁(yè)面中代碼編輯器組件。它的核心代碼庫(kù)僅僅提供了編輯器功能，沒(méi)有提供像是 自動(dòng)補(bǔ)全, 語(yǔ)法糾錯(cuò) 等IDE功能。
CodeMirror 提供了豐富的api，讓你可以輕易的拓展想要的功能。
在瀏覽器中使用的話，你需要引用編輯器核心 js 和 css 文件，每個(gè)編輯器主題對(duì)應(yīng)一個(gè)css文件，你需要引用你所指定的編輯器主題對(duì)應(yīng)的css。每個(gè)編輯器語(yǔ)言對(duì)應(yīng)一個(gè)js文件，需引入你需要編輯的語(yǔ)言對(duì)應(yīng)的js文件。
如下，我們創(chuàng)建一個(gè)編輯 javascript 代碼的編輯器：
Document
上邊的代碼復(fù)制到html文件即可運(yùn)行。從上邊的代碼可以看到，我們使用 CodeMirror.fromTextArea() 創(chuàng)建了一個(gè)編輯器，當(dāng)然還有其他的方法來(lái)創(chuàng)建。
從textarea創(chuàng)建，會(huì)自動(dòng)替換textarea并且獲取textarea的值，填充到編輯器。
指定父級(jí)元素創(chuàng)建編輯器
如下代碼，CodeMirror 會(huì)創(chuàng)建一個(gè)編輯器，插入到 body 節(jié)點(diǎn)下。
模塊打包用法
我們可以通過(guò) Webpack 來(lái)打包使用 codemirror。
先通過(guò) npm 下載codemirror：
npm i codemirror
引用 codemirror 所需要的 js 和 css 文件：
const CodeMirror = require("codemirror"); // 編輯器主邏輯文件
require("codemirror/mode/javascript/javascript.js"); // 編輯器支持 javascript
require("codemirror/lib/codemirror.css"); // 編輯器主樣式文件
require("codemirror/theme/material.css"); // 編輯器主題樣式文件
CodeMirror(document.body, {
value: "console.log("codemirror")",
mode: "javascript",
theme: "material"
});
簡(jiǎn)單常用的api
在我們使用 CodeMirror 搭建編輯器之后，可能會(huì)用到下面一些簡(jiǎn)單的api。詳細(xì)的api列表在這里：api list.
getValue()
獲取編輯器當(dāng)前的值。
const editor = CodeMirror(document.body);
function getEditorValue() {
return editor.getValue();
}
setValue(value: String)
改變編輯器的值。
const editor = CodeMirror(document.body);
function setEditorValue(value) {
editor.setValue(value);
}
on(eventName: String, handler: Function)
編輯器時(shí)間監(jiān)聽(tīng)。
支持豐富的event類型，完整的event 類型你可以在這里查閱：event list。比如，我們可以監(jiān)聽(tīng)編輯器內(nèi)容改變，當(dāng)編輯器內(nèi)容改變時(shí)，輸出編輯器的內(nèi)容：
const editor = CodeMirror(document.body);
editor.on("change", (codemirrorIns, codemirrorObj) => {
console.log(editor.getValue());
});
IDE拓展
CodeMirror 支持豐富的IDE拓展，這些拓展放在 codemirror/addon文件夾下。我們可以通過(guò)引入該文件夾下的IDE文件，從而讓我們編輯器的功能更加豐富。完整的IDE拓展列表在這里：addon list.
如下示例展示了開(kāi)啟javascript語(yǔ)法糾錯(cuò)：(直接將代碼復(fù)制到html文件即可運(yùn)行)
Document
當(dāng)然，CodeMirror 的功能十分豐富，比如 按鍵映射、主題定制、Vim模式等，更深入的使用可以查閱 CodeMirror 官網(wǎng)。
本章完
我的Github: https://github.com/PengJiyuan
我的博客: https://isweety.me
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/54593.html
摘要：如下，我們創(chuàng)建一個(gè)編輯代碼的編輯器上邊的代碼復(fù)制到文件即可運(yùn)行。完整的拓展列表在這里如下示例展示了開(kāi)啟語(yǔ)法糾錯(cuò)直接將代碼復(fù)制到文件即可運(yùn)行當(dāng)然，的功能十分豐富，比如按鍵映射主題定制模式等，更深入的使用可以查閱官網(wǎng)。 CodeMirror CodeMirror 是一個(gè)可以鑲嵌到 Web 頁(yè)面中代碼編輯器組件。它的核心代碼庫(kù)僅僅提供了編輯器功能，沒(méi)有提供像是 自動(dòng)補(bǔ)全, 語(yǔ)法糾錯(cuò) 等IDE...
摘要：輕量應(yīng)用服務(wù)器是阿里云面向入門級(jí)云計(jì)算及簡(jiǎn)單應(yīng)用用戶，提供基于單臺(tái)云服務(wù)器的域名管理應(yīng)用部署安全和運(yùn)維管理的一站式綜合服務(wù)。輕量應(yīng)用服務(wù)器，是可快速搭建且易于管理的輕量級(jí)云服務(wù)器。上傳至云服務(wù)器，用或者都可以。總結(jié)一下使用wordpress搭建個(gè)人博客的三大步驟： 1.購(gòu)買阿里云服務(wù)器 2.選擇安裝wordpress鏡像操作系統(tǒng) 3.安裝配置wordpress 4.購(gòu)買域名，配置域名...
摘要：前端的發(fā)展真的是快，前幾年還是刀耕火種的開(kāi)個(gè)編輯器，幾行和代碼就能上瀏覽器跑了。是啥官方的解釋是基于流的自動(dòng)化構(gòu)建工具。把運(yùn)動(dòng)的半成品看成是數(shù)據(jù)，那么流動(dòng)的數(shù)據(jù)就是流。分工明確才能提高效率，這是社會(huì)發(fā)展的經(jīng)驗(yàn)總結(jié)。 前端的發(fā)展真的是快，前幾年還是刀耕火種的開(kāi)個(gè)編輯器，幾行html和js代碼就能上瀏覽器跑了。現(xiàn)在呢？各種包，各種庫(kù)，各種框架，各種編程范式。究其原因，就是我們高中社會(huì)課本中...
摘要：前言一直以來(lái)，因?yàn)闃?biāo)準(zhǔn)應(yīng)用方式是配合或使用，而被認(rèn)為不適合做服務(wù)化后端。下面我就介紹如何用來(lái)搭建一個(gè)高性能的服務(wù)化后端框架，并且實(shí)現(xiàn)一個(gè)客戶端調(diào)用例子。服務(wù)端我使用的框架叫，地址在這里。 前言 一直以來(lái)，PHP 因?yàn)闃?biāo)準(zhǔn)應(yīng)用方式是配合 php-fpm 或 apache mod 使用，而被認(rèn)為不適合做服務(wù)化后端。但是隨著 Workerman 和 Swoole 這些常駐進(jìn)程模塊的出現(xiàn)，PH...
閱讀 3170·2021-09-10 10:51
閱讀 3351·2021-08-31 09:38
閱讀 1639·2019-08-30 15:54
閱讀 3129·2019-08-29 17:22
閱讀 3214·2019-08-26 13:53
閱讀 1960·2019-08-26 11:59
閱讀 3283·2019-08-26 11:37
閱讀 3308·2019-08-26 10:47
