7

gem を使用して ckeditor をインストールしました。そのため、プロジェクトにはconfig.jsはありません(変更したくない実際のgemフォルダーにあります)。インストールにより、config/initializers フォルダーに ckeditor.js が作成されました。これは、ツールバーの定義を配置する正しい場所と思われます。しかし、それを機能させるために私が試みたことはすべて、さまざまな構文またはメソッドが見つからないというエラーをスローします。誰かがこれで成功しましたか? もしそうなら、簡単な例は非常に役に立ちます。

私の現在のckeditor.jsは次のとおりです。

# Use this hook to configure ckeditor
if Object.const_defined?("Ckeditor")
  Ckeditor.setup do |config|

  # ==> ORM configuration
  # Load and configure the ORM. Supports :active_record (default), :mongo_mapper and
  # :mongoid (bson_ext recommended) by default. Other ORMs may be
  # available as additional gems.
  require "ckeditor/orm/active_record"

  # Allowed image file types for upload.
  # Set to nil or [] (empty array) for all file types
  # config.image_file_types = ["jpg", "jpeg", "png", "gif", "tiff"]

  # Allowed attachment file types for upload.
  # Set to nil or [] (empty array) for all file types
  # config.attachment_file_types = ["doc", "docx", "xls", "odt", "ods", "pdf", "rar", "zip", "tar", "swf"]
  end
end
4

5 に答える 5

5

1.application.jsに以下を追加

//= require ckeditor/ckeditor
//= require_tree ./ckeditor

2. app/assets/javascript/ckeditor に config.js を追加 サンプル config.js

if(typeof(CKEDITOR) != 'undefined')
{
 CKEDITOR.editorConfig = function(config) {
   config.uiColor = "#AADC6E";
   config.toolbar = [
    [ 'Bold', 'Italic', 'Underline', 'Strike' ],
    [ 'NumberedList', 'BulletedList', 'HorizontalRule' ],
    [ 'Blockquote' ],
    [ 'Undo', 'Redo' ],
    [ 'insertResolved' ],
    [ 'Source' ]
 ];
}
} else{
  console.log("ckeditor not loaded")
}
于 2014-01-13T02:32:43.317 に答える
3

私はあなたと同じ問題を抱えています。最初は、アセット パイプラインで Config railsに従っていましたが、うまくいきません。その後、そのリンクの作成者は新しいスタイルのツールバーのみを作成していることに気付きました。ビューでも呼び出す必要があります。つまり、この行を追加する必要があります

input_html => {:toolbar => 'MyToolbar'}

それが機能するようにします。

config.js が機能しているかどうかをテストするには、ウェブページのソースをチェックして、assets/javascripts/ckeditor/config.js が追加されているかどうかを確認します。確認する別の方法は、次の行のコメントを外してエディターの色を編集することです: config.uiColor = '#AADC6E'. エディターの色が変わると機能します。

また、ckeditor js ファイルを 2 回インクルードするというばかげたミスも犯しました。これが問題の原因であるかどうかはわかりません。あなたが試すことができます。

お役に立てれば。

于 2012-05-21T09:38:02.467 に答える
1

これは私にとってはうまくいきました： Rails 3.1（gem + Asset Pipeline）でCKEditorを構成する方法 は、回答で指定されたスニペットをconfig.jsファイルに保存するだけです

于 2012-04-27T08:54:15.270 に答える
1

github に関する私のコメントが役立つかもしれませんhttps://github.com/galetahub/ckeditor/issues/136#issuecomment-8870692

于 2012-09-26T01:20:20.060 に答える
0

これは、ckeditor ツールバーをカスタム構成するためのckeditor 4.1.0を使用したRails 4.1に対する更新された回答です。

ビューでは、simple_form を使用して、次の例のように入力を構成する必要があります。

_FORM.HTML.ERB

<%= simple_form_for(@foo) do |f| %>
  <%= f.input :bar, as: :ckeditor %>
  <%= f.button :submit %>
<% end %>

Javascript アセットで、「ckeditor」というフォルダーを作成し、そこに「config.js」というファイルを作成する必要があります。

../JavaSCRIPT/CKEDITOR/CONFIG.JS

CKEDITOR.editorConfig = function(config) {
  //config.language = 'es'; //this could be any language
  config.width = '725';
  config.height = '600';

  // 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";

// You could delete or reorder any of this elements as you wish
  config.toolbar_Menu = [
    { name: 'document', items: ['Source', '-', 'Save', 'NewPage', 'DocProps', 'Preview', 'Print', '-', 'Templates'] }, 
    { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] }, 
    { name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-', 'SpellChecker', 'Scayt'] }, 
    { name: 'tools', items: ['Maximize', 'ShowBlocks', '-', 'About'] }, '/', 
    { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] }, 
    { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl'] }, 
    { name: 'links', items: ['Link', 'Unlink', 'Anchor'] }, '/', 
    { name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] }, 
    { name: 'colors', items: ['TextColor', 'BGColor'] }, 
    { name: 'insert', items: ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'] }
  ];
  config.toolbar = 'Menu';
  return true;
};

application.js の構成は次のようになります。ckeditor と require_tree の順序が重要であることに注意してください。

アプリケーション.JS

//= require jquery
//= require jquery_ujs
//= require ckeditor/init
//= require_tree .

ckeditor.rb で、この行 "config.asset_path" のコメントを外し、前に作成した config.js ファイルへのパスを "/assets/ckeditor/" に追加する必要があります。

../CONFIG/INITIALIZERS/CKEDITOR.RB

# Use this hook to configure ckeditor
Ckeditor.setup do |config|
  # ==> ORM configuration
  # Load and configure the ORM. Supports :active_record (default), :mongo_mapper and
  # :mongoid (bson_ext recommended) by default. Other ORMs may be
  # available as additional gems.
  require "ckeditor/orm/active_record"

  # Customize ckeditor assets path
  # By default: nil
  config.asset_path = "/assets/ckeditor/"
end

お役に立てば幸いです:D!

于 2014-11-08T08:35:26.143 に答える