前言
ember-cli-summernote2 是一款基于 jQuery 插件 summernote 封装的适配 Ember.js 框架的富文本编辑器。使用 Ember.js 开发 SPA（Single Page Application）应用时，使用 ember-cli-summernote2 可以快速集成富文本编辑器，让用户可以方便地编辑和格式化大段文字内容。
安装
安装 ember-cli-summernote2 需要先安装 Node.js 和 npm。在命令行输入以下命令：
npm install --save-dev ember-cli-summernote2
这个命令会将ember-cli-summernote2 安装为开发依赖，并在 package.json 文件中添加一条依赖项记录。
使用
安装完成后，在 Ember.js 的组件中使用 ember-cli-summernote2 只需要引入通过 npm 安装的包，并在你的模板中使用即可。
-- -------------------- ---- -------
---- ------------------------------- ---
-----------------------
-----------
---------------- ---- -------
---------------
---------------------------
-
----------------------
--在组件中，我们需要定义编辑器初始化的参数，包括 toolbar 工具栏按钮的配置、图片上传路径和处理方法等等，这些参数都存储在组件的 .js 文件中。
-- -------------------- ---- -------
-- --------------------------------
------ --------- ---- -------------------
------ ------- ------------------
--------------- -
--------- -----------
-------- -------- --------- ------------ ----------
--------- -----------
-------- ------ ----- --------------
--------- -----------
---------- -------- ------------
-------- -------------- ------------
--
------ -
--------------------------
------------------------- -
-------- ---------------------------
---------- ----
------- ----
------------ ----------
---------- -
-------------- --------------- -
--- ------ - --------
--- --- - --------------------
--- ---- - --- -----------
-------------------- ----------
--------
-------- -
--------------- --------------------------------------------
--
----- -----
---- ----
----- -------
------ ------
------------ ------
------------ ------
-------- ------------------ -
-- -------------- -
-------------------------------- --------------
- ---- -
-------------------- -----------------
-
--
------ ------------------ -
-------------------- -----------------
-
---
-
-
---
-
---示范代码
下面，我们来看一段使用 ember-cli-summernote2 的示范代码。
-- -------------------- ---- -------
---- ---------------------------- ---
-----
------------------ -----------
---- --------------------
-- --------- ---------- -------- -----------
-----------------
------
--------------------
------
---- ------------
---- ------------- ----------
---- -------------------
----- -------
---- ------------ -----------------------------
-------
------ ------------------------------
------ ----------- -------------------- --------------- --------------------- ----------------
------
---- --------------------
-----------------------
-------------
---------------- ---- ---------
---------------
---------------------------
-
----------------------
--
------
------
---- ------------- ----------
---- -------------------
------ ------------------------------------
---------- --------------------------- ----------------
---------------------
-----------------------
------------------- - ---------
--------------------
----------------
-------------------------- ------------------ --------------------
--
------- ---------- -- ------------
---------------------
-----------------
---------------
-------------
------------- ------------- - -- ------------------- ----
-----------------
-
-----------
--------------
--
---------------------
---------
-----------------------
------------
------
---- -------------------
------ ----------------------------
------- ----------- -------------------- -------------- ------------------ ---- --------- -- ------- ------------
------ ---------------- -------------------- ---- ------ -- ----- -----------------
------
---- -------------------
------ -------------------------- -- --------------
-----------------
-------------
--------
------------
------------------
------------
--
------
------- ---------- ----------- ------------------ ----------------------
------
------在这个示范代码中，我们定义了一个文章编辑页面，包括了文章的标题、内容、分类、标签、公开性等参数。其中，文章内容就是使用 ember-cli-summernote2 渲染的富文本编辑器。
在后台服务器中，需要为文章图片提供一个上传接口，同时实现上传图片的处理和存储，代码示例如下：
-- -------------------- ---- -------
- ------------------------------------------
----- ----------------------- - ---------------------
-------------------- ----- -------------
--- ---
-- --------------
---- - --------------
-- ----------------------------------------- ------- -------
-------- - -----------------------------------------
--------- - ---------------- ---------
------ ----- - ---- --------- -- ------- ---
----
------ ----- - ------- -------- ----- ------- -- ------- ---
---
----
------ ----- - ------- --- ----- --------- -- ------- ---
---
---
-------
--- --------------------------------
------- - ---------------------------
--------------------------------
---
--- ---------------- ---------
--------- - ------------------------- ---------- ---------
--------- - ------------------------
---------------------------- ------ --------------------------
------------------------------------------ ------ ----------------------------------------
-------------------- ----- - --- ------------------ -
-----------------------------
---
---这段代码中，我们定义了一个 ImagesController 控制器，提供一个 /posts/images/new 的上传接口，使用插件的 onImageUpload 方法上传图片。在 /public/uploads/images 目录下创建文件夹，将上传的图片文件存储到本地硬盘，并返回上传成功的图片路径为 json 格式，供富文本编辑器使用。
总结
在本文中，我们详细介绍了使用 ember-cli-summernote2 这个 npm 包在 Ember.js 应用中集成富文本编辑器的步骤和示范代码，并且给出了实现图片上传和处理的服务器端代码。这样开发者们就可以使用这个便捷的工具，让用户方便地编辑和格式化大段文字内容，并且上传图片或者其他类型的附件，大大提高网站的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005596181e8991b448d6d54