Kindeditor的使用

最近在做一个个人博客系统,发表博文那一块需要使用一个富文本编辑器。在网页上选了半天,最终决定使用Kindeditor这个富文本编辑器,因为这个编辑器的功能十分强大且界面美观。不过由于没有用过这玩意儿,参考着网上的文章和API来弄,其他的功能都没有问题,就那个图片上传的功能死活不对。经过仔细的研究,终于成功的解决了这个问题,原来原因就是文件路径的问题

我们来一步一步的实现这个编辑器的使用。

(1)首先去官网下载一个Kindeditor的压缩包,解压后删除不用的文件,我的项目是java项目,所以就只保留了json文件夹,其余的什么asp、php、example统统删除,并将剩余的文件拷贝到新建的web项目的webroot文件夹下面。原来的jsp文件夹下面还有lib文件夹和demo文件夹,我们将lib文件夹剪切到项目的WEB-INF文件夹下(注意要build path),新建jsp文件夹,将demo.jsp拷贝到这个文件夹下面, 还有一点,就是我们需要将attached文件夹放到webroot文件夹下,保持和kindeditor文件夹位于同一层级,结构如下图所示:

Kindeditor的使用_第1张图片

(2)打开demo.jsp文件,在jsp文件顶部添加:

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

效果如下图所示:

Kindeditor的使用_第2张图片

(3)将demo.jsp中所有的相对路径都替换成绝对路径,如下图所示:

Kindeditor的使用_第3张图片

这一步至关重要,因为绝大部分的问题其实就是这路径的问题所引发的。

然后我们就可以开始测试:

Kindeditor的使用_第4张图片


总结:前段开发中经常遇到路径的问题,因为每个项目的结构不一致,所以经常会出现因为路径问题而导致的各种奇葩的问题,所以我们最好使用绝对路径来解决这个问题。

你可能感兴趣的:(Kindeditor的使用)