简介
在前端开发中，我们常常需要编写 HTML、CSS、JavaScript 代码，然而在原生编辑器中，代码高亮、自动补全等功能并不齐全，于是诸多第三方编辑器应运而生，如 Visual Studio Code、Sublime Text 等。本文将向读者介绍一款前端必备神器——npm 包 jarvis_editor，是一个基于 CodeMirror 编辑器封装的非常好用的前端代码编辑器。
安装
npm 包 jarvis_editor 可以通过以下命令进行安装：
--- ------- -------------
安装过程比较简单，安装成功后我们就可以在项目中引入并使用了。
使用
引入
使用 jarvis_editor 前，需要在 HTML 文件中引入相关的 CSS 和 JS 文件，具体方式如下：
------ ----- ---------------- ------------------------------------------------------- -- ------- -------------------------------------------------------------- -------
初始化
引入文件后，我们就可以在 JavaScript 文件中初始化 jarvis_editor 了，以下是最基本的初始化示例：
--- ------ - --- --------------- ---------- ---------- --------- ------------- ---
参数解析：
container：编辑器容器，在 HTML 文件中声明一个 DOM 元素作为容器，例如：<div id="editor"></div>，在初始化的时候传入#editor即可。language：代码语言类型，可选值有：html、javascript、css、xml、julia、markdown等。
通过以上方式，我们就能够得到一个简单的代码编辑器了。
配置
除了基本的初始化外，jarvis_editor 还支持众多配置项，可以满足各类需求，以下是一些常用的配置：
编辑区域大小
--- ------ - --- --------------- ---------- ---------- --------- ------------- ------ ------- ------- -------- ---
自定义主题
--- ------ - --- --------------- ---------- ---------- --------- ------------- ------ ---------- ---
可选的主题有：default、monokai、eclipse、material、dracula、3024-day 等。
隐藏行数
--- ------ - --- --------------- ---------- ---------- --------- ------------- ----------- ------ ---
方法
在创建了编辑器实例后，我们可以通过实例对象调用各种方法进行编程：
setValue
设置编辑器内容。
--- ------ - --- --------------- ---------- ---------- --------- ------ --- --------------------- - ----------------- ------ ----
getValue
获取编辑器内容。
--- ------ - --- --------------- ---------- ---------- --------- ------ --- --- ---- - ------------------
setOption
设置编辑器配置项。
--- ------ - --- --------------- ---------- ---------- --------- ------ --- -------------------------------- ------
getOption
获取编辑器配置项。
--- ------ - --- --------------- ---------- ---------- --------- ------ --- --- ------------ - ---------------------------------
事件
jarvis_editor 同样支持各种事件的监听，以下是一些常用的事件：
change
当编辑器内容发生改变时触发。
--- ------ - --- --------------- ---------- ---------- --------- ------ --- ------------------- -------- ---------- ---------- - --------------------------------- -- --------- ----------------------- -- --------- ---
cursorActivity
当编辑器焦点位置发生改变时触发。
--- ------ - --- --------------- ---------- ---------- --------- ------ --- --------------------------- -------- ---------- - ---------------------------------- -- -------- ---
插件
jarvis_editor 支持插件机制，方便扩展各种功能，例如代码提示、代码高亮、代码折叠等。
官方提供了很多插件，开发者也可以基于开源的 CodeMirror 编辑器编写自己的插件，并集成到 jarvis_editor 中使用。
总结
通过以上介绍，读者可以了解到 jarvis_editor 基本的使用方法、配置方法、方法调用与事件监听以及插件的使用方法等。相信在日常前端开发中，使用 jarvis_editor 能够提高开发效率，强烈建议读者学习并使用 jarvis_editor。
示例代码
完整的示例代码如下：
------
----- ---------------- ------------------------------------------------------- --
------- --------------------------------------------------------------
-------
------
---- ------------------
--------
--- ------ - --- ---------------
---------- ----------
--------- -------------
------ -------
------- --------
------ ----------
----------- -----
------ --------- ------ --- ------------------ --------------
---
------------------- -------- ---------- ---------- -
---------------------------------
---
---------
-------来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600559cb81e8991b448d750a