摘要：移動(dòng)端文檔富文本編輯器，支持圖文混排引用大標(biāo)題無(wú)序列表，字體顏色加粗斜體。可用于獨(dú)立項(xiàng)目開(kāi)發(fā)，也可以用于與原生混合開(kāi)發(fā)。，圖片文件最大尺寸限制，單位，默認(rèn)，編輯器左右內(nèi)邊距，默認(rèn)像素，是否顯示底部工具欄圖片標(biāo)簽連接添加等圖標(biāo)。

ZxEditor 移動(dòng)端HTML文檔（富文本）編輯器，支持圖文混排、引用、大標(biāo)題、無(wú)序列表，字體顏色、加粗、斜體。

可用于獨(dú)立web項(xiàng)目開(kāi)發(fā)，也可以用于與原生App混合(hybrid)開(kāi)發(fā)。

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

# 安裝依賴(lài)
npm i

# 運(yùn)行開(kāi)發(fā)模式
# 通過(guò) `http://localhost:9001` 可以訪問(wèn)
npm run dev

# 生成項(xiàng)目文件
npm run build

npm

  npm install zx-editor --save-dev

html

注意：添加照片時(shí)，判斷照片方向，并自動(dòng)旋轉(zhuǎn)需要依賴(lài)插件 exif.js

ES6+

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

autoSave: Number，自動(dòng)保存編輯內(nèi)容至localStorage，單位秒。等于0則不自動(dòng)保存編輯內(nèi)容。

bottom: Number，底部距離。

fixed: Boolean，編輯器是否絕對(duì)定位，默認(rèn)為false。

imageMaxSize: Number，圖片文件最大尺寸限制，單位MB，默認(rèn)20

padding: Number，編輯器左右內(nèi)邊距，默認(rèn)15像素,

showToolbar: Array|Boolean，是否顯示底部工具欄（圖片、標(biāo)簽、連接添加等圖標(biāo)）。

默認(rèn)為true，顯示全部圖標(biāo)。

Array可選值：["pic", "emoji", "text", "link"]，數(shù)組中元素順序，決定按鈕的顯示順序。

top: Number，頂部距離，絕對(duì)定位時(shí)，相對(duì)于WebView頂部的距離。

dialog: Object 消息提示框

alert、confirm、loading對(duì)話框

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

storage: Object 本地存儲(chǔ)

localStorage/sessionStorage

isSessionStorage，可選參數(shù)。默認(rèn)值為false。

zxEditor.storage.set("content", {title: "標(biāo)題", content: "內(nèi)容"})

on(notifyName, callback)

監(jiān)聽(tīng)編輯器部分通知

例子：

// 自定義選擇圖片
zxEditor.on("select-picture", _ => {
  // hybrid模式開(kāi)發(fā)時(shí)，此處可以調(diào)用原生App提供的接口，訪問(wèn)圖片文件選擇列表
  // 執(zhí)行圖片文件數(shù)據(jù)獲取，
  // 或者獲取由原生App處理并上傳完成的圖片url
  zxEditor.addImage("圖片url地址或base64圖片數(shù)據(jù)")
  // 其他操作...
})

// 自定義添加鏈接
zxEditor.on("add-link", next => {
  // hybrid模式開(kāi)發(fā)時(shí)，此處可以調(diào)用原生App提供的接口，訪問(wèn)剪貼板是否有url地址數(shù)據(jù)
  // 獲取到url地址、及其文檔title
  // 將鏈接添加至編輯器中
  next(url, title)
})

addFooterButton(option)

底部工具欄添加按鈕，option: Object|Array

// 底部工具欄添加一個(gè)“導(dǎo)語(yǔ)”按鈕
zxEditor.addFooterButton({
  name: "summary",
  // 按鈕外容器樣式名稱(chēng)
  class: "demo-summary-button",
  // 按鈕內(nèi)i元素樣式名
  icon: "",
  // 需要注冊(cè)的監(jiān)聽(tīng)事件名
  on: "summary-button"
})

// 或者
zxEditor.addFooterButton(
  [
    {
      name: "summary",
      class: "demo-summary-button",
      icon: "",
      on: "summary-button"
    }
  ]
)

addImage(src|base64)

向正文焦點(diǎn)處添加一張圖片，支持圖片url地址或base64數(shù)據(jù)

addMedia(url, type)

向正文焦點(diǎn)處添加圖片/音頻/視頻

圖片url地址或base64數(shù)據(jù)

音頻/視頻只支持url地址

url: String url地址

type: String, img|audio|video

getBase64Images()

獲取正文中所有base64數(shù)據(jù)的圖片，返回一個(gè)數(shù)組

@return array

  [
    {
      id: "zxEditor_img_1500001511111",
      base64: "data:image/jpeg;base64,/9j4AAQSkZJDAAkGB+wgH....",
      blob: "Blob數(shù)據(jù)，可以用于直接上傳，或通過(guò)方法toBlobData(base64)轉(zhuǎn)換"
    }
  ]

insertElm($el, tag)

向正文焦點(diǎn)處添加任意dom元素$el

$el: HTMLElement

tag: String, 可選參數(shù)，dom元素標(biāo)簽，如img/div/h2等

toBlobData(base64)

將圖片base64轉(zhuǎn)換為原始數(shù)據(jù)類(lèi)型Blob()，該數(shù)據(jù)和表單中提交上傳的數(shù)據(jù)同類(lèi)型，故可以直接上傳

@return new Blob() 返回Blob()數(shù)據(jù)

setImageSrc(imgId, imgUrl)

將ID為imgId的圖片base64地址，替換為新的imgUrl。需配合getBase64Images()方法使用。

@return boolean

getContent(isInnerText)

獲取正文內(nèi)容html。

@params "isInnerText"可選，默認(rèn)為false，獲取編輯器innerHTML。否則獲取innerText。

setContent(innerHTML)

設(shè)置編輯器內(nèi)容，可用于初始化編輯器數(shù)據(jù)。

stopAutoSave()

開(kāi)啟自動(dòng)保存時(shí)有效。停止自動(dòng)保存編輯數(shù)據(jù)。

save()

保存編輯器內(nèi)容

removeSave()

移除本地存儲(chǔ)的content內(nèi)容

filesToBase64(files, opts, callback)

圖片文件數(shù)據(jù)轉(zhuǎn)為base64/blob

dataArray

null
// 或者
[
  {
    // 處理完成的dom節(jié)點(diǎn)對(duì)象
    element: "canvasElement|imageElement",
    // 文件類(lèi)型
    type: "image/png",
    // 處理完成的圖片寬度，根據(jù)傳入的參數(shù)定
    width: 100,
    // 處理完成的圖片高度
    height: 100,
    // blob數(shù)據(jù)
    data: "blob數(shù)據(jù)",
    // base64數(shù)據(jù)
    base64: "base64",
    // 文件大小B
    size: 15455,
    // blob url地址
    url: "blobUrl",
    // 原始圖片數(shù)據(jù)參數(shù)
    rawdata: {}
  }
]

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