ueditor(百度编辑器)的使用记录 - 本地和七牛云的设置。

下载后,创建demo,将容器放入表单里面:

class="form-group">

 

获取编辑器里面的内容:

var content = UE.getEditor('ueditor').getContent();

 

以下这幅图为配置项:

ueditor(百度编辑器)的使用记录 - 本地和七牛云的设置。_第1张图片

 

 

 

二、以下为在TP框架项目下的实际应用:

1、配置项:config.json

 /static/common/ueditor-1.4.3.3/php/config.json可以拿来设置编辑器图片上传的路径,还有其他。如下:

ueditor(百度编辑器)的使用记录 - 本地和七牛云的设置。_第2张图片

 

————以上例子里面,设置了/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6},你会发现在根目录下自动生成了该文件夹和路径,如上例子,在20170812/时间戳+6位随机数.jpg

 

项目中创建div,将编辑器放入div内:

 

 

————————————————————qiniu_ueditor的使用————————————————————

 

七牛云社区下载qiniu_ueditor:https://developer.qiniu.com/sdk#community-plugin(七牛云社区插件里有)

 配置两个文件, config.php和config.json ,默认的配置文件都在 php 目录下。 

 php/config.json的配置:————你会发现,其实config.json,你什么都不需要修改!

/* 七牛云存储配置start */
"uploadType" : "qiniu", /* qiniu|local 【qiniu】七牛云存储 【local】本地上传*/
"qiniuUploadType"  : "url", /* url|php 【url】 通过URL直传,根据token来判断返回地址,【php】 通过php文件方式传输 */
"uploadQiniuUrl"   : "http://upload.qiniu.com/", /* 七牛上传地址 */——我的空间是在华东区
"qiniuUploadPath"  : "uploads/",   /* 七牛上传的前缀 */
"qiniuDatePath"    : "mmdd",       /* 文件夹后的时间例如 uploads/0712 留空uploads/, 格式 yyyy == 2017 yy == 17 mm 月份 07 dd 日期 12 */
"uploadSaveType"   : "date",       /* 保存文件的名称类型 */
"getTokenActionName" : "getToken", /* 获取上传token的方法*——-这个是官方的配置,本身编辑器里面有方法的,不要去改路径。/
"removeImageActionName" : "remove",  /* 删除图片的方法 */
"VideoBlockFileSize" : 4194304,  /* 视频块大小,是每块4MB,所以这个不用修改 */
"VideoChunkFileSize" : 2097152,  /* 视频上传分块大小,建议是整数倍防止出错,列如1048576(1MB),524288(512KB)默认是2MB */
"VideoChunkMaxSize"  : 10485760, /* 视频文件超过多大来进行分片上传,现在默认是10MB */
"ChunkUploadQiniuUrl": "http://upload.qiniu.com", /* 分片上传创建的host地址 */
"makeFileActionName" : "makeFile", /* 合成文件的url方法 */

/* 七牛云存储配置end */

 

php/config.php的配置:

return array(
    'upload_type' => 'qiniu',  // [qiniu|local] 设置上传方式 qiniu 上传到七牛云存储 ,local 上传到本地

    /* 本地上传配置信息 */
    'orderby'     => 'asc',   // [desc|asc] 列出文件排序方式,仅仅在本地上传时候有效
    'root_path'      => $_SERVER['DOCUMENT_ROOT'], //本地上传 本地的绝对路径

    /* 七牛云存储信息配置 */
    'bucket'      => 'zhongjun', // 七牛Bucket的名称
    'host'        => 'http://cdn.域名',  // 七牛绑定的域名
    'access_key'  => 'xxxxxxxxxxxxxxxxxxxxxxxxxx', // 七牛的access_key
    'secret_key'  => 'xxxxxxxxxxxxxxxxxxxxxxxxxx', // 七牛的secret_key

    /* 上传配置 */
    'timeout'     => '3600',  // 上传时间
    'save_type'   => 'date',  // 保存类型

    /* 水印设置 */
    'use_water'   => false,  // 是否开启水印
    /* 七牛水印图片地址 */
    'water_url'   => 'http://gitwiduu.u.qiniudn.com/ueditor-bg.png',

    /* 水印显示设置 */ 
    'dissolve'    => 50,  // 水印透明度
    'gravity'      => 'SouthEast',  // 水印位置具体见文档图片说明和选项
    'dx'          => 10,  //边距横向位置
    'dy'          => 10   //边距纵向位置
);

 

 

 后台获取token方法:————这个是phpsdk的时候有用,qiniu-ueditor没有用!!!

php

namespace app\admin\controller;
use think\Controller;
use \Qiniu\Auth;
require VENDOR_PATH . 'qiniu/php-sdk/autoload.php';
class Qiniu extends Controller { public function getToken() { $auth = new Auth(config('qiniu.accessKey'), config('qiniu.secretKey')); $upToken = $auth->uploadToken(config('qiniu.bucket')); return json(['uptoken'=>$upToken]); } }

 

 ————至于单张图片的上传,请参考项目实战 - 公众号开发。

 ————qiniu_ueditor是独立的,里面已经有了配置文件和生成token的包,不需要再去下载其他的。

 

 !!!关于解决图片上传后显示太大的问题:

找到themes/iframes.css,添加以下内容:

img {
max-width: 100%; /*图片自适应宽度*/
}
body {
overflow-y: scroll !important;
}
.view {
word-break: break-all;
}
.vote_area {
display: block;
}
.vote_iframe {
background-color: transparent;
border: 0 none;
height: 100%;
}
#edui1_imagescale{display:none !important;} /*去除点击图片后出现的拉伸边框*/

————好了,接写来图片太大的时候就会适应为100%了。

 

 

获取百度编辑器里面的内容的方法:

1、直接表单提交,在初始化的加name="content"即可。

2、采用ajax传送,JQ获取的方法:

var content = UE.getEditor('ueditor').getContent();

 

 

 

 

 

 

 

 

 

————————————占位符

转载于:https://www.cnblogs.com/windyet/articles/7344783.html

你可能感兴趣的:(ueditor(百度编辑器)的使用记录 - 本地和七牛云的设置。)