Question

我使用jeditable：http://www.appelsiini.net/projects/jeditable 使用ckeditor http://ckeditor.com/

我找到了一个可以正常工作的插件：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？

非常感谢

Answer 1

我认为CKEditor函数正在寻找配置的URL，而不是配置本身。例如CKEDITOR.replace（'myfiled'，{customConfig：'/ myconfig.js'}）;

我很确定如果你更新“config.js”，它将在每个init期间使用。（我不使用那种方法）

因为我有一个简单的设置（我的所有编辑都使用相同的配置），所以我先更新基础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，我觉得你在实例创建过程中会有更少的开销，但从来没有标记过。

Answer 2

诀窍是通过“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 : []
    }
    });

如何使用配置ckeditor和jeditable？

2 个答案: