背景
前端开发离不开代码编辑器，而市面上已经有许多优秀的代码编辑器可以供选择，比如 Sublime Text、Visual Studio Code、Atom 等。
但是，如果你想在自己的项目中嵌入一个简洁轻巧、易于扩展的代码编辑器，可能需要一些额外的工作。这时，npm 包 @d6k/eigen-editor 可以帮助你实现这个目标。
本文将介绍如何在项目中使用 @d6k/eigen-editor 这个 npm 包。
安装
可以通过 npm 安装 @d6k/eigen-editor：
npm install --save @d6k/eigen-editor
使用
1. 基础使用
在项目中引入 @d6k/eigen-editor：
import EigenEditor from '@d6k/eigen-editor'
const editor = new EigenEditor()
editor.mount(document.getElementById('editor-wrapper'))上述代码会将 @d6k/eigen-editor 渲染到指定的容器中。
2. 自定义代码高亮
如果你需要对特定代码语言的语法进行高亮，可以自定义一个高亮配置对象：
-- -------------------- ---- -------
------ ----------- ---- -------------------
----- --------------- - -
--------- ------ ------- -------- ------ -------- ------------
---------- ----- ---- ---- ---- ---- ---- ---- -------
------- -
-------- -------
--------- ------
-
-
----- ------ - --- -------------
---------------
--
-------------------------------------------------------3. 绑定代码改变事件
可以使用 editor.on('change', yourHandlerFunc) 对代码改变进行监听：
-- -------------------- ---- ------- ------ ----------- ---- ------------------- ----- ------ - --- ------------- ------------------- ------ -- - ----------------- -- -------------------------------------------------------
4. 设置代码
可以调用 editor.setCode(string) 方法设置代码内容：
import EigenEditor from '@d6k/eigen-editor'
const editor = new EigenEditor()
editor.setCode('console.log("hello world")')
editor.mount(document.getElementById('editor-wrapper'))5. 更多配置
@d6k/eigen-editor 还提供了更多配置选项，可以在创建 EigenEditor 实例时传入：
-- -------------------- ---- ------- - ---------------- -- --------------- ------ ---------- -- -------- -------------------------------------- ----------- ----- -- -------- ------------------ ----- -- -------- ------------ ----- -- ------ ------------ ----- -- ------ --------- --- -- ---- ------------ ------- -- ---- --------- ----- -- ---- -
结语
@d6k/eigen-editor 是一个简单易用、功能强大的代码编辑器，你可以使用它来搭建自己的在线代码编辑器，或者在自己的项目中使用它来提供代码编辑功能。
同时，本文也介绍了如何基本使用、自定义代码高亮、绑定代码改变事件、设置代码以及更多配置选项的使用方法。希望可以对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcf967216659e244d93