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

摘要：移动端文档富文本编辑器，支持图文混排引用大标题无序列表，字体颜色加粗斜体。可用于独立项目开发，也可以用于与原生混合开发。，图片文件最大尺寸限制，单位，默认，编辑器左右内边距，默认像素，是否显示底部工具栏图片标签连接添加等图标。

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

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

源码地址：https://github.com/capricornc...

# 安装依赖
npm i

# 运行开发模式
# 通过 `http://localhost:9001` 可以访问
npm run dev

# 生成项目文件
npm run build

npm

  npm install zx-editor --save-dev

html

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

ES6+

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

autoSave: Number，自动保存编辑内容至localStorage，单位秒。等于0则不自动保存编辑内容。

bottom: Number，底部距离。

fixed: Boolean，编辑器是否绝对定位，默认为false。

imageMaxSize: Number，图片文件最大尺寸限制，单位MB，默认20

padding: Number，编辑器左右内边距，默认15像素,

showToolbar: Array|Boolean，是否显示底部工具栏（图片、标签、连接添加等图标）。

默认为true，显示全部图标。

Array可选值：["pic", "emoji", "text", "link"]，数组中元素顺序，决定按钮的显示顺序。

top: Number，顶部距离，绝对定位时，相对于WebView顶部的距离。

dialog: Object 消息提示框

alert、confirm、loading对话框

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

storage: Object 本地存储

localStorage/sessionStorage

isSessionStorage，可选参数。默认值为false。

zxEditor.storage.set("content", {title: "标题", content: "内容"})

on(notifyName, callback)

监听编辑器部分通知

例子：

// 自定义选择图片
zxEditor.on("select-picture", _ => {
  // hybrid模式开发时，此处可以调用原生App提供的接口，访问图片文件选择列表
  // 执行图片文件数据获取，
  // 或者获取由原生App处理并上传完成的图片url
  zxEditor.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

dataArray

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

源码地址：https://github.com/capricornc...