前言
在前端开发中,富文本编辑器是大家经常使用的一个工具,它既方便了用户输入,又能让网页内容更加生动有趣。今天,我们来介绍一款基于UMEDITOR的富文本编辑器插件@beisen/um-rich-editor。
介绍
@beisen/um-rich-editor是一款基于UMEDITOR的富文本编辑器插件,也是北森前端团队自主研发的一个重要技术产品。它拥有UMEDITOR的所有功能,并根据项目实践进行了扩展和优化,加入了自定义皮肤、剪贴板、自定义上传功能等特性。
安装
使用npm进行安装:
--- ------- ----------------------
也可以将包下载下来,打成umd格式的js文件,然后直接引入到项目中。
使用
基础配置
在项目中引入该插件后,可以按照以下方法进行基础配置:
- 引入样式表和js文件:
----- ---------------- ---------------------------------------------------------------------- ------- ----------------------------------------------------------------- ------- --------------------------------------------------------------
- 在页面中创建好文本编辑区域,并给区域绑定id:
--------- ------------- -------------------------
- 在js中进行编辑器配置并创建编辑器实例:
--- -- - ------------------------ - --------- - -------- --------- ------------ ---------------- ---- -------------- ------------- --------------- ---------------- --------------- ----------------- ---- -------------- ---------- -- ----- -------- ----------------- ----- ---
以上代码定义了id为myEditor的文本编辑区域的工具栏内容、语言、是否开启浮动特性等。
自定义皮肤
在基础配置的基础上,可以通过引入自定义皮肤的方式,让编辑器界面变得更加美观。
下载皮肤文件包,解压到项目中,假设文件夹名称为mySkin。
在页面中引入自定义皮肤的样式表:
----- ---------------- ---------------------------------------
- 在js中进行编辑器配置并创建编辑器实例时,指定皮肤:
--- -- - ------------------------ - --- ------ -------- ---
这里将新皮肤文件夹名称mySkin作为参数传入theme选项。
自定义上传功能
UMEDITOR插件的自带上传功能通常不能直接使用,因为它是将上传的图片等文件存储在本地的文件夹中,不满足日常使用的需要。因此,我们可以在@beisen/um-rich-editor插件的基础上,添加自定义上传功能。
- 在js中进行编辑器配置并创建编辑器实例时,重写上传函数:
--- -- - ------------------------ - --- ---------- ---------------- -- ------------------------------- --- ----------------------------------- -------- --- ---- - ------------------------ ----------- ------------ -------- -------- - ---------- - ---------------- -- ----------- ----------------------------- -------- -- -------------- --- ------ ----- ---
- 后端接口需要将上传的文件处理之后,返回一个在线的文件地址。
示例代码
--------- ----- ------ ------ ----------------------------------------- ----- ---------------- ----- ---------------- ---------------------------------------------------------------------- ------- ------ --------- ------------- ------------------------- ------- ---------------------------------- ------- ----------------------------------------------------------------- ------- -------------------------------------------------------------- ------- ---------------------------------------------------------------------------- -------- --- -- - ------------------------ - --------- - -------- --------- ------------ ---------------- ---- -------------- ------------- --------------- ---------------- --------------- ----------------- ---- -------------- ---------- -- ----- -------- ----------------- ------ ---------- ---------------- --- ----------------------------------- -------- --- ---- - ------------------------ ----------- ------------ -------- -------- - ---------- - ---------------- ----------------------------- -------- --- ------ ----- --- -------- ---------- - ----------------------- - --------- ------- -------
结语
@beisen/um-rich-editor是一款功能强大、易用性高、扩展性好的富文本编辑器插件,无论是企业级项目还是个人作品,都可以用它来满足日常编辑需要。希望今天的介绍对大家有所帮助,也欢迎有更好的使用方式进行分享~
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/beisen-um-rich-editor