一、富文本编辑器的使用
使用的是UEditor,下载后放到weContent下即可,导入后会报错,原因有是编码格式,修改成utf-8后,即可解决中文乱码的问题,更改文成之后还没有完成配置操作,还需要修改jsp文件夹下的config.json来进行地址的修改,这里的地址设置的,是有图片操作活着别的操作时,上传到的位置,具体下面的图片上传读取数据库也会用到。最简单的更改方式就是,将绝对地址改为相对地址。
UEditor网址如下:UEditor Docs
配置好后,即可按照需求,参考上表中建立富文本编辑器,读取设置富文本编辑器的值等等操作,完成想要的需求
需要注意的是,当我们想要将富文本编辑器的内容连带着格式一起存入数据库时,富文本编辑器传回的值就是包含着html标签的内容,然后存入数据库,当然存储他们数据库字段肯定需要设置为varchar类型,当我们企图在servlet中插入数据,SQL语句可能会因为HTML标签中的双引号导致异常。比如会出现
insert into content(sex,content) values(18,"<p><img src="2143124.img"></p>")
如同上述例子,插入数据时,HTML中不可避免的属性,会导致双引号冲突,所以我们需要在后端,将富文本编辑器返回的内容,梳理一下,比如:
content=content.replace("\"", "\'");
将content里面的双引号改为单引号,就不会出现双引号冲突导致SQL语句异常
二、图片上传读取数据库操作
主要的逻辑在于,将读取文件的input[type="file"]放在form中,利用 new FormData(),来获取存入图片的数据流,将这个流对象作为参数,ajax请求,文件操作存入某个位置,即可完成上传,完成后返回这个图片存入本地的名字,将该名字存入数据库,访问时调用即可
需要注意的是,new FormData()里的参数,是dom元素,如果使用jquery的话,记得将jdom转为dom