手册版本 V6.0

此组件已废弃，仅为老用户保留，新版本组件请移步手册左侧 内容编辑器 组件。

组件介绍

gui-editor 编辑器组件目标是提供一个灵活的前端编辑器给用户来使用，具备以下特色 : 
01. 体验较好、功能丰富、全端兼容；
02. 内容选项可以删除、排序；
03. 以数组形式收集编辑器数据，可以使用 JSON.stringify() 将数据序列化后提交给后端并保存到数据库;
04. 配套提供数据对应的解析器，用于展示编辑器产生的文章数据，体验更好；

组件名称

gui-editor : GraceUI 组件目录/gui-editor.vue

组件事件

@deleteImage 删除已上传图片时触发，携带参数 : 图片路径。 [  2023.07.25 新增 ]

兼容平台

上传后端返回值格式

{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']);
	}
}

演示代码