wangEditor使用简记

最新推荐文章于 2024-09-18 14:11:57 发布

weixin_30547797

最新推荐文章于 2024-09-18 14:11:57 发布

阅读量124

点赞数

CC 4.0 BY-SA版权

文章标签： javascript java ViewUI

原文链接：http://www.cnblogs.com/linkstar/p/6908436.html

本文介绍wangEditor富文本编辑器的配置方法，包括图片上传、格式化文本等内容，并提供SpringMVC环境下文件上传的示例代码。该编辑器布局便捷、加载速度适中，但在图片调整和撤销操作上存在局限。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面

<!--用父容器来控制宽度-->
<div style="width:800px">
    <!--用当前元素来控制高度-->
    <textarea id="textarea1" style="height:400px;max-height:500px;">
        <p>请输入内容...</p>
    </textarea>
</div>
<button id="btn1">获取内容</button>

<script type="text/javascript" src="<%=path %>/resources/dist/js/lib/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="<%=path %>/resources/dist/js/wangEditor.min.js"></script>
    <script type="text/javascript">
        var editor = new wangEditor('textarea1');
        
        // 上传图片（举例）
        editor.config.uploadImgUrl = '<%=path %>/uploads';
        
        // 设置 headers（举例）
        editor.config.uploadHeaders = {
            'Accept' : 'multipart/form-data'
        };

        // 设置 headers（举例）
        editor.config.uploadImgFileName = 'myFileName';
        
        editor.create();
        $('#btn1').click(function () {
            // 获取编辑器区域完整html代码
            var html = editor.$txt.html();
    
            // 获取编辑器纯文本内容
            var text = editor.$txt.text();
    
            // 获取格式化后的纯文本
            var formatText = editor.$txt.formatText();
            
            alert(html);
        });
    </script>

后台

如果你是用servlet那么请按照文档中给出的形式写就可以使用了，比较简单，这边不再复制代码过来了。

如果你使用springMVC的话，以下代码仅供参考

/*测试文件上传*/
    @RequestMapping("/uploads")
    public @ResponseBody String uploads(HttpServletRequest request, @RequestParam("myFileName") MultipartFile file){
        String url = null;
        try {
            url = 只要能上传文件，并且返回文件在服务器上的相对路径即可。
        } catch (IOException e) {
            e.printStackTrace();
        }
        return request.getServletContext().getContextPath() + url;
    }

返回的路径是绝对路径和相对路径均可。

评价

布置较为方便，加载速度中等，文档清晰。

实际使用中几个问题。

1、图片调整大小位置较为奇怪。有时会出现点在图片外面（少数情况）。图片加入之后没有办法调整位置，只能删除之后重新调整。

2、复制文本进入编辑器默认会换行。需要自己调整。

3、撤销Ctrl+Z可以，但是还原Ctrl+Y不行。需要手动点击。

总体感觉效果不错。使用起来方便。

转载于:https://www.cnblogs.com/linkstar/p/6908436.html