移动端HTML富文本编辑器zx-editor的扩展实现,适用于APICloud、DCloud、蓝鸟(BlueBird)、hybrid等混合APP开发

移动端HTML文档(富文本)编辑器,支持图文混排、引用、大标题、无序列表,字体颜色、加粗、斜体。

可用于独立web项目开发,也可以用于APICloud、DCloud、蓝鸟(BlueBird)、hybrid等混合APP开发。

zx-editor官网:https://github.com/capricorncd/zx-editor

本文转载来源:https://www.npmjs.com/package/zx-editor?activeTab=versions

                         https://blog.csdn.net/Yagizacd/article/details/81437105

                         https://segmentfault.com/a/1190000015923496

关于zx-editor的基本使用我就不多说了,zx-editor的作者已经说得很清楚了

下面就来说说我的个人项目中需要用到的一些业务处理,从而扩展了一些zx-editor的api接口

项目需求:一个适用于移动端的富文本编辑器(zx-editor)

                  用户从本地上传图片、视频、音频文件到服务端,同时编辑器中插入回调的文件地址

                  用户在编辑图文信息时,在删除编辑器中图片、视频、音频文件时也要将服务端文件一并删除

                  需要监听用户在编辑区域内点击图片和超链接时的回调

根据以上罗列的项目需求可知,官方提供了一些基本的接口,但是还不能满足我目前的需求,因此,我在作者的基础上再进行了一部分外部接口的扩展,具体扩展如下:

新增了一个js文件(extend.js),所有的扩展接口都在这个文件中

扩展接口:

  • zxEditorExtend.deleteClick(i,website,url,sendCallback)

页面图片视频音频以及超链接删除按钮被单击回调,参数说明:i当前点击删除的原始dom对象,website域名,urlajax请求地址,sendCallback回调函数(返回两个参数:result,msg;即服务端删除结果和通知信息)

例子:用户在编辑图文时可随意上传删除编辑器内图片视频音频和服务端图片视频音频文件

  • zxEditorExtend.imgClick(obj)

页面图片被单击回调函数,返回参数说明:obj当前被点击的原始dom对象

例子:用户在浏览文章时,通过预先在app内定义好的函数来达到点击图片进入全屏多图片查看效果以及图片下载

  • zxEditorExtend.linkClick(url)

页面超链接被单击回调函数,返回参数说明:url当前被点击超链接的链接地址

例子:用户在浏览文章时点击超链接,通过预先在app内定义好的函数来达到打开新的app窗口打开链接

浏览器web演示效果,请用手机浏览器扫描浏览:

移动端HTML富文本编辑器zx-editor的扩展实现,适用于APICloud、DCloud、蓝鸟(BlueBird)、hybrid等混合APP开发_第1张图片

例程以及扩展库下载地址

提取码:pk7l

说明:本人没什么技术含量,写的代码都很基础又很简单,大神请忽略,不喜勿喷,我认为实用即可

你可能感兴趣的:(插件扩展,开发例程,开发经验总结,zx-editor,移动端富文本编辑器,富文本编辑器zx-editor,混合app开发)