枫芸志

【ExtJs】Ext.form.CKEditor：整合CKEditor的组件

CKEditor是一个出色的所见即所得的富文本编辑器，相比ExtJs原生的htmleditor要强大很多，于是把CKEditor集成到ExtJs中便是一个很好的选择。

从ExtJs官方论坛找到了整合的实例，不过其中的问题不少，比如组件setValue、isDiry等方法无法得到正确的结果。经过改造，修正了以上问题，并将CKFinder做了整合，同时增加了对CKEditor工具栏选择配置的支持。

修改后的Ext.form.CKEditor组件源码如下：





/****************************************************
* CKEditor Extension
* by Maple Nan 2010.7.21
* http://witmax.cn/extjs-ckeditor.html
*****************************************************/
Ext.form.CKEditor = function(config){
  this.config = config;
  Ext.form.CKEditor.superclass.constructor.call(this, config);
};
Ext.form.CKEditor.CKEDITOR_CONFIG = "/ckeditor/config.js";
Ext.form.CKEditor.CKEDITOR_TOOLBAR = "Default";
Ext.extend(Ext.form.CKEditor, Ext.form.TextArea,  {
  onRender : function(ct, position){
    if(!this.el){
      this.defaultAutoCreate = {
        tag: "textarea",
        autocomplete: "off"
      };
    }
    Ext.form.TextArea.superclass.onRender.call(this, ct, position);
    var config = {
      customConfig: Ext.form.CKEditor.CKEDITOR_CONFIG
      //,toolbar: Ext.form.CKEditor.CKEDITOR_TOOLBAR  // 如需要默认工具条设置，请去掉行前注释
    };
    Ext.apply(config, this.config.CKConfig);
    var editor = CKEDITOR.replace(this.id, config);
    CKFinder.setupCKEditor( editor, './ckfinder/' ) ;
  },

  onDestroy: function(){
    if (CKEDITOR.instances[this.id]) {
      delete CKEDITOR.instances[this.id];
    }
  },

  setValue : function(value){
    Ext.form.TextArea.superclass.setValue.apply(this,[value]);
    CKEDITOR.instances[this.id].setData( value );
  },

  getValue : function(){
    CKEDITOR.instances[this.id].updateElement();
    var value=CKEDITOR.instances[this.id].getData();
    Ext.form.TextArea.superclass.setValue.apply(this,[value]);
    return Ext.form.TextArea.superclass.getValue.apply(this);
  },

  getRawValue : function(){
    CKEDITOR.instances[this.id].updateElement();
    return Ext.form.TextArea.superclass.getRawValue(this);
  },

  isDirty : function() {
    if(this.disabled) {
      return false;
    }
    var value = String(this.getValue()).replace(/\s/g,'');
    value = (value == "<br />" || value == "<br/>" ? "" : value);
    this.originalValue = this.originalValue || "";
    this.originalValue = this.originalValue.replace(/\s/g,'');
    return String(value) !== String(this.originalValue) ? String(value) !== "<p>"+String(this.originalValue)+"</p>" : false;
  }
});
Ext.reg('ckeditor', Ext.form.CKEditor);

由于Ext.form.CKEditor组件的特殊性，需要重写Ext.form.BasicForm组件的一些方法，对Ext.form.CKEditor组件提供特殊的支持，Ext.form.BasicForm组件重写部分源码如下：

