tp中百度富文本编辑器ueditor的使用以及图片上传功能配置

tp中百度富文本编辑器ueditor的使用以及图片上传功能配置
相信大家都不陌生，但是每次如果要使用到再重新配置的话会很麻烦，
所以这次给做一个记录！方便自己也方便他人
下面是我的前台代码[tp框架中]

```
<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8”>
    {include file=”public/head” /}
    <meta http-equiv=”Content-Type” content=”text/html;charset=utf-8”/>
    <script type=”text/javascript” charset=”utf-8” src=”STATIC/ueditor/ueditor.config.js”></script>
    <script type=”text/javascript” charset=”utf-8” src=”STATIC/ueditor/ueditor.all.min.js”> </script>
    <!—建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败—>
    <!—这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文—>
    <script type=”text/javascript” charset=”utf-8” src=”STATIC/ueditor/lang/zh-cn/zh-cn.js”></script>
</head>
<body>

<div>

var ue = UE.getEditor(‘editor’, {
    toolbars: [
        [
            ‘source’, //源代码
//            ‘anchor’, //锚点
            ‘undo’, //撤销
            ‘redo’, //重做
            ‘bold’, //加粗
//            ‘indent’, //首行缩进
//            ‘snapscreen’, //截图
            ‘italic’, //斜体
            ‘underline’, //下划线
            ‘strikethrough’, //删除线
//            ‘subscript’, //下标
//            ‘fontborder’, //字符边框
//            ‘superscript’, //上标

‘blockquote’, //引用
//            ‘pasteplain’, //纯文本粘贴模式

//            ‘horizontal’, //分隔线

//            ‘time’, //时间
//            ‘date’, //日期

//            ‘insertrow’, //前插入行
//            ‘insertcol’, //前插入列
//            ‘mergeright’, //右合并单元格
//            ‘mergedown’, //下合并单元格
//            ‘deleterow’, //删除行
//            ‘deletecol’, //删除列
//            ‘splittorows’, //拆分成行
//            ‘splittocols’, //拆分成列
//            ‘splittocells’, //完全拆分单元格
//            ‘deletecaption’, //删除表格标题
            ‘inserttitle’, //插入标题
//            ‘mergecells’, //合并多个单元格
//            ‘deletetable’, //删除表格

//            ‘insertparagraphbeforetable’, //“表格前插入行”
            ‘insertcode’, //代码语言
            ‘fontfamily’, //字体
            ‘fontsize’, //字号
            ‘paragraph’, //段落格式
            ‘customstyle’, //自定义标题
//            ‘edittable’, //表格属性
//            ‘edittd’, //单元格属性
            ‘link’, //超链接
            ‘unlink’, //取消链接

//            ‘gmap’, //Google地图

//            ‘help’, //帮助
            ‘justifyleft’, //居左对齐
            ‘justifyright’, //居右对齐
            ‘justifycenter’, //居中对齐
            ‘justifyjustify’, //两端对齐
            ‘forecolor’, //字体颜色
            ‘backcolor’, //背景色
            ‘insertorderedlist’, //有序列表
            ‘insertunorderedlist’, //无序列表
            ‘fullscreen’, //全屏
//            ‘directionalityltr’, //从左向右输入
//            ‘directionalityrtl’, //从右向左输入
//            ‘rowspacingtop’, //段前距
//            ‘rowspacingbottom’, //段后距
//            ‘pagebreak’, //分页
//            ‘insertframe’, //插入Iframe
//            ‘imagenone’, //默认
//            ‘imageleft’, //左浮动
//            ‘imageright’, //右浮动
            ‘attachment’, //附件
            ‘imagecenter’, //居中
            ‘wordimage’, //图片转存
            ‘lineheight’, //行间距
//            ‘edittip ‘, //编辑提示

//            ‘webapp’, //百度应用
//            ‘touppercase’, //字母大写
//            ‘tolowercase’, //字母小写
            ‘background’, //背景
//            ‘template’, //模板
            ‘scrawl’, //涂鸦
            ‘music’, //音乐
//            ‘inserttable’, //插入表格
//            ‘drafts’, // 从草稿箱加载
            ‘charts’, // 图表
            ‘formatmatch’, //格式刷
            ‘print’, //打印
            ‘preview’, //预览
            ‘selectall’, //全选
            ‘removeformat’, //清除格式
            ‘cleardoc’, //清空文档
            ‘searchreplace’, //查询替换
            ‘map’, //Baidu地图
            ‘emotion’, //表情
            ‘spechars’, //特殊字符
            ‘simpleupload’, //单图上传
            ‘insertimage’, //多图上传
            ‘insertvideo’, //视频
            ‘autotypeset’, //自动排版
        ]
    ],
    autoHeightEnabled: true,
    autoFloatEnabled: true
});

</script>

</body>
</html>
```
其中引入编辑器的js相信大家一看就明了了，这里不多解释！
部分可能需要修改其中的上传的PHP类
下面是我打包的类共大家下载覆盖
其中大家可能需要修改

