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

Question

我试图在同一页面上有 2 个 ckeditor，但每个显示不同的工具栏设置。在我的 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 工具栏设置。