手册版本 V5.0
此组件已废弃,仅为老用户保留,新版本组件请移步手册左侧 内容编辑器 组件。
组件介绍
gui-editor 编辑器组件目标是提供一个灵活的前端编辑器给用户来使用,具备以下特色 :
01. 体验较好、功能丰富、全端兼容;
02. 内容选项可以删除、排序;
03. 以数组形式收集编辑器数据,可以使用 JSON.stringify() 将数据序列化后提交给后端并保存到数据库;
04. 配套提供数据对应的解析器,用于展示编辑器产生的文章数据,体验更好;
组件名称
gui-editor : /graceUI/组件目录/gui-editor
兼容平台
上传后端返回值格式
{status:"ok", data:"上传成功后最终的图片路径"}
使用说明
01. 编辑器默认值赋值方式在演示代码 onload 函数内,请参考后用于文章编辑功能;
02. 才有提交时上传图片方式,上传代码在演示代码中已经写好;
03. 上传图片时才有一次一个循环上传的方式进行上传,后端接收代码 php 版本 示例 :
建议 : 写一个简单的单图上传功能,调试接口返回值,保证接口无误再使用组件;
<?php
class uploadController{
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']);
}
}
演示代码
登录并购买 GraceUI 后可以查阅完整手册内容 。
登录并购买 GraceUI 后可以查阅完整手册内容 。
登录并购买 GraceUI 后可以查阅完整手册内容 。