Eclipse中使用kindeditor插件

来源:互联网 发布:网络捕鱼游戏平台大全 编辑:程序博客网 时间:2024/05/29 19:59

kindeditor插件是一款可以在线编辑文本格式的插件,对中文支持很好。其在Eclipse中的用法也有很多大神介绍的很详细了,我再这里只是记录一下我的使用心得。

使用kindeditor目的:在线编辑文章格式,并保存到后台的数据库中


第一步:将解压好的kindeditor文件夹整体拖入webapp的文件夹下。

目录结构如下:
工程结构目录
其实做完这步,完全可以根据example文件下中的default.html完成操作了

第二步:在html或者jsp或者httl文件中添加form表单

<form name="carContent" method="post" action="changeContent.action">            <textarea id="content" name="content" style="height:550px;visibility:hidden;">这里是编辑框中的内容</textarea>                <input class="btn" type="submit" name="button" value="提交" />        </form>

action属性为对应后台的方法,(也就是Action中的方法名)
textarea中的name属性要对应Action中的属性。(如:httl中的写法为实体类.该类的属性名
而textarea的id正是kindeditor找到改变后文本的标识。

第三步:导入两个js文件

<script charset="utf-8" src="../../kindeditor/kindeditor-min.js"></script><script charset="utf-8" src="../../kindeditor/lang/zh_CN.js"></script>  

当然如果对样式不满意,可以随意添加css控制
此时,点击“提交”按钮,就可以将textarea中的文本发送到后台action中了。


第四步:这一步是针对修改textarea中的文本后,如何保存,保存后如何提交的。

如果你想修改textarea中的文本格式,并保存成带html标签的字符串保存,那就需要添加些额外的代码。
如果仔细研究default.html你会发现,再textarea下面会有很多按钮功能,这是我们需要的是“取得HTML”的效果,他的js代码如下:

    var editor;KindEditor.ready(function(K) {    editor = K.create('textarea[name="content"]', {                allowFileManager : true    });    K('input[name=getHtml]').click(function(e) {                //取得html字符串后的操作    });

这时只需添加一个保存按钮,让该按钮触发这段js代码即可。

当然以上只是kindeditor的一部分功能,更多功能,再example中也能找到答案。

0 0
原创粉丝点击