介绍
redactor-wysiwyg 是一个基于 jQuery 的所见即所得编辑器，它支持 HTML，Markdown 和 BBCode 格式。在前端开发中，纯文本输入是不够的，我们需要一个能够获得输入内容格式的工具，这就是所见即所得编辑器。redactor-wysiwyg 不仅支持常规功能，例如加粗、斜体、下划线、插入链接等，还支持插件拓展，可以实现更多定制化的需求。
安装
使用 npm 安装 redactor-wysiwyg
npm install redactor-wysiwyg
如果需要在浏览器中使用，可以直接在 HTML 文件中引入样式和 JS 文件。
<link rel="stylesheet" type="text/css" href="PATH_TO/redactor.css" /> <script type="text/javascript" src="PATH_TO/jquery.js"></script> <script type="text/javascript" src="PATH_TO/redactor.js"></script>
配置
redactor-wysiwyg 的配置是通过传递一个对象参数来完成。例如：
-- -------------------- ---- -------
-----------------------
------ -----
-------- -------- ------------- ------- --------- -----------
-------- --------- ---------
---------- -
------------ --------------- ----- -
----------------
-
-
---其中，#editor 是一个 textarea 元素的 id，配置参数如下：
- focus：自动聚焦输入框
- buttons：工具栏按钮，按照数组内的顺序依次显示，可选值包括 'html'、'formatting'、'bold'、'italic'、'deleted'、'underline'、'unorderedlist'、'orderedlist'、'indent'、'outdent'、'image'、'video'、'file'、'link'、'alignment'
- plugins：插件列表，以数组形式传递，可选值包括 'table'、'video'
- callbacks：回调函数列表，以对象形式传递，可选值包括 'imageUpload'、'fileUpload'、'textInsert'
在这里，我们配置了自动聚焦、html、formatting、bold、italic、deleted 按钮以及 table、video 两个插件。同时，当用户上传图片之后，回调函数 imageUpload 会弹出一个提示框。
事件
redactor-wysiwyg 可以绑定事件响应函数，例如：
$('#editor').redactor('core.setCallback', 'focus', function() {
alert('输入框获得焦点');
});当输入框获得焦点时，会触发回调函数，弹出一个提示框。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------- ------------
----- ---------------- --------------- --------------------- --
------- ---------------------- ---------------------------
------- ---------------------- -----------------------------
------- -----------------------
---------------------------- -
-----------------------
------ -----
-------- -------- ------------- ------- --------- -----------
-------- --------- ---------
---------- -
------------ --------------- ----- -
----------------
-
-
---
----------------------------------------- -------- ---------- -
-----------------
---
---
---------
-------
------
--------- -----------------------
-------
-------小结
在前端开发中，所见即所得编辑器是广泛应用的工具，redactor-wysiwyg 是其中的一种。通过 npm 安装或者浏览器中引入样式和 JS 文件，实现编辑器的初始化和配置。可以根据需求选择对应的插件和按钮进行配置，也可以根据事件来绑定响应函数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005535981e8991b448d0921