ember-medium-editor-button 是一款 Ember.js 的 npm 包，用于在内容编辑器中添加自定义按钮。这个包支持使用 MediumEditor.js 提供的富文本编辑器工具栏添加和自定义按钮。在本篇文章中，我们将介绍如何使用 ember-medium-editor-button 这个包来扩展富文本编辑器的功能。
安装 Ember.js 和 medium-editor.js
为了使用 ember-medium-editor-button，你需要安装并配置好 Ember.js 和 medium-editor.js。如果你已经做好了这些工作，可以跳过这一步。
要安装 Ember.js，可以执行以下命令：
npm install -g ember-cli
要安装 medium-editor.js，可以执行以下命令：
npm install --save-dev medium-editor
安装 ember-medium-editor-button
要安装 ember-medium-editor-button，可以在项目根目录执行以下命令：
ember install ember-medium-editor-button
在安装完之后，你可以在 app/components 目录下找到 medium-editor-button 这个组件。
添加事件
在 app/components 目录下创建一个新的组件 my-medium-editor。然后在这个组件的模板中添加以下代码：
-- -------------------- ---- ------- --------------- ----------- --------------- ------------ ------- -- ---------------------- ------------ --------------- -------- --展开代码
这个模板包含了一个 medium-editor 组件和一个 medium-editor-button 组件。medium-editor 负责渲染编辑器，medium-editor-button 负责添加自定义按钮。
在这个模板中，我们将 medium-editor-button 绑定到一个名为 click 的事件上。这个事件将在用户单击自定义按钮时触发，并且可以在组件的控制器中进行定义。
控制器中定义事件
在 app/components 目录下，打开 my-medium-editor 组件的控制器文件（controller.js），添加以下代码：
-- -------------------- ---- ------- ------ ---------- ---- -------------------- ------ ------- ------------------- -------- - ------ ---------- - ---------------------- -- ----- ---------- - ---------------------- -- -- ---展开代码
这个控制器包含了两个事件：click 和 save。click 事件在用户单击自定义按钮时触发，save 事件在用户保存编辑器中的内容时触发。
完成
现在你已经完成了使用 ember-medium-editor-button 扩展富文本编辑器的过程。在用户单击自定义按钮时，将触发已经定义的 click 事件，可以在事件中执行任何你需要的业务逻辑。在用户单击编辑器中的保存按钮时，将触发已经定义的 save 事件。
完整的示例代码可以在我的 GitHub 仓库中找到：https://github.com/example/my-medium-editor
希望这篇文章能够帮助你了解如何使用 ember-medium-editor-button 这个 npm 包来扩展 Ember.js 应用的富文本编辑器功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1da563576b7b1eccec
