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

Ckeditor 4 and Rails having 2 ckeditors with different config on same page

本文关键字:ckeditor 配置 Rails 一页 Ckeditor      更新时间:2023-09-26

我试图在同一页面上有 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']);
            }
        }
    });
};

编辑配置.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"} %>

这将使文本区域的高度达到 800px,并使每个输入都是一个段落......您将使用 IMG 工具栏设置。

拥有 2 个单独的配置文件有时很方便:

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