npm 包 froala-editor 使用教程

Froala Editor 是一款功能丰富、易于集成和自定义的 WYSIWYG 编辑器，支持 HTML5 和 Markdown 格式。本文将介绍如何使用 Froala Editor NPM 包。

安装 froala-editor

在项目根目录下运行以下命令安装 froala-editor:

npm install froala-editor

引入 FroalaEditor

在 JavaScript 文件中引入 FroalaEditor：

import FroalaEditor from 'froala-editor';
import 'froala-editor/css/froala_editor.pkgd.min.css';
import 'froala-editor/css/themes/dark.css';

// 初始化编辑器
const editor = new FroalaEditor('#editor');

上述代码中，我们首先从 froala-editor NPM 包中导入 FroalaEditor 类，并引入了默认的 CSS。然后，我们可以通过创建一个新的 FroalaEditor 实例来初始化编辑器。

配置 FroalaEditor

你可以通过传递一个选项对象来配置 FroalaEditor：

const editor = new FroalaEditor('#editor', {
  toolbarButtons: ['bold', 'italic', 'underline'],
  placeholderText: 'Type something',
  heightMin: 300,
});

在上述示例中，我们指定了工具栏按钮，设置了编辑器的占位符文本和最小高度。

获取和设置内容

要获取编辑器中的 HTML 内容，可以使用以下代码：

const html = editor.html.get();
console.log(html);

要设置编辑器的 HTML 内容，可以使用以下代码：

editor.html.set('<p>Hello, world!</p>');

事件处理程序

FroalaEditor 中有许多可用的事件，例如 initialized、contentChanged 和 keydown 等。你可以通过以下方式添加事件处理程序：

editor.events.on('contentChanged', () => {
  console.log('Content changed.');
});

上述代码将在编辑器内容更改时输出一条消息。

总结

本文介绍了如何安装和使用 Froala Editor NPM 包，并提供了一些示例代码。使用 Froala Editor 可以轻松地为 Web 应用程序提供功能齐全的 WYSIWYG 编辑器，希望这篇文章对你有所帮助！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34200