最近帮朋友做个网站,需要使用富文本编辑器,之前用django+ckeditor;突然想试试thinkphp+ueditor来玩玩。
使用之前查阅了很多资料,感觉配置都比较的复杂,可能是版本的原因,其实在thinkphp3.2下还是比较的简单。配置主要是集中在以下几点。
下载相应的ueditor文件,放到public文件下。
在相应的页面引入必要的js文件
<script type="text/javascript" src="__PUBLIC__/ueditor/ueditor.config.js"></script> <script type="text/javascript" src="__PUBLIC__/ueditor/ueditor.all.min.js"></script>
3. 配置相应的菜单和相应的功能,我这边主要用到图片上传而已。
$(function(){ var ue = UE.getEditor('container',{ UEDITOR_HOME_URL:'__PUBLIC__/ueditor/', #这一步很重要,可以看ueditor的源码,配置这个url才能找到正确文件。 toolbars: [[ 'fullscreen', 'source', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|', 'directionalityltr', 'directionalityrtl', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|', 'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|', 'simpleupload', 'insertimage', 'attachment', 'pagebreak', '|', 'horizontal', 'date', 'time', 'spechars', '|', 'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|', 'print', 'preview', 'searchreplace' ]] ,initialFrameWidth:900 ,initialFrameHeight:420 ,autoHeightEnabled:false }); })
5. 修改上传的路径和显示的路径,我这边偷懒直接在源文件中进行修改。打开php/config.json
"imagePathFormat":路径改成自己想要的上传路径 imageManagerListPath:指定要显示的图片路径
这样就OK了。
备注,如果想将ueditor保存在数据库中的数据正确显示在页面或者重新返回到ueditor中,只需要对内容进行编译下
htmlspecialchars_decode即可。