- お知らせ -
  • 当wikiのプログラムコードの表示を直してみました(ついでに長い行があると全体が下にぶっ飛ぶのも修正)。不具合があればBBSまでご連絡下さい。

Ruby/Ruby on Rails/FCKEditor

はじめに Edit

../../bloggity というRailsのブログプラグインでどのようにFCKEditorを使っているか、ちょっとだけメモしてみる。

バージョンは2009-08-13時点でのgithubのHEADのものを使ってます。

見つけ方:

  • bloggityをインストールしてみて "fckeditor"で検索してみる

など

viewのヘッダーでJavaScriptを組み込み Edit

  • jquery
  • jquery-form
  • fckeditor

のJavaScriptを

  • vendor/plugins/bloggity/app/views/layouts/blog_posts.html.erb
  • vendor/plugins/bloggity/app/views/layouts/blog_categories.html.erb
  • vendor/plugins/bloggity/app/views/layouts/blog_comments.html.erb

のファイルに<head></head>の間に以下の用に記述して
組み込んでいる。

	<%= javascript_include_tag 'bloggity/jquery' %>
	<%= javascript_include_tag 'bloggity/jquery-form' %>
	<%= javascript_include_tag 'bloggity/fckeditor/fckeditor' %>

viewでテキストエリアに組み込み Edit

vendor/plugins/bloggity/app/views/layouts/blog_posts/_edit.html.erb にて、

たぶん、

  • テキストエリアをfckEditorに置換
  • ファイルアップロード時の処理??

のために以下のJavaScirptをjqueryとjquery-formを使って記述している。
AJAXで画像を送るために、remote_form_forでmulipartなのは本来送れないのをjQuery-formで実現しているようです。

詳細(英語): Rails Ajax Image Uploading Made Simple with jQuery | Relentless Simplicity :: The Bonanzle Tech Blog

FCKEditorとは連携してないのかな〜?うーん。

<br /><h3>Upload Assets</h3>
<% remote_form_for(:blog_asset, :url => { :controller => "blog_posts", :action => :create_asset }, 
		:html => { :method => :post, :id => 'uploadForm', :multipart => true }) do |f| -%>
	<%= f.hidden_field :blog_post_id, :value => @blog_post.id %>
	<label>Upload a file:</label> <%= f.file_field :uploaded_data %>
<% end %>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<% javascript_tag do %>
        jQuery(document).ready(function($) 
        {
                var fckEditor = new FCKeditor('blog_post[body]');
                fckEditor.BasePath = "/javascripts/bloggity/fckeditor/";
                fckEditor.ReplaceTextarea();
                
                $('#uploadForm input').change(function(){
                                $(this).parent().ajaxSubmit({
                                                beforeSubmit: function(a,f,o) {
                                                        o.dataType = 'json';
                                                },
                                                complete: function(XMLHttpRequest, textStatus) {
                                                        new_image = $("<img>").attr('src', XMLHttpRequest.responseText);
                                                        new_text = $("<div class='asset_filename'>").html("Asset file path: <a href='" + XMLHttpRequest.responseText + "'>" + XMLHttpRequest.responseText + "</a>");
                                                        new_container = $("<div class='uploaded_asset'>");
                                                        $('#inner_asset_container').append(new_container);
                                                        new_container.append(new_image).append(new_text);
                                                },
                                                success: function(data) { 
                                                        //afterSuccessfulUpload(data); 
                                                }
                                        });
                        });
                });
<% end %>

アップロード時の連携まではよく見ていない。


No comment. Comments/Ruby/Ruby on Rails/FCKEditor/bloggityプラグインでの組み込み方法?

Name:

Front page   Edit Freeze Diff Backup Upload Copy Rename Reload   New Pages Search Recent changes   Help   RSS of recent changes
Last-modified: 2009-11-23 Mon 20:27:02 JST (2920d)