イメージアップローダーのサポートを利用して、どのようなwysiwygエディターをレール3.1アプリに使用できますか？

Question

私はこれを試しましたeditor、しかし、私は簡単にインストールしてイメージを更新することができますいくつかのエディタが多分存在するかもしれない多くのエラーを受けました。

私の答え： 今私はthis editorを使用して、非常に簡単にインストールできます。

Answer 1

Im画像アップロードのためにgem 'tiny_mce'とcarrierwaveの文字を使用しています。 TinyMCEのための私のセットアップは以下の通りです：

$(function() { 
    tinyMCE.init({ 
    mode: "textareas", 
    editor_deselector: "plain", 
    theme: "advanced", 
    plugins: "advimage,inlinepopups,save,autosave", 
    external_image_list_url: '#{image_list_admin_static_images_url}', 
    relative_urls: false, 

    theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect", 
    theme_advanced_buttons22: "", 
    theme_advanced_buttons3: "", 
    theme_advanced_toolbar_location : "top", 
    theme_advanced_blockformats: "p,h2,h3,h4" 
    }) 
} 

重要な部分は私が持っている私のルートでimage_list_admin_static_images_urlです：

def image_list 
    @image_list = "var tinyMCEImageList = #{StaticImage.image_list.to_json}" 
    render :js => @image_list 
end 

そしてIMAGE_LIST方法で：StaticImagesControllerで

resources :static_images do 
     get :image_list, :on => :collection 
end 

方法は次のようになりますモデルにあります：

def self.image_list 
    all.map{ |im| [im.alt, im.image.url] } 
end 

この設定は私にとって完璧に機能します。あなた自身のニーズに合わせてカスタマイズする必要があります。これがあなたを助けることを願っています。 TinyMCEは本当に素晴らしく強力なエディタです。

chechここで、コメント欄で示唆したように、あなたがactive_adminで使用するために、このソリューションを調整することができる方法です。

単にこのいずれかのルートを置き換え、アクティブな管理の内側にそれを使用するには： match "admin/model_name/:id/js_image_list", :action => "js_image_list", :controller => "admin/model_name"。次に、アクティブな管理モデルファイル内にjs_image_listというアクションを作成します。 tinyMCE.initの設定は次の通りです：external_image_list_url : "js_image_list"

Answer 2

これは、明らかに、レールの3.1でサポートされているようです。ここでは、リンク
http://rubygems.org/gems/tinymce-rails

あなたがしなければならないのは、あなたはjqueryのを使用するかどうかに応じて、application.jsに追加するには、次のオプションを持っているあなたのGemfile

gem 'tinymce-rails' 

に以下を追加していますか、個人的にはない

//= require tinymce-jquery 
//= require tinymce 

私はそう、私は私のコントローラ/ビュー

に対応するjs.coffeeファイルに次の行を追加jqueryの選びました

tinyMCE.init 
    mode: 'textareas', 
    theme: 'advanced' 

あなたはちょうど私がTinyMCEをとRailsのアセットパイプラインとの問題を抱えていたあなたのビューに

<script type="text/javascript"> 
    tinyMCE.init({ 
    mode: 'textareas', 
    theme: 'advanced' 
    }); 
</script> 

Answer 3

をこのスクリプトを追加することができますjqueryのを使用しない場合。私は、また、フォントサイズを大きくして開始する方法を見つけていない。デフォルトのフォントサイズは非常に小さいです。

あなたはTwitterのブートストラップを一の幻想的なオプションを使用している場合は、次のとおりです。あなたがHTML5で動作する何かをしたい場合は

https://github.com/jhollingworth/bootstrap-wysihtml5

私は行くだろう：

http://jejacks0n.github.com/mercury/

すごいです！