牛骨文教育服务平台(让学习变的简单)

配置说明

前端配置server地址


上传文档,需要为 editor.config.uploadImgUrl 参数配置 server 端的地址。配置了之后,编辑器就自动显示上传功能(否则不显示)。注意,要在 editor.create() 之前完成配置。

另外 - 1,如果需要在上传的同时要传递一些自定义参数(如token)到后台,可以通过editor.config.uploadParams来配置,后台可以通过requrest来获取这些参数的值。

另外 - 2,如果需要在上传图片时候自定义设置requestheaders,可通过editor.config.uploadHeaders来配置。

另外 - 3,如果你只需要上传图片功能,而不需要插入网络图片功能,在editor.create()之前配置editor.config.hideLinkImg = true;即可。前提是你已经配置好了图片上传功能,v2.1.14版本开始支持。

代码示例如下:

<div id="div1">
    <p>请输入内容...</p>
</div>

<!--这里引用jquery和wangEditor.js-->
<script type="text/javascript">
    var editor = new wangEditor("div1");
    
    // 上传图片(举例)
    editor.config.uploadImgUrl = "/upload";
    
    // 配置自定义参数(举例)
    editor.config.uploadParams = {
        token: "abcdefg",
        user: "wangfupeng1988"
    };
    
    // 设置 headers(举例)
    editor.config.uploadHeaders = {
        "Accept" : "text/x-json"
    };
    
    // 隐藏掉插入网络图片功能。该配置,只有在你正确配置了图片上传功能之后才可用。
    editor.config.hideLinkImg = true;
    
    editor.create();
</script>

server端获取文件数据

  • 建议通过index获取:

建议通过index的方式从request.files中获取,例如var file = request.files[0];。不同的后端语言语法可能不同,可根据实际情况调整。

  • 通过name获取:

如果想要通过namerequest.files中获取文件,可通过以下方式:

  • var file = request.files["wangEditorH5File"]; // 获取 h5 方式上传的文件
  • var file = request.files["wangEditorFormFile"]; // 获取 form 方式上传的文件
  • var file = request.files["wangEditorPasteFile"]; // 获取粘贴截图 方式上传的文件
  • var file = request.files["wangEditorDragFile"]; // 获取拖拽上传的文件

不同的后端语言语法可能不同,可根据实际情况调整。

注意,如果你觉得以上四个name比较繁琐,你完全可以通过配置editor.config.uploadImgFileName来将四个name统一为一个。例如,无论是哪种方式上传,你都想通过myFileName获取,可以这样配置:editor.config.uploadImgFileName = "myFileName"

  • 获取自定义参数

如果你通过editor.config.uploadParams配置了上传时的自定义参数,后台可以通过request获取。注意,这里配置的参数要和图片文件一起上传,因此要使用multipart/form-data的方式上传(如下图),后台接收的时候要注意。


  • 自定义设置headers

可通过editor.config.uploadHeaders设置上传图片时requestheaders,上面的代码示例中设置了"Accept" : "text/x-json",那么上传图片时候会有如下效果:

server端返回规则

  • 上传成功:

上传成功后,server 端需要返回(即:response)图片的 url 地址,例如:

"http://xxx.com/imgs/abc.png"
  • 上传失败:

上传失败后,server 端需要返回(即:response"error|错误信息提示..."格式的字符串。其中的错误信息提示,可以自己设置。例如:

"error|服务器端错误"