Rich text editor based on Vue.js 2.0 and shimo Docs style

Rich text editor based on Vue.js 2.0 and shimo Docs style

Rich text editor based on Vue.js 2.0 and shimo Docs style, lightweight, fast and elegant.

SMEditor

Build Status Code Climate JavaScript Style Guide Downloads license

✎ 基于 Vue.js 2.0+ 石墨文档样式的富文本编辑器, 轻量, 快速, 优雅

在线预览: http://geekpark.github.io/smeditor.github.io

反馈: https://github.com/ericjjj/smeditor/issues

联系: [email protected]

关于作者: https://ericjj.com/about/

起因

之前一直使用的 wangEditor 不能满足我司编辑和PM需求, 使用过程中也出了很多问题,   simditor 体验之后效果不是很好, 并且也不维护了; 目前的后台管理系统技术选型已经转向了 Vue, 所以就有了这个轮子;

功能

  • [x] 轻, 快 48 KB
  • [x] 自动添加图片描述框 (类似简书)
  • [x] 复制上传, 多张批量上传
  • [x] 轻量级备份, 恢复, 预览
  • [x] 代码精简, 适合二次开发
  • [x] 其他编辑器有的功能
  • [ ] 移动端

使用

// 安装
yarn install smeditor

// 引入
import SMEditor from 'smeditor'

// 全局组件
Vue.use(SMEditor)

// 局部组件
components: {
  'smeditor': SMEditor
}

// 使用
<smeditor :config='config'></smeditor>

配置

const config = {
  // 接口地址
  uploadUrl: '',
  // form 里的 filename
  uploadName: '',
  // 其他参数
  uploadParams: {},
  // 上传成功回调
  uploadCallback: (data) => {
    console.log(data)
    return 'blob:https://fiddle.jshell.net/00a0b0b4-d19a-4860-9796-137692aef36f'
  },
  // 上传失败回调, 可选
  uploadFailed: (err) => {
    console.log(err)
  }
}

快捷键

Ctrl + S 保存
Ctrl + P 预览(新窗口)

本地运行

npm run dev

npm run build

npm run gp

打赏

如果你感觉有收获,欢迎给我打赏 ———— 以激励我更多输出优质开源内容

Github Repository

Tags: #VueJs #Editor