今天做了一个小功能,而且这个功能是已经熟悉得不能在熟悉的功能了,很多时候开发者都是直接用模板来套,但是今天前后分离的文章添加功能得重新改改。以前也有写过,可是已经找不到封装好的代码在哪里了,所以今天就把使用流程列出来。
百度富文本
添加文章功能,关于标题,日期等这些就不多说了,重点是在文章的内容以及图片处理。这里以百度富文本ueditor插件为例,后端语言:php。新手在使用前应该带着几个疑问,比如:文章到数据库以什么数据类型字段存储?图片怎么对应到文章的段落?带着问题到文档中寻找答案,这是进步最快的方式。
百度富文本
首先得从百度官方去下载ueditor插件库,PHP最新版的,下载完之后解压,会看到有php的配置文件夹,文件夹名称就是php。在这个文件夹中,有配置文件config.json、上传类文件等等,这些都是可以自定义配置的,个人认为,能用百度官方提供的API解决的事情就不要去修改源码。
解压后的文件目录
打开config.json文件,里面有富文本上传功能的配置项,有上传图片配置,涂鸦配置,截图工具上传配置,远程图片抓取配置,视频上传配置,文件上传配置等都是在这个文件中配置的。默认情况下官方上传图片的路径是:/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}。这个路径是相对根目录而言的,也就是说,如果你的根目录是http://www.xxx.com /website/,那么你的图片地址就是:http://www.xxx.com/website/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}。一般来说都会自定义设置好这个目录,可以根据自己的需求而定。
图片上传配置
这时候就有一个问题,当图文并茂的时候图片的位置是没有规律的,而前端工作人员传过来的html实体中的图片地址就是config.json中配置的地址,那这时候PHP接收到这一大段的字符串就要处理了,把嵌入在HTML实体中的图片加上根目录,这样的话文章在渲染的时候图片才能显示出来。关于PHP处理文章图片的思路,详细分析一下主要有几个方面。第一步就是要从这一大段字符串中找到图片地址,然后把图片地址存放在一个临时数组里,遍历这个数组并且替换上带有根目录的地址,最后把整个字符串替换,DEMO代码如下。
DEMO
此时,可以直接入库了。开发中小伙伴遇到又一个问题就是,当编辑这篇文章的时候,发现有些图片用不了了。仔细想想发现,原来是每次提交的时候都给图片地址加上了根目录,而且编辑的时候是已经带有根目录的,所以也加上了,自然就访问不到图片了,此时只需要进行判断,用php的一个函数strpos定位一下接收的字符串中的图片地址是否带有根目录,有的话就不处理,没有的话就执行。