简介
hallo.js
是一个轻量级的 JavaScript 编辑器,可嵌入到网页中。它基于 jQuery 和 ContentEditable 实现,并提供了一些强大的功能,如快捷键、粘贴上传图片等。本文将介绍如何使用 hallo.js
。
安装
使用 npm
安装 hallo.js
:
npm install hallo
使用
引入
在 HTML 中引入 hallo.js
:
<script src="node_modules/hallo/dist/hallo.js"></script>
或者在 ES6 中引入:
import 'hallo';
初始化
使用以下代码在页面上创建一个编辑器:
$('textarea').hallo();
如果你想为编辑器设置一些选项,可以传递一个配置对象作为参数:
-- -------------------- ---- ------- --------------------- -------- - -------------- --- --------------- --- ------------- --- ------------ --- -------------- -- -- -------- ------------------- ---
配置选项
plugins
plugins
是一个对象,包含所有要加载的插件。默认情况下,hallo.js
不会加载任何插件,所以如果你需要使用某个插件,必须手动加载它。每个插件都有自己的配置选项,可以在这里设置。以下是一些常用的插件:
halloformat
:支持加粗、斜体和下划线等文本格式。hallojustify
:支持对齐方式,如左对齐、居中对齐和右对齐。hallolists
:支持无序列表和有序列表。hallolink
:支持添加链接。halloreundo
:支持撤销和重做。
toolbar
toolbar
是一个字符串,指定要使用的工具栏。以下是几个可用的选项:
halloToolbarContextual
:上下文工具栏,只在需要时显示。halloToolbarFixed
:固定位置工具栏,总是显示在编辑器上方。halloToolbarSticky
:粘性工具栏,始终保持在视图顶部。
事件
hallo.js
提供了许多事件,可以用于处理编辑器中发生的各种情况。以下是一些常用的事件:
halloactivated
:当编辑器获得焦点时触发。hallodeactivated
:当编辑器失去焦点时触发。hallomodified
:当编辑器内容被修改时触发。hallotoolbarcreated
:当工具栏被创建时触发。
你可以使用 jQuery 的 .on()
方法来监听这些事件:
$('textarea').on('hallomodified', function() { console.log('Content modified.'); });
示例
以下代码演示如何使用 hallo.js
创建一个简单的编辑器,并在用户输入时实时显示预览:
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------------- ------------ ----- ---------------- ----------------------------------------- ------- ------ --------------------- ---- ------------------- ------- ------------------------------------------------------ ------- ------------------------------------------------ -------- ------------ - --------------------- -------- - -------------- --- ------------------ -- -- -------- ------------------- --- ----------------------- ---------------- ---------- - ---------------------------------------- --- --- --------- ------- ------- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------