thinkphp3.2结合ueditor1.4+使用

最近帮朋友做个网站,需要使用富文本编辑器,之前用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即可。

转载于:https://my.oschina.net/u/1765113/blog/403173

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值