thinkPHP和百度ueditor对接经验分享
下载百度ueditor文件解压到Public文件下
在需要的界面上引入以下js<script></script><br>
<script></script><br>
<script></script>
在html代码上这样来写<!-- 加载编辑器的容器 --><br>
<script></script>
在html页面上js这样来写(根据自己的需要选择自己所要的富文本功能) <script><br />
$(document).ready(function(){<br />
<br />
var ue = UE.getEditor('container',{<br />
toolbars:[[<br />
'undo', 'redo', '|',<br />
'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',<br />
'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',<br />
'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',<br />
'directionalityltr', 'directionalityrtl', 'indent', '|',<br />
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',<br />
'link', 'unlink', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',<br />
'simpleupload', 'insertimage', 'emotion', 'attachment', 'map','pagebreak', '|',<br />
'horizontal', 'date', 'time', 'spechars', '|',<br />
'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', '|',<br />
'print', 'searchreplace', 'drafts'<br />
]],<br />
initialFrameHeight:250<br />
});<br />
<br />
});<br />
<br />
<br />
</script>
此处我是使用了上传图片的功能(其他功能处理方式一样),但需要对路径配置好
在ueditor文件夹里/php/路径下有config.json文件,修改里面的imagePathFormat和imageMaxSize属性,此处是配置上传的地址。/* 上传图片配置项 */<br>
"imageActionName": "uploadimage", /* 执行上传图片的action名称 */<br>
"imageFieldName": "upfile", /* 提交的图片表单名称 */<br>
"imageMaxSize": 20480000, /* 上传大小限制,单位B */<br>
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */<br>
"imageCompressEnable": true, /* 是否压缩图片,默认是true */<br>
"imageCompressBorder": 1600, /* 图片压缩最长边限制 */<br>
"imageInsertAlign": "none", /* 插入的图片浮动方式 */<br>
"imageUrlPrefix": "", /* 图片访问路径前缀 */<br>
"imagePathFormat": "/File/Public/Uploads/ueditorimage/{yyyy}{mm}{dd}/{time}{rand:6}",
/* 列出指定目录下的图片 */<br>
"imageManagerActionName": "listimage", /* 执行图片管理的action名称 */<br>
"imageManagerListPath": "/File/Public/Uploads/ueditorimage/", /* 指定要列出图片的目录 */<br>
"imageManagerListSize": 20, /* 每次列出文件数量 */<br>
"imageManagerUrlPrefix": "", /* 图片访问路径前缀 */<br>
"imageManagerInsertAlign": "none", /* 插入的图片浮动方式 */<br>
"imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 列出的文件类型 */
如果对上传图片的地方有一个图片列表不需要,可以到相应的模板上去注销相应的代码即可,我注销的是dialogs/image/images/image.html下的 <!--<span class="tab" data-content-id="online"><var id="lang_tab_online"></var></span><br />
<span class="tab" data-content-id="search"><var id="lang_tab_search"></var></span>-->
附件是我使用ueditor的版本,建议使用最新或最稳定的版本。
ueditor_release-ueditor1_4_3_1-utf8-php.zip ( 2.78 MB 下载:45 次 )
AD:真正免费,域名+虚机+企业邮箱=0元