222222
Menu

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

发布时间:2018-08-09 11:01:14作者:热度: 909 ℃

下载链接在文章结束的位置

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>

    <script id="editor" name="content" type="text/plain" style="width:1024px;height:500px;"></script>
</div>


<script type="text/javascript">

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

软件下载链接
点击下载(1积分) 如何下载 积分获取攻略

下载说明:本站软件全部都是由个收集,绝对无毒无公害!如若有侵权或,请联系qq571031767进行删除!
软件1群:209183654     2群:524440238    3群:397053211    4群:684245561

米醋儿 micuer.com

  1. QQ3群:397053211
  2. QQ2群:524440238
  3. QQ1群:209183654
  4. 一键关注微博

旗下网站以及工具

    米醋儿TV 免费领券网
    程序员在线工具箱
    思琪导购网
    网络骗子曝光平台

友情连接