Jxstar集成百度富媒体编辑器UEditor

因为项目需要，需要在Jxstar中集成百度富媒体编辑器，主要是需要使用百度地图，尝试了很多种方案，终于能够优雅的集成UEditor了，但是在集成过程中，在JxExt.js添加了代码，不是很好，在开发过程中尽量不要修改平台源码，直接放图片

百度富媒体编辑器.png

集成百度富媒体编辑器说明

导入百度富媒体编辑器文件，放到lib目录下面ueditor1.4.3.3，并且把jsp页面下的jar包添加到WEB-INFO/lib下面,其中有两个jar版本比JxStar版本高，我使用了新版本的jar
在index_top.jsp 文件底部引入

    <script type="text/javascript" src="lib/ueditor1.4.3.3/ueditor.config.js"></script>
    <script type="text/javascript" src="lib/ueditor1.4.3.3/ueditor.all.js"></script>

在JxExt.js添加如下代码

Ueditor = Ext.extend(Ext.form.Field ,{
    id : 'editor',
    defaultAutoCreate : {tag: 'div'},
    constructor : function(cfg){
        Ext.apply(this,cfg);
        this.listeners = {
            render : function(cmp) {
                //注意此处zIndex的值为8999 目的是防止百度富媒体编辑器覆盖Extjs的弹出框
                var ueditor = new UE.ui.Editor({zIndex:8999,initialFrameWidth:"100%",initialFrameHeight : 500,});
                this.ueditor = ueditor;
                ueditor.render(cmp.id);
                if(this.originalValue){
                    var v = this.originalValue;
                    ueditor.ready(function(){
                        ueditor.setHeight(500);
                        ueditor.setContent(v);
                    });
                }
                //监听百度富媒体编辑器内容改变事件
                ueditor.addListener("contentChange",function(){
                    ueditor.setHeight(500);
                });
            },
            scope : this,
        };

        Ueditor.superclass.constructor.call(this);
    },
    /**
     * 重写setValue方法 主要为修改设置值
     * */
    setValue : function(value){
        var self = this;
        if(!self.ueditor){
            self.originalValue = value;
        }else{
            self.ueditor.ready(function(){
                self.ueditor.setHeight(500);
                self.ueditor.setContent(value);
            });
        }
    },
    getValue : function(){
        var self = this;
        var ueditorValue = "";
        if(!self.ueditor){
            ueditorValue =  self.originalValue ;
        }else{
            self.ueditor.ready(function(){
                self.ueditor.setHeight(500);
                ueditorValue = self.ueditor.getContent();
            });
        }
        return ueditorValue;
    }



});
Ext.reg('ueditor', Ueditor);

使用方法：在Inc文件中直接修改控件的类型即可

var isret = false;
var findcfg = function(datas) {
    if (isret) return;
    for (var i = datas.length-1; i >= 0; i--) {
        if (datas[i].name == 'uoa_news__news_content') {
            var heitem = datas[i];
            if (heitem) {
                delete heitem.width;
                heitem.xtype = 'ueditor';
                heitem.anchor = '100%';
                heitem.maxLength = 20000;
            }
            isret = true; return;
        } else {
            if (datas[i].items && datas[i].items.length > 0) {
                findcfg(datas[i].items);
            }
        }
    }
};
findcfg(items);

优化百度富媒体编辑器皮肤说明

在themes下导入wx皮肤包（大神定制好的，直接导入使用即可）
在ueditor.config.js 中设置微信主题：theme: 'wx',themePath : URL + "themes/"

升级百度富媒体编辑器百度地图，以及自动获取百度地图IP地址并绑定到指定控件说明

默认富媒体编辑器百度地图的版本为V1.1升级方式为：

<script type="text/javascript" src="http://api.map.baidu.com/api?ak=19pbPPDtgoBhWrOFmGmp7hq9BUCsOMvC&v=2.0&services=true"></script>

升级完成后有过期的API需要修改
marker.setPoint(point)需要升级为marker.setPosition(point);
marker.getPoint()需要升级为marker.getPosition();
map.zoomLevel;需要升级为map.getZoom();
绑定百度地图的坐标到指定的控件需要在map.html上修改代码：

      var mapCoordinate = point.lng + ',' + point.lat;
              if($G('is_dynamic').checked) {
                  var URL = editor.options.UEDITOR_HOME_URL,
                      url = [URL + (/\/$/.test(URL) ? '':'/') + "dialogs/map/show.html" +
                          '#center=' + center.lng + ',' + center.lat,
                          '&zoom=' + zoom,
                          '&width=' + mapWidth,
                          '&height=' + mapHeight,
                          '&markers=' + point.lng + ',' + point.lat,
                          '&markerStyles=' + 'l,A'].join('');
                  editor.execCommand('inserthtml', '<iframe mapcoordinate="'+mapCoordinate+'" class="ueditor_baidumap" src="' + url + '"' + (styleStr ? ' style="' + styleStr + '"' :'') + ' frameborder="0" width="' + (mapWidth+4) + '" height="' + (mapHeight+4) + '"></iframe>');
              } else {
                  var url = "http://api.map.baidu.com/staticimage?center=" + center.lng + ',' + center.lat +
                          "&zoom=" + zoom + "&width=" + size.width + '&height=' + size.height + "&markers=" + point.lng + ',' + point.lat;
                  editor.execCommand('inserthtml', '<img mapcoordinate="'+mapCoordinate+'" width="'+ size.width +'"height="'+ size.height +'" src="' + url + '"' + (styleStr ? ' style="' + styleStr + '"' :'') + '/>');
              }

在ueditor.all.js修改代码即可：

     UE.commands['inserthtml'] = {
         execCommand: function (command,html,notNeedFilter){
             if(document.getElementsByName('uoa_news__map_coordinate').length > 0){
                 var objDiv = document.createElement("div");
                 objDiv.innerHTML =html;
                 if(objDiv.childNodes[0].getAttribute("mapcoordinate")){
                     document.getElementsByName('uoa_news__map_coordinate')[0].value = objDiv.childNodes[0].getAttribute("mapcoordinate");
                 }
             }

Jxstar集成百度富媒体编辑器UEditor

集成百度富媒体编辑器说明

优化百度富媒体编辑器皮肤说明

升级百度富媒体编辑器百度地图，以及自动获取百度地图IP地址并绑定到指定控件说明

推荐阅读更多精彩内容