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

ZxEditor 移動端HTML文檔（富文本）編輯器，支持圖文混排、引用、大標題、無序列表，字體顏色、加粗、斜體。

可用于獨立web項目開發(fā)，也可以用于與原生App混合(hybrid)開發(fā)。

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

# 安裝依賴
npm i

# 運行開發(fā)模式
# 通過 `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"]，數(shù)組中元素順序，決定按鈕的顯示順序。

top: Number，頂部距離，絕對定位時，相對于WebView頂部的距離。

dialog: Object 消息提示框

alert、confirm、loading對話框

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

storage: Object 本地存儲

localStorage/sessionStorage

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

zxEditor.storage.set("content", {title: "標題", content: "內容"})

on(notifyName, callback)

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

例子：

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

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

addFooterButton(option)

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

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

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

addImage(src|base64)

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

addMedia(url, type)

向正文焦點處添加圖片/音頻/視頻

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

音頻/視頻只支持url地址

url: String url地址

type: String, img|audio|video

getBase64Images()

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

@return array

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

insertElm($el, tag)

向正文焦點處添加任意dom元素$el

$el: HTMLElement

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

toBlobData(base64)

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

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

setImageSrc(imgId, imgUrl)

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

@return boolean

getContent(isInnerText)

獲取正文內容html。

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

setContent(innerHTML)

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

stopAutoSave()

開啟自動保存時有效。停止自動保存編輯數(shù)據(jù)。

save()

保存編輯器內容

removeSave()

移除本地存儲的content內容

filesToBase64(files, opts, callback)

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

dataArray

null
// 或者
[
  {
    // 處理完成的dom節(jié)點對象
    element: "canvasElement|imageElement",
    // 文件類型
    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...