手把手教你搭建网页代码编辑器

ranwu 发布于2019-08-02 16:04 / 1021人阅读

摘要：如下，我们创建一个编辑代码的编辑器上边的代码复制到文件即可运行。完整的拓展列表在这里如下示例展示了开启语法纠错直接将代码复制到文件即可运行当然，的功能十分丰富，比如按键映射主题定制模式等，更深入的使用可以查阅官网。

CodeMirror

CodeMirror 是一个可以镶嵌到 Web 页面中代码编辑器组件。它的核心代码库仅仅提供了编辑器功能，没有提供像是 自动补全, 语法纠错 等IDE功能。
CodeMirror 提供了丰富的api，让你可以轻易的拓展想要的功能。

使用方法 浏览器

在浏览器中使用的话，你需要引用编辑器核心 js 和 css 文件，每个编辑器主题对应一个css文件，你需要引用你所指定的编辑器主题对应的css。每个编辑器语言对应一个js文件，需引入你需要编辑的语言对应的js文件。

如下，我们创建一个编辑 javascript 代码的编辑器：




  
  
  
  
  
  Document
  


      var myTextArea = document.getElementById("text");
    var editor = CodeMirror.fromTextArea(myTextArea, {
      lineNumbers: true,
      mode: "javascript",
      theme: "material"
    });
    editor.on("change", () => {
      console.log(editor.getValue());
    });

上边的代码复制到html文件即可运行。从上边的代码可以看到，我们使用 CodeMirror.fromTextArea() 创建了一个编辑器，当然还有其他的方法来创建。

从textarea创建，会自动替换textarea并且获取textarea的值，填充到编辑器。

console.log("codemirror!");

指定父级元素创建编辑器

如下代码，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
  


const a =

当然，CodeMirror 的功能十分丰富，比如 按键映射、主题定制、Vim模式等，更深入的使用可以查阅 CodeMirror 官网。

本章完

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

GPU云服务器云服务器手把手教你阿里云服务器搭建商城手把手教你做图像识别在线网页代码编辑器手把手搭建阿里云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54593.html

手把手教你搭建网页代码编辑器

摘要：如下，我们创建一个编辑代码的编辑器上边的代码复制到文件即可运行。完整的拓展列表在这里如下示例展示了开启语法纠错直接将代码复制到文件即可运行当然，的功能十分丰富，比如按键映射主题定制模式等，更深入的使用可以查阅官网。 CodeMirror CodeMirror 是一个可以镶嵌到 Web 页面中代码编辑器组件。它的核心代码库仅仅提供了编辑器功能，没有提供像是自动补全, 语法纠错等IDE...

Julylovin 2019-08-23 11:47 评论0 收藏0
手把手教你如何安装wordpress，怎么样搭建个人博客！

摘要：轻量应用服务器是阿里云面向入门级云计算及简单应用用户，提供基于单台云服务器的域名管理应用部署安全和运维管理的一站式综合服务。轻量应用服务器，是可快速搭建且易于管理的轻量级云服务器。上传至云服务器，用或者都可以。总结一下使用wordpress搭建个人博客的三大步骤： 1.购买阿里云服务器 2.选择安装wordpress镜像操作系统 3.安装配置wordpress 4.购买域名，配置域名...

Richard_Gao 2019-04-24 19:48 评论0 收藏0
Gulp--手把手教你搭建前端自动化平台

摘要：前端的发展真的是快，前几年还是刀耕火种的开个编辑器，几行和代码就能上浏览器跑了。是啥官方的解释是基于流的自动化构建工具。把运动的半成品看成是数据，那么流动的数据就是流。分工明确才能提高效率，这是社会发展的经验总结。前端的发展真的是快，前几年还是刀耕火种的开个编辑器，几行html和js代码就能上浏览器跑了。现在呢？各种包，各种库，各种框架，各种编程范式。究其原因，就是我们高中社会课本中...

LeviDing 2019-08-20 18:26 评论0 收藏0
手把手教你5分钟用 PHP 搭建一个高性能服务化后端框架

摘要：前言一直以来，因为标准应用方式是配合或使用，而被认为不适合做服务化后端。下面我就介绍如何用来搭建一个高性能的服务化后端框架，并且实现一个客户端调用例子。服务端我使用的框架叫，地址在这里。前言一直以来，PHP 因为标准应用方式是配合 php-fpm 或 apache mod 使用，而被认为不适合做服务化后端。但是随着 Workerman 和 Swoole 这些常驻进程模块的出现，PH...

Charles 2019-06-28 18:21 评论0 收藏0