成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

手把手教你搭建網(wǎng)頁代碼編輯器

Julylovin / 3197人閱讀

摘要：如下，我們創(chuàng)建一個編輯代碼的編輯器上邊的代碼復制到文件即可運行。完整的拓展列表在這里如下示例展示了開啟語法糾錯直接將代碼復制到文件即可運行當然，的功能十分豐富，比如按鍵映射主題定制模式等，更深入的使用可以查閱官網(wǎng)。

CodeMirror

CodeMirror 是一個可以鑲嵌到 Web 頁面中代碼編輯器組件。它的核心代碼庫僅僅提供了編輯器功能，沒有提供像是 自動補全, 語法糾錯 等IDE功能。
CodeMirror 提供了豐富的api，讓你可以輕易的拓展想要的功能。

使用方法 瀏覽器

在瀏覽器中使用的話，你需要引用編輯器核心 js 和 css 文件，每個編輯器主題對應一個css文件，你需要引用你所指定的編輯器主題對應的css。每個編輯器語言對應一個js文件，需引入你需要編輯的語言對應的js文件。

如下，我們創(chuàng)建一個編輯 javascript 代碼的編輯器：




  
  
  
  
  
  Document

上邊的代碼復制到html文件即可運行。從上邊的代碼可以看到，我們使用 CodeMirror.fromTextArea() 創(chuàng)建了一個編輯器，當然還有其他的方法來創(chuàng)建。

從textarea創(chuàng)建，會自動替換textarea并且獲取textarea的值，填充到編輯器。

指定父級元素創(chuàng)建編輯器

如下代碼，CodeMirror 會創(chuàng)建一個編輯器，插入到 body 節(jié)點下。
模塊打包用法

我們可以通過 Webpack 來打包使用 codemirror。

先通過 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"
});
簡單常用的api

在我們使用 CodeMirror 搭建編輯器之后，可能會用到下面一些簡單的api。詳細的api列表在這里：api list.

getValue()

獲取編輯器當前的值。

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)

編輯器時間監(jiān)聽。

支持豐富的event類型，完整的event 類型你可以在這里查閱：event list。比如，我們可以監(jiān)聽編輯器內(nèi)容改變，當編輯器內(nèi)容改變時，輸出編輯器的內(nèi)容：

const editor = CodeMirror(document.body);

editor.on("change", (codemirrorIns, codemirrorObj) => {
  console.log(editor.getValue());
});
IDE拓展

CodeMirror 支持豐富的IDE拓展，這些拓展放在 codemirror/addon文件夾下。我們可以通過引入該文件夾下的IDE文件，從而讓我們編輯器的功能更加豐富。完整的IDE拓展列表在這里：addon list.

如下示例展示了開啟javascript語法糾錯：(直接將代碼復制到html文件即可運行)




  
  
  
  
  
  
  Document

當然，CodeMirror 的功能十分豐富，比如 按鍵映射、主題定制、Vim模式等，更深入的使用可以查閱 CodeMirror 官網(wǎng)。

本章完

我的Github: https://github.com/PengJiyuan
我的博客: https://isweety.me

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

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

相關(guān)文章

  • 手把手教你搭建網(wǎng)頁代碼編輯器

    摘要：如下，我們創(chuàng)建一個編輯代碼的編輯器上邊的代碼復制到文件即可運行。完整的拓展列表在這里如下示例展示了開啟語法糾錯直接將代碼復制到文件即可運行當然，的功能十分豐富，比如按鍵映射主題定制模式等，更深入的使用可以查閱官網(wǎng)。 CodeMirror CodeMirror 是一個可以鑲嵌到 Web 頁面中代碼編輯器組件。它的核心代碼庫僅僅提供了編輯器功能，沒有提供像是 自動補全, 語法糾錯 等IDE...

    ranwu 評論0 收藏0

  • 手把手教你如何安裝wordpress，怎么樣搭建個人博客！

    摘要：輕量應用服務(wù)器是阿里云面向入門級云計算及簡單應用用戶，提供基于單臺云服務(wù)器的域名管理應用部署安全和運維管理的一站式綜合服務(wù)。輕量應用服務(wù)器，是可快速搭建且易于管理的輕量級云服務(wù)器。上傳至云服務(wù)器，用或者都可以。總結(jié)一下使用wordpress搭建個人博客的三大步驟： 1.購買阿里云服務(wù)器 2.選擇安裝wordpress鏡像操作系統(tǒng) 3.安裝配置wordpress 4.購買域名，配置域名...

    Richard_Gao 評論0 收藏0

  • Gulp--手把手教你搭建前端自動化平臺

    摘要：前端的發(fā)展真的是快，前幾年還是刀耕火種的開個編輯器，幾行和代碼就能上瀏覽器跑了。是啥官方的解釋是基于流的自動化構(gòu)建工具。把運動的半成品看成是數(shù)據(jù)，那么流動的數(shù)據(jù)就是流。分工明確才能提高效率，這是社會發(fā)展的經(jīng)驗總結(jié)。 前端的發(fā)展真的是快，前幾年還是刀耕火種的開個編輯器，幾行html和js代碼就能上瀏覽器跑了。現(xiàn)在呢？各種包，各種庫，各種框架，各種編程范式。究其原因，就是我們高中社會課本中...

    LeviDing 評論0 收藏0

  • 手把手教你5分鐘用 PHP 搭建一個高性能服務(wù)化后端框架

    摘要：前言一直以來，因為標準應用方式是配合或使用，而被認為不適合做服務(wù)化后端。下面我就介紹如何用來搭建一個高性能的服務(wù)化后端框架，并且實現(xiàn)一個客戶端調(diào)用例子。服務(wù)端我使用的框架叫，地址在這里。 前言 一直以來，PHP 因為標準應用方式是配合 php-fpm 或 apache mod 使用，而被認為不適合做服務(wù)化后端。但是隨著 Workerman 和 Swoole 這些常駐進程模塊的出現(xiàn)，PH...

    Charles 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<