因?yàn)轫?xiàng)目需要，需要在Jxstar中集成百度富媒體編輯器，主要是需要使用百度地圖，嘗試了很多種方案，終于能夠優(yōu)雅的集成UEditor了，但是在集成過(guò)程中，在JxExt.js添加了代碼，不是很好，在開發(fā)過(guò)程中盡量不要修改平臺(tái)源碼，直接放圖片

百度富媒體編輯器.png

集成百度富媒體編輯器說(shuō)明

1. 導(dǎo)入百度富媒體編輯器文件，放到lib目錄下面ueditor1.4.3.3，并且把jsp頁(yè)面下的jar包添加到WEB-INFO/lib下面,其中有兩個(gè)jar版本比JxStar版本高，我使用了新版本的jar
2. 在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>

3. 在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);
                    });
                }
                //監(jiān)聽(tīng)百度富媒體編輯器內(nèi)容改變事件
                ueditor.addListener("contentChange",function(){
                    ueditor.setHeight(500);
                });
            },
            scope : this,
        };

        Ueditor.superclass.constructor.call(this);
    },
    /**
     * 重寫setValue方法 主要為修改設(shè)置值
     * */
    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);

4. 使用方法：在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);

優(yōu)化百度富媒體編輯器皮膚說(shuō)明

1. 在themes下導(dǎo)入wx皮膚包（大神定制好的，直接導(dǎo)入使用即可）
2. 在ueditor.config.js 中設(shè)置 微信主題：theme: 'wx',themePath : URL + "themes/"

升級(jí)百度富媒體編輯器百度地圖，以及自動(dòng)獲取百度地圖IP地址并綁定到指定控件說(shuō)明

1. 默認(rèn)富媒體編輯器百度地圖的版本為V1.1升級(jí)方式為：

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

2. 升級(jí)完成后有過(guò)期的API需要修改
   marker.setPoint(point)需要升級(jí)為marker.setPosition(point);
   marker.getPoint()需要升級(jí)為marker.getPosition();
   map.zoomLevel;需要升級(jí)為map.getZoom();
3. 綁定百度地圖的坐標(biāo)到指定的控件需要在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");
                 }
             }