手册版本 V3.0
组件名称
graceEditor : /graceUI/组件目录/graceEditor
功能介绍
1. 支持类型 : 文本、居中标题、图片、引用、加粗、链接、分割线;
2. 提交时动态收集临时图片,循环完成图片上传工作;
3. 添加项目过程中项目数据已经记录,便于提交;
改进说明
您可以 graceEditer 为基础改进出更丰富、更适合您的项目的编辑器;
如何实现编辑某个文章
1. 获取要编辑文章的数据,利用组件的 setDefault 函数对组件赋初始值.
图片上传后端接口返回值格式
成功:
{status : 'ok', data : '上传后图片地址'}
失败:
{status : 'eror', data : '具体错误信息'}
如何调试接口
写一个简单的单图上传功能,调试接口返回值,保证接口无误再使用组件;
后端代码示例 php 版本
<?php
class uploadController extends grace{
public function index(){
$this->allowSize = 5;
if(!empty($_FILES['img'])){
//获取扩展名
$exename = $this->getExeName($_FILES['img']['name']);
//检查扩展名
if(!in_array($exename, array('png', 'gif', 'jpeg', 'jpg'))){$this->json('格式错误', 'error');}
//检查文件大小
if($_FILES['img']['size'] > $this->allowSize*1024*1024){$this->json('文件过大', 'error');}
//本地上传
$file = uniqid().'.'.$exename;
$imageSavePath = 'uploadimgs/'.$file;
if(move_uploaded_file($_FILES['img']['tmp_name'], $imageSavePath)){
$this->json('http://grace.hcoder.net/api/'.$imageSavePath);
}else{
$this->json('上传失败', 'error');
}
}
}
public function getExeName($file){
$pathinfo = pathinfo($file);
return strtolower($pathinfo['extension']);
}
}
演示代码
UNI 普通版本
NVUE 版本
微信小程序独立版本
登录并购买 GraceUI 后可以查阅完整手册内容 。
登录并购买 GraceUI 后可以查阅完整手册内容 。
登录并购买 GraceUI 后可以查阅完整手册内容 。