百度umeditor

    UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器，具有轻量、可定制、用户体验优秀等特点。开源基于BSD协议，所有源代码在协议允许范围内可自由修改和使用。百度UEditor的推出，可以帮助不少网站开发者在开发富文本编辑器所遇到的难题，节约开发者因开发富文本编辑器所需要的大量时间，有效降低了企业的开发成本。

    官方地址：http://ueditor.baidu.com/website/

    JSP使用示例：

    版本：umeditor1_2_2-utf8-jsp

    1.解压压缩包，将资源放置项目文件夹下，jsp文件放置项目根目录下。

    2.配置umeditor.config.js的图片上传路径，即jsp文件夹下的jsp文件。详细配置如下(项目名称为bpm):

        //图片上传配置区
        ,imageUrl:"/bpm/jsp/imageUp.jsp"   //图片上传提交地址
        ,imagePath:"/bpm/jsp/"             //图片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置
        ,imageFieldName:"upfile"           //图片数据的key,若此处修改，需要在后台对应文件修改对应参数

    3.表单的使用，首先引用资源文件（注意路径）。

<!--WebEdit-->
<link href="linkey/oa/umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
<script type="text/javascript" charset="utf-8" src="linkey/oa/umeditor/umeditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="linkey/oa/umeditor/umeditor.min.js"></script>
<script type="text/javascript" src="linkey/oa/umeditor/lang/zh-cn/zh-cn.js"></script>
<script>
    //获取编辑器内容
    function getContent() {
        var arr = [];
        arr.push(UM.getEditor('myEditor').getContent());
        return arr.join("\n");
    }

    //加载编辑器内容
    function setContent() {
        var body = $("#Body").text();
        if(body!=""){
        um.setContent(body);
        }
    }
</script>

<body style="margin:0px 5px 0px 5px;" >
    <script style="width: 99%; height: 360px;" id="myEditor" type="text/plain"></script>
    <textarea style="display: none;" id="Body" name="Body"></textarea>
    <script type="text/javascript">
        var um = UM.getEditor('myEditor');setContent();
    </script>
</body>

 

posted @ 2014-12-06 20:28  去海边吧  阅读(887)  评论(0)  编辑  收藏  举报