当前位置: 首页 > Web前端 > HTML5

zx-editorMobile(HTML5)富文本编辑器,可与原生App混合(混合)开发

时间:2023-04-04 23:22:58 HTML5

ZxEditorMobileHTML文档(富文本)编辑器,支持图文混排、引用、大标题、乱序List、字体颜色,粗体,斜体。可用于独立的web项目开发,也可用于与原生App的混合开发。源码地址:https://github.com/capricornc...在本地运行BuildSetup#安装依赖npmi#运行开发模式#通过`http://localhost:9001`访问npmrundev#生成工程文件npm使用Usenpmnpminstallzx-editor--save-devhtml

注意:添加拍照时,判断照片方向并自动旋转需要依赖插件exif.jsES6+import{ZxEditor}from'zx-editor'//import{ZxEditor}from'./src/js/zx-editor/index.js的参数optionsautoSave:Number,自动将编辑的内容保存到localStorage,单位秒。等于0表示不自动保存编辑。bottom:数字,底部距离。fixed:Boolean,编辑器是否绝对定位,默认为false。imageMaxSize:Number,图片文件的最大尺寸限制,单位MB,默认20padding:Number,编辑器左右padding,默认15像素,showToolbar:Array|Boolean,是否显示底部工具栏(图片,标签)、添加链接等)。默认为真,显示所有图标。数组可选值:['pic','emoji','text','link'],数组中元素的顺序决定了按钮的显示顺序。top:Number,顶部距离,绝对定位时相对于WebView的顶部。属性propertydialog:ObjectMessage提示框alert,confirm,加载对话框方法说明alert(msg,callback)msg??:提示信息,callback():回调函数confirm(msg,callback)msg??:提示信息,callback(trueorfalse):回调函数loading(msg)msg??:提示信息,默认loading...removeLoading()移除加载元素nodezxEditor.dialog.alert('这是一个alert提示框',function(){//dosomething...})storage:对象本地存储localStorage/sessionStorage方法说明set(key,data,isSessionStorage)key:存储键名,会自动添加默认前缀,data:需要存储的数据get(key,isSessionStorage)key:存储键名,Returnnull或dataremove(key,isSessionStorage)删除key对应的本地数据isSessionStorage,可选参数。默认值为假。zxEditor.storage.set('content',{title:'title',content:'content'})方法methodson(notifyName,callback)监听编辑器部分通知notifyNamecallback(参数)说明add-linknext()点击底部添加链接图标显示时触发。监听这个通知会阻止编辑器默认的处理逻辑执行debugmessge消息通知error{code:1,msg:'message'}错误异常通知select-picture-点击底部选择图片图标时触发。监听这个通知会阻止编辑器执行默认的处理逻辑show-emoji-triggered当底部的表情图标被点击show-textstyle-triggered当底部的文字样式图标被点击例子://自定义选中的picturezxEditor.on('select-picture',_=>{//混合模式开发时,可以在这里调用原生App提供的接口访问图片文件选择列表//执行图片文件数据获取,//或获取原生App处理上传的图片urlzxEditor.addImage('图片url地址或base64图片数据')//其他操作...})//自定义添加链接zxEditor.on('add-link',next=>{//混合模式开发时,this可以调用原生App提供的接口来访问剪贴板中是否有url地址数据//获取url地址及其文档标题//添加链接到编辑器底部next(url,title)})addFooterButton(option)添加按钮到工具栏,option:Object|Array//在底部工具栏添加一个“引导”按钮zxEditor.addFooterButton({name:'summary',//按钮类外层容器样式名称:'demo-summary-button',//按钮图标中第i个元素的样式名称:'',//需要监听的事件名称注册于:'summary-button'})//或zxEditor.addFooterButton([{name:'summary',class:'demo-summary-button',icon:'',on:'summary-button'}])addImage(src|base64)向文本焦点添加图片,支持图片url地址或base64数据addMedia(url,type)向文本焦点添加图片/音频/视频图片url地址或base64数据音频/视频只支持url地址url:Stringurl地址类型:String,img|audio|videogetBase64Images()获取文本中所有base64数据图片,返回一个数组@returnarray[{id:'zxEditor_img_1500001511111',base64:'data:image/jpeg;base64,/9j4AAQSkZJDAAkGB+wgH....',blob:'blob数据,可以直接上传,也可以通过方法toBlobData(base64)'}]insertElm($el,tag)向文本焦点添加任意dom元素$el$el:HTMLElementtag:String,可选参数,domelement标签,如img/div/h2等toBlobData(base64)将图片base64转为原始数据类型Blob(),与表单中提交上传的数据类型相同,可以直接上传@returnnewBlob()returnBlob()datasetImageSrc(imgId,imgUrl)将ID为imgId的图片的base64地址替换为新的imgUrl,需要配合getBase64Images()方法使用。@returnbooleangetContent(isInnerText)获取文本内容html。@params'isInnerText'可选,默认为false,获取编辑器innerHTML。否则获取innerText。setContent(innerHTML)设置编辑器内容,可用于初始化编辑器数据。stopAutoSave()在启用自动保存时有效。停止自动保存已编辑的数据。save()保存编辑器内容removeSave()移除本地存储的内容filesToBase64(files,opts,callback)将图像文件数据转换为base64/blob参数类型描述文件文件类型文件数据数组optsObject图像压缩或裁剪参数{width:100,height:100,clip:true}callback(errorArray,dataArray)errorArray:`nullArray,dataArray:nullArray`文件处理完成回调函数dataArraynull//or[{//处理完的dom节点对象element:'canvasElement|imageElement',//文件类型type:'image/png',//处理后的图片宽度,根据传入参数设置width:100,//处理后的图片高度:100,//blob数据data:'blobdata',//base64数据base64:'base64',//文件大小Bsize:15455,//bloburl地址url:'blobUrl',//原始图像数据参数rawdata:{}}]源地址:https://github.com/摩羯座…