2011-03-29 39 views
0

我用jeditable:http://www.appelsiini.net/projects/jeditable 與CKEditor的http://ckeditor.com/如何使用ckeditor和jeditable進行配置?

我發現,工作正常插件:http://blog.amps211.com/this-is-me-professing-my-love-for-jquery-and-how-i-got-ckeditor-working-with-jeditable/

但是我有一個問題,我無法添加customConfig。

我的代碼:

var config = { 
      toolbar: [ 
      ['Source'],['ShowBlocks'], 
      ['PasteText'], 
      ['Image','HorizontalRule','SpecialChar'], 
      '/', 
      ['Bold','Italic','Underline','Strike','-','Superscript','Format'], 
      ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'], 
      ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], 
      ['Link','Unlink'] 
      ], 
      toolbarStartupExpanded: true, 
      toolbarCanCollapse: false, 
      toolbarLocation: 'top', 
      startupShowBorders: false, 
      forcePasteAsPlainText: true, 
      skin: 'office2003', 
      filebrowserBrowseUrl : 'mylinkbrowse', 
      filebrowserUploadUrl : 'mylinkupload', 
      resize_enabled: 'true', 
      resize_dir: 'vertical', 
      height: '300px', 
      width: '100%', 
      uiColor: '#123456', 
      language: 'en' 
     } 

$('.editreply').click(function(){ 
      var editor = $(this).parent().find('.replyeditor'); 

      editor.editable('mylink',{ 
      type:'ckeditor', 
      cancel:'Cancel', 
      submit: 'OK', 
      rows:3, 
      onblur: 'ignore'     
      }); // END OF EDITABLE 
      CKEDITOR.replace(editor.find("textarea"),{customConfig:config}); 
      editor.click(); 
      //alert(editor.attr('id')); 

     }); // ENF editreply CLICK 

目的是點擊編輯按鈕來呈現的CKEditor。我添加editor.click()來模擬點擊。

如何將配置傳遞給ckeditor?

非常感謝

回答

0

我認爲CKEditor的功能正在尋找一個URL到配置,而不是配置本身。例如CKEDITOR.replace('myfiled',{customConfig:'/myconfig.js'});

我敢肯定,如果你更新「config.js」,它會在每個初始化過程中使用。 (我不使用這種方法)

因爲我有一個簡單的設置(我所有的編輯器都使用相同的配置),我更新基礎CKEditor的第一...

function initializeCKEditor() { 

var customToolBar = 
    [ 
     ['LocalSave','NewPage','-','Templates'], 
     ['Cut','Copy','Paste','PasteText','PasteFromWord','-', 'Scayt'], 
     ['Undo','Redo','-','SelectAll','RemoveFormat','-','About','Preview'], 
     ['Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', ...]; 

    //Enable Spell as you Type 
CKEDITOR.config.scayt_autoStartup = true; 
    CKEDITOR.config.extraPlugins = 'localSave'; 
    CKEDITOR.config.removePlugins = 'elementspath'; 
    CKEDITOR.config.toolbar = customToolBar; 

然後根據需要我創建/破壞編輯器實例

function initializeEditor(orientation) { 
    //ckeditor config 
var ckeditor_config = { 
     sharedSpaces : { 
      top : 'editor-toolbar' 
     }, 
     width : (scrnWidth+ckeditor_width_border), 
     height: scrnHieght}; 

//this is why we're here 
$('.editor').ckeditor(ckeditor_config); 

我希望有幫助。我看不出有什麼理由不能使用相同的方法。如果你設置了一次CKEditior,我認爲你在實例創建時會有更少的開銷,但從未標記過長凳。

0

訣竅是通過「ckeditor」 - 參數從jEditable發送配置。這是我的配置文件的外觀,它的效果很好。

$(".editable_textarea").editable("<?php echo $_SERVER['PHP_SELF'] ?>", { 
    indicator : "<img src='img/indicator.gif'>", 
    type : 'ckeditor', 
    submitdata: { _method: "post" }, 
    select : true, 
    submit : 'OK', 
    cancel : 'cancel', 
    cssclass : "editable", 
    onblur: "ignore", 
    ckeditor : { 
    toolbar: 
    [ 
    ['Source', '-', 'Bold', 'Italic', 'Format', 'Styles', '-', 'NumberedList', 'BulletedList', 'Blockquote', 'HorizontalRule', '-', 'Link', 'Unlink', '-', 'Image', '-', 'Maximize'], 
    ['UIColor'] 
    ], 
    filebrowserBrowseUrl: baseUrl + 'admin/assets/?target=ckeditor', 
    contentsCss : baseUrl + 'media/css/custom_styles.css', 
    stylesSet : [] 
    } 
    });