jq使用什么富文本框组件

mini云码 发布日期： 2025-11-10 08:58

随着目前vue技术的逐渐流程，目前使用Jquery技术的富文本框越来越少。

其实也不是富文本框不支持jq，而是针对jq的文章太少，富文本框的官方文档都是以vue为主了，找个富文本框的例子太难。

因为wangeditor这种富文本框在jq上使用比较简单，因此，就举一个wangeditor的例子吧：

html代码：

  < src="/js/wangeditor.js"></>
  <link href="/css/wangeditor.css" rel="stylesheet"/>
    <style>
        #editor—wrapper {
            border: 1px solid #ccc;
            z-index: 100; /* 按需定义 */
        }
        #toolbar-container {
            border-bottom: 1px solid #ccc;
        }
        #editor-container {
            height: 500px;
        }
    </style>
<div id="editor—wrapper">
    <div id="toolbar-container"><!-- 工具栏 --></div>
    <div id="editor-container"><!-- 编辑器 --></div>
</div>

js代码：

   const E = window.wangEditor;

    // Change language
    const LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN'
    E.i18nChangeLanguage(LANG)

    const editorConfig = { MENU_CONF: {} }
    editorConfig.MENU_CONF['uploadImage'] = {
        server: '/uploadServerPath',
        // server: '/api/upload-img-10s', // test timeout
        // server: '/api/upload-img-failed', // test failed
        // server: '/api/xxx', // test 404

        timeout: 70 * 1000, // 5s

        fieldName: 'uploadname',
        meta: { token: 'xxx', a: 100 },
        metaWithUrl: true, // join params to url
        headers: { Accept: 'application/json' },

        maxFileSize: 10 * 1024 * 1024, // 10M

        base64LimitSize: 10 * 1024, // insert base64 format, if file's size less than 5kb

        onBeforeUpload(file) {
            console.log('onBeforeUpload', file)

            return file // will upload this file
            // return false // prevent upload
        },
        onProgress(progress) {
            console.log('onProgress', progress)
        },
        onSuccess(file, res) {
            console.log('onSuccess', file, res)
        },
        onFailed(file, res) {
            alert(res.message)
            console.log('onFailed', file, res)
        },
        onError(file, err, res) {
            alert(err.message)
            console.error('onError', file, err, res)
        },

    }
    let htmlBody='<p>123456</p>';
    let editor = null;
    //下面的代码可以在ajax中执行
    editor= E.createEditor({
           selector: '#editor-container',
            html: htmlBody
            config: editorConfig
    })

    let toolbar = E.createToolbar({
          editor,
          selector: '#toolbar-container',
     });
    

java后端实现文件上传

    //下面的上传代码，以java为例，关键是返回errno和data数据，其中data下面有url属性
    @RequestMapping(value="/uploadServerPath")
    @ResponseBody
    public Map uploadNewCmsFile(@RequestParam(value = "uploadname", required = false) MultipartFile file, HttpServletRequest request, HttpServletResponse response){
            Map retMap=new HashMap();
            //做你自己的上传逻辑，代码就不详细写了
             retMap.put("errno",0);
            Map dataMap=new HashMap();
            //下面的url根据自己的逻辑拼写
            dataMap.put("url","https://www.xxxx.com/xxxSavePath");
            dataMap.put("alt","");
            List datList=new ArrayList();
            datList.add(dataMap);
            retMap.put("data",datList);
            return retMap;
    }