geekpark / smeditor Goto Github PK

View Code? Open in Web Editor NEW

344.0 15.0 56.0 897 KB

✎ 基于 Vue.js 2.0+ 石墨文档样式的富文本编辑器组件

Home Page: http://geekpark.github.io/smeditor.github.io/

License: GNU General Public License v3.0

JavaScript 35.21% HTML 0.40% Vue 64.06% Shell 0.33%

smeditor's Introduction

SMEditor

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

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

起因

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

功能

使用

// 安装
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

smeditor's People

Contributors

Stargazers

Watchers

smeditor's Issues

如何初始化和读取值？

<smeditor :config="config" />

在 vue 的项目中使用，请问可以设计一个绑定功能么？

<smeditor :config="config" v-model="content" />

类似这种，可以把编辑器的内容绑定到 content。

虽然到了 issue#10，可是还是不明白如何获取

upload (file, success) {
let url = this.config.uploadUrl
let xhr = new XMLHttpRequest()
let form = new FormData()
let self = this
if (!!config.uploadParams) {
Object.keys(this.config.uploadParams).map((i) => {
form.append(i, this.config.uploadParams[i]);
});
}
form.append(this.config.uploadName, file)
xhr.open('POST', url, true)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
const json = JSON.parse(xhr.responseText)
const imgUrl = self.config.uploadCallback(json)
success(imgUrl)
} else {
if (self.config.uploadFailed) {
self.config.uploadFailed(xhr.responseText)
}
// 测试网站, 模拟上传
if (location.href.indexOf('ericjj.com/smeditor.github.io') > 0) {
const imgUrl = self.config.uploadCallback('')
success(imgUrl)
}
}
}
}
xhr.send(form)
}

geekpark / smeditor Goto Github PK

smeditor's Introduction

SMEditor

起因

功能

使用

配置

快捷键

本地运行

smeditor's People

Contributors

Stargazers

Watchers

Forkers

smeditor's Issues

Recommend Projects

Recommend Topics

Recommend Org