tp3.2整合ueditor富文本编辑器

在项目里做文章管理时,使用富文本编辑器比较方便,主要是多图片上传比较方便,第一次使用,感觉无从下手,这里记录一下我的方法

1.首先就是去官网下载对应的php版本的富文本编辑器,这里使用的是1.4.3.2 php版本tp3.2整合ueditor富文本编辑器

2.将下载的文件解压之后,将文件名改为Ueditor,放在项目里,我放在了Public文件夹下

tp3.2整合ueditor富文本编辑器


3.然后到view文件下的要使用富文本编辑器的页面进行初始化(引入js文件,进行设置),这里UE.getEditor 中的 info 就是 textarea的id名称

tp3.2整合ueditor富文本编辑器

tp3.2整合ueditor富文本编辑器

到这里就初始化完成了,到页面刷新就会看到富文本编辑器的框框


4.如果你是在本机上没有设置站点的情况下进行测试,编辑器已经可以使用了,因为富文本编辑的图片默认的保存地址是自动创建的,而且创建的位置是和你的项目同级的位置

5.当你要把项目上传到服务器之后,你会发现保存图片出现问题了,这是因为保存图片的文件夹在项目外面,图片就添加不上,这时就需要修改富文本编辑的配置,找到config.json文件,如图位置

tp3.2整合ueditor富文本编辑器

打开配置文件,找到imageUrlPrefix,填写你的域名,这样保存图片的文件夹就建在了项目里面,而不是和项目同级的位置,这样图片就可以上传成功了。(保存图片的文件夹是自动创建的)

tp3.2整合ueditor富文本编辑器


这里需要注意的是,富文本编辑器保存的时候是连标签一起存进数据库的,所以查询数据库之后显示在页面时需要对内容进行处理,使用:htmlspecialchars_decode(),如图tp3.2整合ueditor富文本编辑器


我设置的比较简单,传图片和内容都没有问题,网上也有很多设置方法,serverUrl好像也可以,但是我没有亲测过,感觉那个比较麻烦,本人也是新人一枚,还在编程的道路中摸索,这里也希望大神能指点一二!