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

下载后，创建demo，将容器放入表单里面：

<div class="form-group">
    <label for="">文章正文：</label>
    <!--可以在以下直接填充初始化内容-->
    <script id="ueditor" name="content" class="content" type="text/plain"></script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="/static/common/qiniu_ueditor_1.4.3-master/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="/static/common/qiniu_ueditor_1.4.3-master/ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('ueditor');
    </script>
</div>

 

获取编辑器里面的内容：

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

 

以下这幅图为配置项：

 

 

 

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

1、配置项：config.json

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

 

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

 

项目中创建div，将编辑器放入div内：

<div class="form-group">
    <label for="">备注：</label>
    <!--<textarea class="form-control" rows="5" placeholder="{$accounts.remark}" name="remark"></textarea>-->
    <!-- 加载编辑器的容器 -->
    <!--以下是默认的初始化内容，我把数据库的内容取出来放在了这里。-->
    <script id="container" name="remark" type="text/plain">
        {$accounts.remark}
    </script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="__COMMON_DIR__/ueditor-1.4.3.3/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="__COMMON_DIR__/ueditor-1.4.3.3/ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container');
    </script>
</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、直接表单提交，在初始化的<script></script>加name="content"即可。

2、采用ajax传送，JQ获取的方法：

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

 

 

 

 

 

 

 

 

 

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