WangEditor实现富文本编辑和图片上传

1.首先第一步是下载压缩文件,去官网下载http://www.wangeditor.com/

2.解压文件,然后将文件夹放到webapp下面,如图所示:

WangEditor实现富文本编辑和图片上传_第1张图片

3.编写html页面,在页面中构造编辑器

   
        

4.通过富文本对象名字调用.txt.html()来获得文本中的内容


这个内容,包含你对文字的样式修改,还包含图片内容,图片的内容是通过转为base64码来保存的,可以直接插入数据库中

,显示的时候就从数据库读出来base64码,并将之转换成图片。但是切记图片不要太大,否则转成的base64码将会非常多,会挤爆你的数据库的。


5.如此可以得到良好的富文本编辑器,还能上传图片

WangEditor实现富文本编辑和图片上传_第2张图片


你可能感兴趣的:(WangEditor)