zx-editor 移动端（HTML5）富文本编辑器，可与原生App混合(hybrid)开发

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

可用于独立web项目开发，也可以用于与原生App混合(hybrid)开发。

源码地址：https://github.com/capricorncd/zx-editor

本地运行 Build Setup

# 安装依赖
npm i# 运行开发模式
# 通过 `http://localhost:9001` 可以访问
npm run dev# 生成项目文件
npm run build

使用 Use

  npm install zx-editor --save-dev

html

<div id="editorContainer"><!-- 编辑器容器 -->
</div>
<script src="./dist/js/zx-editor.min.js"></script>
<script>// 初始化ZX编辑器var zxEditor = new ZxEditor('#editorContainer', {fixed: true})// 详见index.html文件
</script>

注意：添加照片时，判断照片方向，并自动旋转需要依赖插件 exif.js

ES6+

import { ZxEditor } from 'zx-editor'
// import { ZxEditor } from './src/js/zx-editor/index.js'

参数 options

autoSave: Number，自动保存编辑内容至localStorage，单位秒。等于0则不自动保存编辑内容。
bottom: Number，底部距离。
fixed: Boolean，编辑器是否绝对定位，默认为false。
imageMaxSize: Number，图片文件最大尺寸限制，单位MB，默认20
padding: Number，编辑器左右内边距，默认15像素,
showToolbar: Boolean，是否显示底部工具栏（图片、标签、连接添加等图标）。默认为true
top: Number，顶部距离，绝对定位时，相对于WebView顶部的距离。

属性 property

dialog: Object 消息提示框

alert、confirm、loading对话框

方法	说明
alert(msg, callback)	msg:提示消息, callback():回调函数
confirm(msg, callback)	msg:提示消息, callback(true或false):回调函数
loading(msg)	msg:提示消息，默认`loading...`
removeLoading()	移除loading元素节点

zxEditor.dialog.alert('这是alert提示框', function () {// do something ...
})

storage: Object 本地存储

localStorage/sessionStorage

方法	说明
set(key, data, isSeesionStorage)	key:存储键名，会自动加默认前缀, data:需要存储的数据
get(key, isSeesionStorage)	key:存储键名，返回null或data
remove(key, isSeesionStorage)	删除key对应的本地数据

参数isSeesionStorage: 是否为seesionStorage，默认为false

// 存储
zxEditor.storage.set('content', {content: '内容',title: '标题'})

方法 methods

on(notifyName, callback)

监听编辑器部分通知

notifyName	callback(参数)	说明
add-link	`next()`	点击底部`添加连接`图标时触发。监听此通知，将阻止编辑器默认处理逻辑执行
debug	messge	消息通知
error	errorMessage	错误异常通知
select-picture	-	点击底部`选择图片`图标时触发。监听此通知，将阻止编辑器默认处理逻辑执行
show-emoji	-	点击底部`emoji`图标时触发
show-textstyle	-	点击底部`文字样式`图标时触发

例子：

// 自定义选择图片
zxEditor.on('select-picture', _ => {// hybrid模式开发时，此处可以调用原生App提供的接口，访问图片文件选择列表// 执行图片文件数据获取，// 或者获取由原生App处理并上传完成的图片urlzxEditor.addImage('图片url地址或base64图片数据')// 其他操作...
})

// 自定义添加链接
zxEditor.on('add-link', next => {// hybrid模式开发时，此处可以调用原生App提供的接口，访问剪贴板是否有url地址数据// 获取到url地址、及其文档title// 将链接添加至编辑器中next(url, title)
})

addFooterButton(option)

底部工具栏添加按钮，option: Object|Array

