简介
react-contenteditable-pattern 是一个基于 React.js 的内容编辑组件，可以帮助开发者快速构建富文本编辑器或者输入框等组件。
与一般的 contentEditable 不同的是，react-contenteditable-pattern 提供了一些常用的富文本样式操作，比如粗体、斜体、下划线等等。同时，使用 react-contenteditable-pattern 也可以避免 HTML 标签的输入和 XSS 攻击等安全问题。
在本文中，我们将介绍如何使用 react-contenteditable-pattern。
安装
通过 npm 安装：
npm install react-contenteditable-pattern --save
使用
首先引入组件：
import ContentEditable from 'react-contenteditable-pattern';
然后在 render() 函数中使用：
-- -------------------- ---- -------
-------- -
------ -
----------------
------ --------------- - -- --
---------- ----------------- - -- --------
--------- ------------------ - -- ------
--------------- ------- -- -
----- -------- ---------------- ----- ---
- ----- -
-------
-- -- ----------
--
--
-其中，html 属性传入初始化的内容，onChange 事件监听内容变化并传回变化后的内容。
pattern 属性可以传入正则表达式，表示需要匹配的文本。
patternRender 属性是用来渲染匹配文本的回调函数。在这个函数中可以为匹配到的文本添加任意的 HTML 标签和样式。
示例
在最后，我们提供一个示例代码，演示如何将用户输入的十六进制颜色代码自动转化为颜色块。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ --------------- ---- --------------------------------
----- --- ------- --------- -
----- - -
----- --
--
-------- -
------ -
-----
---------------
----------------
------ --------------- -
---------- ----------------- -
--------- ------------------ -
--------------- ------- -- -
----- --------
-------- ---------------
------ -------
------- -------
---------------- -----
----------
--
--
------
--
-
------------ - --- -- -
---------------
----- --------------
---
--
-
------ ------- ----如上述代码，我们定义了一个匹配规则 /#[0-9a-fA-F]{6}/g，然后在 patternRender 函数中渲染一个宽高为 20px 的轻量级 span 标签，背景色为匹配到的颜色值。
到这里，我们便学习了如何使用 react-contenteditable-pattern 来构建一个简单的富文本编辑器，同时可以发现，这个组件还非常适合用来进行数据录入、数据校验等相关工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb581e8991b448dc609