国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

手把手教你搭建網頁代碼編輯器

Julylovin / 3187人閱讀

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

CodeMirror

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

使用方法 瀏覽器

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

如下，我們創建一個編輯 javascript 代碼的編輯器：




  
  
  
  
  
  Document

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

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

指定父級元素創建編輯器

如下代碼，CodeMirror 會創建一個編輯器，插入到 body 節點下。
模塊打包用法

我們可以通過 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)

編輯器時間監聽。

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

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 官網。

本章完

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

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97472.html

相關文章

  • 手把手教你搭建網頁代碼編輯器

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

    ranwu 評論0 收藏0

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

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

    Richard_Gao 評論0 收藏0

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

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

    LeviDing 評論0 收藏0

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

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

    Charles 評論0 收藏0

發表評論

0條評論

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