// 底部工具栏添加一个“导语”按钮
zxEditor.addFooterButton({
name: 'summary',
// 按钮外容器样式名称
class: 'demo-summary-button',
// 按钮内i元素样式名
icon: '',
// 需要注册的监听事件名
on: '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: String url地址

type: String, img|audio|video

getBase64Images()

获取正文中所有base64数据的图片，返回一个数组

@return array

[{id: 'zxEditor_img_1500001511111',base64: 'data:image/jpeg;base64,/9j4AAQSkZJDAAkGB+wgH....',blob: 'Blob数据，可以用于直接上传，或通过方法toBlobData(base64)转换'}
]

insertElm($el, tag)

向正文焦点处添加任意dom元素$el

$el: HTMLElement

tag: String, 可选参数，dom元素标签，如img/div/h2等
toBlobData(base64)

将图片base64转换为原始数据类型Blob()，该数据和表单中提交上传的数据同类型，故可以直接上传

@return new Blob() 返回Blob()数据
setImageSrc(imgId, imgUrl)

将ID为imgId的图片base64地址，替换为新的imgUrl。需配合getBase64Images()方法使用。

@return boolean
getContent(isInnerText)

获取正文内容html。

@params ‘isInnerText’可选，默认为false，获取编辑器innerHTML。否则获取innerText。
setContent(innerHTML)

设置编辑器内容，可用于初始化编辑器数据。
stopAutoSave()

开启自动保存时有效。停止自动保存编辑数据。
save()

保存编辑器内容
removeSave()

移除本地存储的content内容
filesToBase64(files, opts, callback)

图片文件数据转为base64/blob

参数	类型	说明
files	文件类型	文件数据数组
opts	`Object`	图片压缩或裁剪参数`{width:100,height:100,clip:true}`
callback(errorArray, dataArray)	errorArray:`null	Array`, dataArray:`null

dataArray

null
// 或者
[{// 处理完成的dom节点对象element: 'canvasElement|imageElement',// 文件类型type: 'image/png',// 处理完成的图片宽度，根据传入的参数定width: 100,// 处理完成的图片高度height: 100,// blob数据data: 'blob数据',// base64数据base64: 'base64',// 文件大小Bsize: 15455,// blob url地址url: 'blobUrl',// 原始图片数据参数rawdata: {}}
]

源码地址：https://github.com/capricorncd/zx-editor

Copyright and license

zx-editor 移动端（HTML5）富文本编辑器，可与原生App混合(hybrid)开发相关推荐

Squire – 简洁的 HTML5 富文本编辑器
Squire 是一个简洁的 HTML5 富文本编辑器,它提供了强大的跨浏览器的标准化,超级轻巧灵活.它是建立在现在和未来并作为研究,因此并不支持那些古老的浏览器. 在线演示源码下载您可能 ...
html5富文本编辑器图片,漂亮的富文本编辑器WYSIWYG
插件描述: 接下来我要为大家介绍一款好看的富文本编辑器 wysiwyg .先来看看官方对这款编辑器的相关功能描述吧. 接下来我要为大家介绍一款好看的富文本编辑器 wysiwyg .先来看看官方对这款编 ...
轻量化html编辑器,web端实现富文本编辑器
首先添加一个div 将div contenteditable属性设置为true data-text 是为了实现类似texteara中placeholder的效果配合css中 [contentEdita ...
移动端H5 富文本编辑器
uniapp组件可以打包成H5 地址 :https://ext.dcloud.net.cn/plugin?id=8342
小程序开发笔记（二）：微信小程序富文本编辑器editor的使用
小程序在去年5月的 v2.7.0 版本新增了组件editor富文本编辑器,但对于像我这种开发新手,要熟练使用还是有一定难度.所以记录一下我的学习过程,希望对大家有帮助. 小程序有详细的微信开发 ...
使用wangEditor富文本编辑器上传图片和文字
"刘郎已恨蓬山远,更隔蓬山一万重" 序现在做的是从web端给眼镜端发送消息,其实就是web端把消息存到数据库,然后眼镜从数据库获取消息即可.现在在web端的输入框需要直接复制图片 ...
10个免费的javascript富文本编辑器（jQuery and non-jQuery）
本文介绍了10个免费易用富文本编辑器(rich text editors,RTE),其中5个是Jquery插件,另外5个是非Jquery富文本编辑器简介 Javascript富文本编辑器使我们添加. ...
富文本编辑器-Ueditor
富文本编辑器,Rich Text Editor, 简称 RTE, 它提供类似于 Microsoft Word 的编辑功能,容易被不会编写 HTML 的用户并需要设置各种文本格式的用户所喜爱.它的应用也 ...
10个免费的jQuery富文本编辑器
原文地址:https://blog.csdn.net/lzwglory/article/details/17206689 Javascript富文本编辑器使我们添加.编辑网站中的文章更加方便和容易.这 ...