About the problem of uploading pictures in simditor

We can customize the toolbar buttons to make simditor richer and realize the function of uploading pictures

Initialize the editor

<script type="text/javascript">
   $(function(){
    toolbar = [ &#39;title&#39;, &#39;bold&#39;, &#39;italic&#39;, &#39;underline&#39;, &#39;strikethrough&#39;,
            &#39;color&#39;, &#39;|&#39;, &#39;ol&#39;, &#39;ul&#39;, &#39;blockquote&#39;, &#39;code&#39;, &#39;table&#39;, &#39;|&#39;,
            &#39;link&#39;, &#39;image&#39;, &#39;hr&#39;, &#39;|&#39;, &#39;indent&#39;, &#39;outdent&#39; ];
    var editor = new Simditor( {
        textarea : $(&#39;#editor&#39;),
        placeholder : &#39;这里输入内容...&#39;,
        toolbar : toolbar,  //工具栏
        defaultImage : &#39;simditor-2.0.1/images/image.png&#39;, //编辑器插入图片时使用的默认图片
        upload : {
            url : &#39;ImgUpload.action&#39;, //文件上传的接口地址
            params: null, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
            fileKey: &#39;fileDataFileName&#39;, //服务器端获取文件数据的参数名
            connectionCount: 3,
            leaveConfirm: &#39;正在上传文件&#39;
        }
    });
   })
</script>

upload defaults to false, set it to true or key-value pair to upload pictures, the interface is out, and Background coding is required (Struts2 in this case)

You need to modify simditor.js before implementing the function. We can use chrome to inspect the element for "local pictures" and find that there is no name attribute

Open simditor.js and find it

return $input = $('').appendTo($uploadItem) ;In this line,

you can search accept="image/*" to quickly find and add name="fileData"

in the input as follows:

return _this.input = $(&#39;<input name="fileData" type="file" title="&#39; + Simditor._t(&#39;uploadImage&#39;)
+ &#39;" accept="image/*">&#39;).appendTo($uploadBtn);

Also continue to search accept="image/*" There is another one below, add 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;
    }
}

Related articles:

How to use Simditor

javascript - simditor Is there a size limit for uploading images?

javascript - simditor failed to upload large image