KindEditor编辑器/分页编写

最新推荐文章于 2024-08-01 13:55:48 发布

AlwaysqQuiet

最新推荐文章于 2024-08-01 13:55:48 发布

阅读量655

点赞数

文章标签：笔记

本文链接：https://blog.csdn.net/qq_42232665/article/details/82284009

版权

本文详细介绍了如何使用KindEditor编辑器，包括文件上传、图片管理器的实现，以及客户端和服务器端的交互。同时，文章还讨论了分页列表的创建，特别提到了在Java环境下处理KindEditor数据的注意事项，以及解决时间格式问题和图片显示问题的方法。最后，文章还探讨了基于AngularJS的动态分页实现。

摘要由CSDN通过智能技术生成

KindEditor编辑器/分页编写

编辑器使用:

1.在webapp目录下新建文件夹editor,将下载好的文件里面的lang,plugins,themes文件夹和kindeditor-all.js放入editor文件夹中.
2.在页面HYML引入下列文件
<link rel="stylesheet" href="../../editor/themes/default/default.css" />
<script type="text/javascript" charset="utf-8" src="../../editor/lang/en.js"></script>
<script type="text/javascript" charset="utf-8" src="../../editor/lang/zh-CN.js"></script>
<script type="text/javascript" charset="utf-8" src="../../editor/kindeditor-all.js"></script>
3.在入口函数里面写入一下代码:
/* 编辑器 */
<script type="text/javascript">
KindEditor.ready(function(K) {
      window.editor = K.create('#editor_id');
});
</script>
4.表单中文本框中<textarea>标签id与第3步中的id'#editor_id'保持一致

文件上传

自定义上传

KindEditor默认采用PHP实现,如果使用java需要设置初始化参数

<script type="text/javascript">
// JSP
KindEditor.ready(function(K) {
        K.create('#textarea_id', {
                uploadJson : '../jsp/upload_json.jsp',//文件上传路径
                fileManagerJson : '../jsp/file_manager_json.jsp',//文件管理器实现路径
                allowFileManager : true
        });
});
</script>

如何让客户端知道文件上传成功,这里给了返回消息的格式

//*imgFile: 文件form名称
//*dir: 上传类型，分别为image、flash、media、file

//成功时
{
   "error" : 0,
   "url" : "http://www.example.com/path/to/file.ext"
}
//失败时
{
   "error" : 1,
   "message" : "错误信息"
}

文件上传Action代码编写

*注意:该代码没有进行文件的任何判断

package cn.itcast.bos.web.action.take_delivery;

import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;

import org.apache.commons.io.FileUtils;
import org.apache.struts2.ServletActionContext;
import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.Namespace;
import org.apache.struts2.convention.annotation.ParentPackage;
import org.apache.struts2.convention.annotation.Result;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;

import com.opensymphony.xwork2.ActionContext;

import cn.itcast.bos.web.action.common.BaseAction;
/**
 * KindEditor图片上传,管理功能
 * @author LIUS
 *
 */

@ParentPackage("json-default")
@Namespace("/")
@Controller                                             
@Scope("prototype")
public class ImageAction extends BaseAction<Object> {

    private static final long serialVersionUID = 1L;
    //封装参数,提供上传图片的方法
    private File imgFile;               //文件对象
    private String imgFileFileName;     //文件名
    private String imgFileContentType;  //文件类型

    private UUID randomUUID;

    public void setImgFile(File imgFile) {
        this.imgFile = imgFile;
    }

    public void setImgFileFileName(String imgFileFileName) {
        this.imgFileFileName = imgFileFileName;
    }

    public void setImgFileContentType(String imgFileContentType) {
        this.imgFileContentType = imgFileContentType;
    }
    /**
     * 本地文件上传
     * @return
     * @throws IOException 
     */
    @Action(value="image_upload",re