Question

我试图在同一页面上有2个ckeditors，但每个都显示不同的工具栏设置。在我的html.erb文件中，我有这个

<div class="form-block">
  <%= f.label :image %>
  <%= f.cktext_area :image, :class => "cke-editor-permissive", :ckeditor => {filebrowserImageBrowseUrl: '/ckeditor/pictures', filebrowserImageUploadUrl: '/ckeditor/pictures', :toolbar => "mini"} %>
 </div>

<div class="form-block">
  <%= f.label "Description" %>
  <%= f.cktext_area :desc, :ckeditor => {filebrowserImageBrowseUrl: '/ckeditor/pictures', filebrowserImageUploadUrl: '/ckeditor/pictures', :toolbar => "mini"} %>
</div>

我希望第一个cktext_area：image具有不同的工具栏和配置选项。我不知道如何做到这一点，我还没有找到一个解决方案，我在jquery和javascript中非常弱，所以我的知识不到0 ....

我希望新配置中的所有其他内容都相同...以及如何将新配置分配给

<%= f.cktext_area :image, :class => "cke-editor-permissive", :ckeditor => {filebrowserImageBrowseUrl: '/ckeditor/pictures', filebrowserImageUploadUrl: '/ckeditor/pictures', :toolbar => "mini"} %>
     </div>
?

ckeditor / config.js 我有：

/*
 Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.html or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config )
{
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    config.width = 585;
    config.forcePasteAsPlainText = true;
    config.autoGrow_onStartup = true;
    config.autoGrow_minHeight = 300;
    config.toolbar_mini = [
    ['Format'],
    ['Image'],
    ['Bold','Italic'],
    ['NumberedList','BulletedList'],
    [ 'Link','Unlink','Anchor' ],
    ['Source'],
    ['Save']
  ]
  config.toolbar = 'mini'

    /* Filebrowser routes */
    // The location of an external file browser, that should be launched when "Browse Server" button is pressed.
    config.filebrowserBrowseUrl = "/ckeditor/attachment_files";

    // The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Flash dialog.
    config.filebrowserFlashBrowseUrl = "/ckeditor/attachment_files";

    // The location of a script that handles file uploads in the Flash dialog.
    config.filebrowserFlashUploadUrl = "/ckeditor/attachment_files";

    // The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Link tab of Image dialog.
    config.filebrowserImageBrowseLinkUrl = "/ckeditor/pictures";

    // The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Image dialog.
    config.filebrowserImageBrowseUrl = "/ckeditor/pictures";

    // The location of a script that handles file uploads in the Image dialog.
    config.filebrowserImageUploadUrl = "/ckeditor/pictures";

    // The location of a script that handles file uploads.
    config.filebrowserUploadUrl = "/ckeditor/attachment_files";

    // Rails CSRF token
    config.filebrowserParams = function(){
        var csrf_token, csrf_param, meta,
            metas = document.getElementsByTagName('meta'),
            params = new Object();

        for ( var i = 0 ; i < metas.length ; i++ ){
            meta = metas[i];

            switch(meta.name) {
                case "csrf-token":
                    csrf_token = meta.content;
                    break;
                case "csrf-param":
                    csrf_param = meta.content;
                    break;
                default:
                    continue;
            }
        }

        if (csrf_param !== undefined && csrf_token !== undefined) {
            params[csrf_param] = csrf_token;
        }

        return params;
    };

    config.addQueryString = function( url, params ){
        var queryString = [];

        if ( !params ) {
            return url;
        } else {
            for ( var i in params )
                queryString.push( i + "=" + encodeURIComponent( params[ i ] ) );
        }

        return url + ( ( url.indexOf( "?" ) != -1 ) ? "&" : "?" ) + queryString.join( "&" );
    };

    // Integrate Rails CSRF token into file upload dialogs (link, image, attachment and flash)
    CKEDITOR.on( 'dialogDefinition', function( ev ){
        // Take the dialog name and its definition from the event data.
        var dialogName = ev.data.name;
        var dialogDefinition = ev.data.definition;
        var content, upload;

        if (CKEDITOR.tools.indexOf(['link', 'image', 'attachment', 'flash'], dialogName) > -1) {
            content = (dialogDefinition.getContents('Upload') || dialogDefinition.getContents('upload'));
            upload = (content == null ? null : content.get('upload'));

            if (upload && upload.filebrowser && upload.filebrowser['params'] === undefined) {
                upload.filebrowser['params'] = config.filebrowserParams();
                upload.action = config.addQueryString(upload.action, upload.filebrowser['params']);
            }
        }
    });
};

Answer 1

编辑config.js

要拥有一个不同的工具栏，您只需要创建一个新的config.toolbar，例如

  config.toolbar_img = [
    ['Image'],
    ['Source'],
    ['Save']
  ]

并将其放在

之后

config.toolbar_mini = [
  ['Format'],
  ['Image'],
  ['Bold','Italic'],
  ['NumberedList','BulletedList'],
  [ 'Link','Unlink','Anchor' ],
  ['Source'],
  ['Save']
],

您所要做的就是调用内联的选项，如

 <%= f.cktext_area :desc, :ckeditor => {filebrowserImageBrowseUrl: '/ckeditor/pictures', filebrowserImageUploadUrl: '/ckeditor/pictures', 
      :height => '800', 
      :autoParagraph => true, 
      :toolbar => "img"} %>

这将使textarea的高度达到800px并使其成为每个输入的段落..并且您将使用img工具栏设置。

Answer 2

有两个独立的配置文件有时很方便：

<%= f.cktext_area :desc, :ckeditor => {filebrowserImageBrowseUrl: '/ckeditor/pictures', filebrowserImageUploadUrl: '/ckeditor/pictures', 
  :height => '800', 
  :autoParagraph => true, 
  :customConfig => '/assets/ckeditor/another_config.js'
} %>

Ckeditor 4和Rails在同一页面上有2个不同配置的ckeditors

2 个答案: