上一篇文章(Simditor用法)仅仅是简单的默认配置,我们可自己定义工具栏button使其更丰富和实现上传图片功能

初始化编辑器

<script type="text/javascript">

   $(function(){

	toolbar = [ 'title', 'bold', 'italic', 'underline', 'strikethrough',

			'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|',

			'link', 'image', 'hr', '|', 'indent', 'outdent' ];

	var editor = new Simditor( {

		textarea : $('#editor'),

		placeholder : '这里输入内容...',

		toolbar : toolbar,  //工具栏

		defaultImage : 'simditor-2.0.1/images/image.png', //编辑器插入图片时使用的默认图片

		upload : {

		    url : 'ImgUpload.action', //文件上传的接口地址

		    params: null, //键值对,指定文件上传接口的额外參数,上传的时候随文件一起提交

		    fileKey: 'fileDataFileName', //server端获取文件数据的參数名

		    connectionCount: 3,

		    leaveConfirm: '正在上传文件'

		}

	});

   })

</script>

upload默觉得false,设置为true或者键值对就能够实现上传图片,界面是出来了,还须要进行后台编码(本例为Struts2)

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaXRteWhvbWUxOTkw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

实现功能之前须要改动一下simditor.js,我们能够对"本地图片" 用chrome审查元素发现没有name属性

打开simditor.js找到

return $input = $('<input type="file" title="' + Simditor._t('uploadImage') + '" accept="image/*">').appendTo($uploadItem);这一行,

能够搜索accept="image/*"  高速找到在input里加上 name="fileData"

例如以下：

return _this.input = $('<input name="fileData" type="file" title="' + Simditor._t('uploadImage')

+ '" accept="image/*">').appendTo($uploadBtn);

相同继续搜索accept="image/*"  以下另一个,加上name="fileData"

ImgUploadAction

public class ImgUploadAction extends ActionSupport {

	private static final long serialVersionUID = 1L;

	private String err = "";

    private String msg;              //返回信息

    private File fileData;           //上传文件

    private String fileDataFileName; //文件名称  

    public String imgUpload() {

        //获取response、request对象

        ActionContext ac = ActionContext.getContext();

        HttpServletResponse response = (HttpServletResponse) ac.get(ServletActionContext.HTTP_RESPONSE);

        HttpServletRequest request = (HttpServletRequest) ac.get(ServletActionContext.HTTP_REQUEST);  

        response.setContentType("text/html;charset=gbk");  

        PrintWriter out = null;

        try {

            out = response.getWriter();

        } catch (IOException e1) {

            e1.printStackTrace();

        }  

        String saveRealFilePath = ServletActionContext.getServletContext().getRealPath("/upload");

        File fileDir = new File(saveRealFilePath);

        if (!fileDir.exists()) { //假设不存在 则创建

            fileDir.mkdirs();

        }

        File savefile;

        savefile = new File(saveRealFilePath + "/" + fileDataFileName);

        try {

            FileUtils.copyFile(fileData, savefile);

        } catch (IOException e) {

            err = "错误"+e.getMessage();

            e.printStackTrace();

        }

        String file_Name = request.getContextPath() + "/upload/" + fileDataFileName;  

        msg = "{\"success\":\"" + true + "\",\"file_path\":\"" + file_Name + "\"}";

        out.print(msg); //返回msg信息

        return null;

    }  

    public String getErr() {

        return err;

    }

    public void setErr(String err) {

        this.err = err;

    }  

    public String getMsg() {

        return msg;

    }

    public void setMsg(String msg) {

        this.msg = msg;

    }

	public File getFileData() {

		return fileData;

	}

	public void setFileData(File fileData) {

		this.fileData = fileData;

	}

	public String getFileDataFileName() {

		return fileDataFileName;

	}

	public void setFileDataFileName(String fileDataFileName) {

		this.fileDataFileName = fileDataFileName;

	}

}  

作者：itmyhome

源代码：下载