jq960素材网

当前位置: 主页 > JQ/JS插件 > UI类 > 编辑器 >

jQuery文本编辑插件wangEditor

官方网址: 下载次数:
插件描述

jQuery文本编辑插件wangEditor基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费

配置说明

####前端配置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|服务器端错误"


顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表