thinkphp3.2结合ueditor1.4+使用

原创
2015/04/17 18:48
阅读数 170

最近帮朋友做个网站,需要使用富文本编辑器,之前用django+ckeditor;突然想试试thinkphp+ueditor来玩玩。

使用之前查阅了很多资料,感觉配置都比较的复杂,可能是版本的原因,其实在thinkphp3.2下还是比较的简单。配置主要是集中在以下几点。

  1. 下载相应的ueditor文件,放到public文件下。

  2. 在相应的页面引入必要的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即可。

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
1 收藏
0
分享
返回顶部
顶部