```
/ 前后端通信相关的配置,注释只允许使用多行方式 /
{
    / 上传图片配置项 /
    “imageActionName”: “uploadimage”, / 执行上传图片的action名称 /
    “imageFieldName”: “upfile”, / 提交的图片表单名称 /
    “imageMaxSize”: 2048000, / 上传大小限制，单位B /
    “imageAllowFiles”: [“.png”, “.jpg”, “.jpeg”, “.gif”, “.bmp”], / 上传图片格式显示 /
    “imageCompressEnable”: true, / 是否压缩图片,默认是true /
    “imageCompressBorder”: 1600, / 图片压缩最长边限制 /
    “imageInsertAlign”: “none”, / 插入的图片浮动方式 /
    “imageUrlPrefix”: “”, / 图片访问路径前缀 /
    “imagePathFormat”: “/public/uploads/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}”, / 上传保存路径,可以自定义保存路径和文件名格式 /
                                / {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 /
                                / {rand:6} 会替换成随机数,后面的数字是随机数的位数 /
                                / {time} 会替换成时间戳 /
                                / {yyyy} 会替换成四位年份 /
                                / {yy} 会替换成两位年份 /
                                / {mm} 会替换成两位月份 /
                                / {dd} 会替换成两位日期 /
                                / {hh} 会替换成两位小时 /
                                / {ii} 会替换成两位分钟 /
                                / {ss} 会替换成两位秒 /
                                / 非法字符 \ :  ? “ < > | /
                                / 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename /

/ 涂鸦图片上传配置项 /
    “scrawlActionName”: “uploadscrawl”, / 执行上传涂鸦的action名称 /
    “scrawlFieldName”: “upfile”, / 提交的图片表单名称 /
    “scrawlPathFormat”: “/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}”, / 上传保存路径,可以自定义保存路径和文件名格式 /
    “scrawlMaxSize”: 2048000, / 上传大小限制，单位B /
    “scrawlUrlPrefix”: “”, / 图片访问路径前缀 /
    “scrawlInsertAlign”: “none”,

/ 截图工具上传 /
    “snapscreenActionName”: “uploadimage”, / 执行上传截图的action名称 /
    “snapscreenPathFormat”: “/public/uploads/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}”, / 上传保存路径,可以自定义保存路径和文件名格式 /
    “snapscreenUrlPrefix”: “”, / 图片访问路径前缀 /
    “snapscreenInsertAlign”: “none”, / 插入的图片浮动方式 /

/ 抓取远程图片配置 /
    “catcherLocalDomain”: [“127.0.0.1”, “localhost”, “img.baidu.com”],
    “catcherActionName”: “catchimage”, / 执行抓取远程图片的action名称 /
    “catcherFieldName”: “source”, / 提交的图片列表表单名称 /
    “catcherPathFormat”: “/public/uploads/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}”, / 上传保存路径,可以自定义保存路径和文件名格式 /
    “catcherUrlPrefix”: “”, / 图片访问路径前缀 /
    “catcherMaxSize”: 2048000, / 上传大小限制，单位B /
    “catcherAllowFiles”: [“.png”, “.jpg”, “.jpeg”, “.gif”, “.bmp”], / 抓取图片格式显示 /

/ 上传视频配置 /
    “videoActionName”: “uploadvideo”, / 执行上传视频的action名称 /
    “videoFieldName”: “upfile”, / 提交的视频表单名称 /
    “videoPathFormat”: “/public/uploads/ueditor/php/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}”, / 上传保存路径,可以自定义保存路径和文件名格式 /
    “videoUrlPrefix”: “”, / 视频访问路径前缀 /
    “videoMaxSize”: 102400000, / 上传大小限制，单位B，默认100MB /
    “videoAllowFiles”: [
        “.flv”, “.swf”, “.mkv”, “.avi”, “.rm”, “.rmvb”, “.mpeg”, “.mpg”,
        “.ogg”, “.ogv”, “.mov”, “.wmv”, “.mp4”, “.webm”, “.mp3”, “.wav”, “.mid”], / 上传视频格式显示 /

/ 上传文件配置 /
    “fileActionName”: “uploadfile”, / controller里,执行上传视频的action名称 /
    “fileFieldName”: “upfile”, / 提交的文件表单名称 /
    “filePathFormat”: “/public/uploads/ueditor/php/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}”, / 上传保存路径,可以自定义保存路径和文件名格式 /
    “fileUrlPrefix”: “”, / 文件访问路径前缀 /
    “fileMaxSize”: 51200000, / 上传大小限制，单位B，默认50MB /
    “fileAllowFiles”: [
        “.png”, “.jpg”, “.jpeg”, “.gif”, “.bmp”,
        “.flv”, “.swf”, “.mkv”, “.avi”, “.rm”, “.rmvb”, “.mpeg”, “.mpg”,
        “.ogg”, “.ogv”, “.mov”, “.wmv”, “.mp4”, “.webm”, “.mp3”, “.wav”, “.mid”,
        “.rar”, “.zip”, “.tar”, “.gz”, “.7z”, “.bz2”, “.cab”, “.iso”,
        “.doc”, “.docx”, “.xls”, “.xlsx”, “.ppt”, “.pptx”, “.pdf”, “.txt”, “.md”, “.xml”
    ], / 上传文件格式显示 /

/ 列出指定目录下的图片 /
    “imageManagerActionName”: “listimage”, / 执行图片管理的action名称 /
    “imageManagerListPath”: “/public/uploads/ueditor/php/upload/image/“, / 指定要列出图片的目录 /
    “imageManagerListSize”: 20, / 每次列出文件数量 /
    “imageManagerUrlPrefix”: “”, / 图片访问路径前缀 /
    “imageManagerInsertAlign”: “none”, / 插入的图片浮动方式 /
    “imageManagerAllowFiles”: [“.png”, “.jpg”, “.jpeg”, “.gif”, “.bmp”], / 列出的文件类型 /

/ 列出指定目录下的文件 /
    “fileManagerActionName”: “listfile”, / 执行文件管理的action名称 /
    “fileManagerListPath”: “/public/uploads/ueditor/php/upload/file/“, / 指定要列出文件的目录 /
    “fileManagerUrlPrefix”: “”, / 文件访问路径前缀 /
    “fileManagerListSize”: 20, / 每次列出文件数量 /
    “fileManagerAllowFiles”: [
        “.png”, “.jpg”, “.jpeg”, “.gif”, “.bmp”,
        “.flv”, “.swf”, “.mkv”, “.avi”, “.rm”, “.rmvb”, “.mpeg”, “.mpg”,
        “.ogg”, “.ogv”, “.mov”, “.wmv”, “.mp4”, “.webm”, “.mp3”, “.wav”, “.mid”,
        “.rar”, “.zip”, “.tar”, “.gz”, “.7z”, “.bz2”, “.cab”, “.iso”,
        “.doc”, “.docx”, “.xls”, “.xlsx”, “.ppt”, “.pptx”, “.pdf”, “.txt”, “.md”, “.xml”
    ] / 列出的文件类型 */

}
```
下面是打包editor的下载地址，我的是按照我自己的需求进行修改过的！大家可以下载后自行配置
链接：https://pan.baidu.com/s/1Pb6fWo_9Rh0DkCyucxnDSw 密码：lkgc

注:原创不易,转载请注明出处( https://micuu.com/new/310.html )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。

tp中百度富文本编辑器ueditor的使用以及图片上传功能配置

留言反馈