// Add methods to the BasicForm that clears the isDirty flag to return "false" again.
Ext.override(Ext.form.BasicForm,{
  /**
   * clear the value of all items in BasicForm and set originalValue to ''
   * @param {Object} o
   */
  clearValues: function(o){
    o = o || this;
    o.items.each(function(f){
      if(f.items){
        this.clearValues(f);
      } else if(f.setValue){
        f.setValue('');
        // ckeditor needs being treated specially, or an error will appear in IE
        if (f.getXType() == "ckeditor"){
          f.originalValue = '';
        }
        else if (f.getValue){
          f.originalValue = f.getValue();
        }
      }
    }, this);
    this.clearInvalid();
  }

  /**
   * clear isDirty flag of all items of BasicForm
   * @param {Object} o
   *
   * reference: http://www.extjs.com/forum/showthread.php?t=40568
   */
  ,clearDirty : function(o){
    o = o || this;
    o.items.each(function(f){
      if(f.items){
        this.clearDirty(f);
      } else if(typeof(f.originalValue) != "undefined" && f.getValue){  // Ext.isEmpty(f.originalValue) &&
        f.originalValue = f.getValue();
      }
    }, this);
  }

  ,setValues : function(values){
    if(Ext.isArray(values)){ // array of objects
      for(var i = 0, len = values.length; i < len; i++){
        var v = values[i];
        var f = this.findField(v.id);
        if(f){
          f.setValue(v.value);
          // ckeditor is special
          if (f.getXType() == "ckeditor"){
            f.originalValue = v.value;
          }
          // checkboxgroup.originalValue won't be set, or it may cause a bug when reset
          else if(this.trackResetOnLoad && typeof(f.originalValue) != "undefined" && f.getValue){
            f.originalValue = f.getValue();
          }
        }
      }
    }else{ // object hash
      var field, id;
      for(id in values){
        if(typeof values[id] != 'function' && (field = this.findField(id))){
          field.setValue(values[id]);
          if (this.trackResetOnLoad){
            if (field.getXType() == "ckeditor"){
              field.originalValue = values[id];
            }
            else if(typeof(field.originalValue) != "undefined" && field.getValue){
              field.originalValue = field.getValue();
            }
          }
        }
      }
    }
    return this;
  }

  ,findField : function(id){
    var field = this.items.get(id);
    if(!field){
      this.items.each(function(f){
        if(f.isXType('radiogroup')||f.isXType('checkboxgroup')){
          if (f.isXType('radiogroup'))
            f.unitedValue = true;
          f.items.each(function(c){
            if(c.isFormField && (c.dataIndex == id || c.id == id || c.getName() == id)){
              field = f.unitedValue ? f : c;
              if (typeof(f.trackResetOnLoad) == "undefined")
                f.trackResetOnLoad = this.trackResetOnLoad;
              return false;
            }
          }, this);
        }
        if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
          field = f;
          return false;
        }
      }, this);
    }
    return field || null;
  }
});

组件使用方法：

{
  xtype: 'ckeditor',
  fieldLabel: 'Editor',
  name: 'htmlcode',
  CKConfig: {
    /* Enter your CKEditor config paramaters here or define a custom CKEditor config file. */
    customConfig : '/ckeditor/config.js',
    toolbar: 'Other',
    height : 200,
    width: 250
  }
}

说明：以上customConfig为CKEditor组件配置文件的绝对路径（使用相对路径好像有问题，会无效，暂不清楚原因），不设定时默认为/ckeditor/config.js，默认值设定可以通过对Ext.form.CKEditor.CKEDITOR_CONFIG重新赋值来完成，也可修改Ext.form.CKEditor组件源码的对应部分；toolbar为采用的CKEditor配置文件中工具栏配置的名词，对于CKEditor工具栏如何配置可参考FckEditor(CKEditor)配置，不设定时默认为Default，此项默认值可以通过重新赋值Ext.form.CKEditor.CKEDITOR_TOOLBAR来设定或修改Ext.form.CKEditor组件源码的对应部分；width、height对应为组件显示的宽和高。

完整实例源码下载[download id="40" format="3"]，其中ckeditor、ckfinder及extjs都需位于站点根目录下，具体路径也可自行修改实例源码。




本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自枫芸志，原文地址《【ExtJs】Ext.form.CKEditor：整合CKEditor的组件》
标签： CKEditor • CKFinder • ExtJs
分享：