capricorncd / zx-editor

The HTML document (rich text) editor in Smart phone browser or webview, supporting mixed layout, reference, headline, unordered list, font color, bold and italics. 移动端HTML文档(富文本)编辑器,支持图文混排、引用、大标题、无序列表,字体颜色、加粗、斜体
https://capricorncd.github.io/zx-editor/demo
331 stars 100 forks source link
editor html5 npm-workspaces smart-phone typescript

SpEditor

Downloads Version License

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

SpEditor is a HTML5 rich text editor in smartphone browsers, and it's extends Editor.

Build Setup

# 安装依赖
npm i

# http://localhost:9001
npm run dev

# build files
npm run build

使用 Use

# npm
npm i sp-editor

# pnpm
pnpm i sp-editor

# yarn
yarn add sp-editor

ES6+

import { SpEditor } from 'sp-editor'
import 'sp-editor/css'
const spEditor = new SpEditor({
  // container: document.querySelector('#app'),
  // or
  container: '#app'
})

browser

<link rel="stylesheet" href="https://github.com/capricorncd/zx-editor/blob/main/dist/sp-editor.min.css">
<div id="editorContainer">
  <!-- 编辑器容器 -->
</div>
<script src="https://github.com/capricorncd/zx-editor/raw/main/dist/sp-editor.umd.js"></script>
<script>
  // 初始化ZX编辑器
  const spEditor = new SpEditor('#editorContainer', {
    placeholder: '请输入内容',
  })
  console.log(spEditor)
</script>

Preview

https://capricorncd.github.io/zx-editor/demo/

sp-editor Preview

Docs

Copyright and license

Code and documentation copyright 2018-Present. capricorncd. Code released under the MIT License.