下载源代码
1.引入ueditor文件,body中建立富文本容器
<script type="text/javascript" charset="utf-8" src="/kadmin/zlmm/static/ueditor/ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="/kadmin/zlmm/static/ueditor/ueditor.all.min.js"></script><script type="text/javascript" charset="utf-8" src="/kadmin/zlmm/static/ueditor/lang/zh-cn/zh-cn.js"></script>.....<body><form class="layui-form" action=""><div class="layui-form-item layui-form-text"><div class="layui-input-inline" style="width: 100%"><script id="editor" type="text/plain" name="content" style="width:100%;height:450px;"></script> <!--容器建立,script id --></div></div>....</form></body>
2.实例化编辑器,以及配置参数(参数可查看源码 ueditor.config.js 配置参数,尽可能不改源码!)
//实例化编辑器var ue = UE.getEditor('editor', {toolbars: [['undo', //撤销'bold', //加粗'underline', //下划线'preview', //预览'horizontal', //分隔线'inserttitle', //插入标题'cleardoc', //清空文档'fontfamily', //字体'fontsize', //字号'paragraph', //段落格式'simpleupload', //单图上传'insertimage', //多图上传'attachment', //附件'music', //音乐'inserttable', //插入表格'emotion', //表情'insertvideo', //视频'justifyleft', //居左对齐'justifyright', //居右对齐'justifycenter', //居中对'justifyjustify', //两端对齐'forecolor', //字体颜色'fullscreen', //全屏'edittip ', //编辑提示'customstyle', //自定义标题'template', //模板'source',//源码]],elementPathEnabled:false,autoHeightEnabled:false});ue.ready(function() {//赋值给UEditorue.setContent('<?php echo $content;?>'); //获取html内容,返回: <p>hello</p>var html = ue.getContent();//获取纯文本内容,返回: hellovar txt = ue.getContentTxt(); });
*上传功能(主要是存储地址)在各自版本中的config.json中
文件保存到相对于服务器www下地址。在上传成功后返回图片全路径
(
"imageUrlPrefix": "http://127.0.0.1", /* 图片访问路径前缀 */
"imagePathFormat": "/uploadnew/zlmm/ueditor/image/{yyyy}/{mm}/{dd}/{time}{rand:6}"
)
保存成功后返回地址:http://127.0.0.1/uploadnew/zlmm/ueditor/image/{yyyy}/{mm}/{dd}/{time}{rand:6}
/* 前后端通信相关的配置,注释只允许使用多行方式 */{/* 上传图片配置项 */"imageActionName": "uploadimage", /* 执行上传图片的action名称 */"imageFieldName": "upfile", /* 提交的图片表单名称 */"imageMaxSize": 2048000, /* 上传大小限制,单位B */"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */"imageCompressEnable": true, /* 是否压缩图片,默认是true */"imageCompressBorder": 1600, /* 图片压缩最长边限制 */"imageInsertAlign": "none", /* 插入的图片浮动方式 */"imageUrlPrefix": "http://127.0.0.1", /* 图片访问路径前缀 */"imagePathFormat": "/uploadnew/zlmm/ueditor/image/{yyyy}/{mm}/{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 *//* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 *//* {rand:6} 会替换成随机数,后面的数字是随机数的位数 *//* {time} 会替换成时间戳 *//* {yyyy} 会替换成四位年份 *//* {yy} 会替换成两位年份 *//* {mm} 会替换成两位月份 *//* {dd} 会替换成两位日期 *//* {hh} 会替换成两位小时 *//* {ii} 会替换成两位分钟 *//* {ss} 会替换成两位秒 *//* 非法字符 \ : * ? " < > | *//* 具请体看线上文档: /ueditor/#use-format_upload_filename *//* 涂鸦图片上传配置项 */"scrawlActionName": "uploadscrawl", /* 执行上传涂鸦的action名称 */"scrawlFieldName": "upfile", /* 提交的图片表单名称 */"scrawlPathFormat": "/uploadnew/zlmm/ueditor/image/{yyyy}/{mm}/{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */"scrawlMaxSize": 2048000, /* 上传大小限制,单位B */"scrawlUrlPrefix": "http://127.0.0.1", /* 图片访问路径前缀 */"scrawlInsertAlign": "none",/* 截图工具上传 */"snapscreenActionName": "uploadimage", /* 执行上传截图的action名称 */"snapscreenPathFormat": "/uploadnew/zlmm/ueditor/image/{yyyy}/{mm}/{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */"snapscreenUrlPrefix": "http://127.0.0.1", /* 图片访问路径前缀 */"snapscreenInsertAlign": "none", /* 插入的图片浮动方式 *//* 抓取远程图片配置 */"catcherLocalDomain": ["127.0.0.1", "localhost", ""],"catcherActionName": "catchimage", /* 执行抓取远程图片的action名称 */"catcherFieldName": "source", /* 提交的图片列表表单名称 */"catcherPathFormat": "/uploadnew/zlmm/ueditor/image/{yyyy}/{mm}/{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */"catcherUrlPrefix": "http://127.0.0.1", /* 图片访问路径前缀 */"catcherMaxSize": 2048000, /* 上传大小限制,单位B */"catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 抓取图片格式显示 *//* 上传视频配置 */"videoActionName": "uploadvideo", /* 执行上传视频的action名称 */"videoFieldName": "upfile", /* 提交的视频表单名称 */"videoPathFormat": "/uploadnew/zlmm/ueditor/video/{yyyy}/{mm}/{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */"videoUrlPrefix": "http://127.0.0.1", /* 视频访问路径前缀 */"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": "/uploadnew/zlmm/ueditor/file/{yyyy}/{mm}/{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */"fileUrlPrefix": "http://127.0.0.1", /* 文件访问路径前缀 */"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": "/uploadnew/zlmm/ueditor/image/", /* 指定要列出图片的目录 */"imageManagerListSize": 20, /* 每次列出文件数量 */"imageManagerUrlPrefix": "http://127.0.0.1", /* 图片访问路径前缀 */"imageManagerInsertAlign": "none", /* 插入的图片浮动方式 */"imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 列出的文件类型 *//* 列出指定目录下的文件 */"fileManagerActionName": "listfile", /* 执行文件管理的action名称 */"fileManagerListPath": "/uploadnew/zlmm/ueditor/file/", /* 指定要列出文件的目录 */"fileManagerUrlPrefix": "http://127.0.0.1", /* 文件访问路径前缀 */"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"] /* 列出的文件类型 */}
效果图: