Ruby on Rails での TinyMCE の実装

タイニーMCE は、プラットフォームに依存しない優れたウェブベースのJavascript/HTMLエディタコントロールで、ユーザーがオンラインでHTML文書を編集できるようにしたい場合に非常に便利です。主にWordPressやDrupalなどのコンテンツ管理システムと簡単に統合できるように設計されています。HTMLを出力するリッチテキストエディタなので、railsアプリケーションを使ってリッチコンテンツを追加するのがとても簡単です。.

TinyMCEは、HTMLのテキストエリアフィールドやその他のHTML要素をエディタインスタンスに変換する機能を備えています。TinyMCEは、テキストだけでなく、画像や動画（整列）にもさまざまなHTMLフォーマットツールを提供します。プロジェクトとの統合中に設定を行うことができ、プロジェクトの柔軟性を高めます。.

TinyMce Editor 4のカスタマイズ、Ruby on Railsとの併用も：

メニューボタンの追加 ： 

TinyMce-4開発パッケージの全コンテンツをコピーして、assetsまたはpublicフォルダに置いてください。tinymceのクラス、言語、プラグイン、その他のファイル、スクリプト、必要なものすべてが含まれています。.

ここではR.designと名付けます。ボタンをクリックすると、“menu1 ”という名前のドロップダウンメニューが表示されます。

tinymce.init({) セレクタ：“textarea”、, setup: function(editor) { editor.addButton(‘report_design’, {) タイプ： ‘menubutton’、, text：「R.Design」、, icon: false、, のメニューがある：[ {text: ‘menu1 ‘, onclick: function() {editor.insertContent(‘menu1’);}}。 ] }); },

プラグインを使用します：[ “「advlist autolink lists link image charmap print preview anchor”、, “検索置換ビジュアルブロックコードフルスクリーン”、, “insertdatetimeメディアテーブルコンテキストメニューペーストmoxiemanager”、, “顔文字プリント textcolor” ], ツールバー：“insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | emoticons | forecolor backcolor | print | menu “ }); セレクタを使用します：“textarea”

は入力タイプのtextareaにエディタが配置されることを示します。.

Railsでの使用 ：

のメニューがある：[

を実行する。 {text: ‘’, onclick: function() {editor.insertContent(‘’);}. <%終了%> ]

ツールバーアイコン、カラーリングテキスト、背景の並び替え。 ツールバー “insertfile undo redo” ツールバー “undo insertfile redo”

テキストカラーアイコンと背景のカラーリングが欠けている場合、まずtextcolorをプラグイン;[...]に追加し、次にツールバーのforecolorとbackcolorを使用することで、エディターツールバーにアイコンが表示されます。.

tinymce/plugins/*フォルダでインクルード/定義したものは全てtinymceエディタで使用できます。 ツールバーの“forecolor backcolor”

チェンジングテーブルボーダー ： 

ファイル：tinymce/skins/lightgray/content.min.css これはテーブルに適用されるスタイルだ。. ボーダー1px 破線 #BBBB；; デフォルトのスタイリングをオーバーライドする。. .mce-item-table、.mce-item-table td、.mce-item-table th、.mce-item-table caption {。 ボーダー：1px solid black；; border-collapse: collapse；; フォントサイズ：14px; }

サブメニュー ： 

のメニューがある：[ { text:’Menu item’, menu:[ {text:’sub1′,value:’val1′},{text:’sub2′,value:’val2′}]、, onclick: function() {editor.insertContent(‘’);}。 } ]

railsと共に使用することで、サブメニュー項目をクリックすると、エディターのテキストエリア・スペースに項目が挿入される。. のメニューがある：[ { text:’Student Basic Data’, menu:[{text:'’、, onclick: function( {editor.insertContent(‘’);}},]. } ] ウィンドウ・マネージャー { text:’Name’, onclick: function() { editor.windowManager.open({) タイトル：『紙の余白』、, body: [ {type: ‘textbox’, name: ‘first’, label: ‘first name’,value：”}, {type: ‘textbox’, name: ‘last’, label: ‘last name’, value：”} ], onsubmit: function(e) { // ウィンドウ・フォームが送信されたときにコンテンツを挿入する editor.insertContent(‘First Name’ + e.data.first)；; editor.insertContent(‘Last Name’ + e.data.last)；; } }); } } レールに沿って使用 {text:’余白’, onclick: function() { editor.windowManager.open({) タイトル：『紙の余白』、, body: [ { type: ‘textbox’, name: ‘top’, label: ‘Margin top (cm)’、, value: ‘’ } ], onsubmit: function(e) {

<%= remote_function()。 :url => {:controller=>”controller”,:action => “action”}、, :with => “‘margin_top=’ + e.data.top ” ) %>

} }); } }

RailsCarmaは、開発、デプロイ、管理、監視、アプリのサポートなど、RoRソリューションを世界中に提供しており、効率的で簡素化されたビジネスソリューションを提供します。.

続きを読む ： 

• Rails アプリのパフォーマンスを向上させる簡単な方法

• Rails でのモジュールの作成と使用の基本

• リアルタイムフレームワーク

• Ruby on Rails での Tinymce の実装

• REST APIとは何ですか?

ご連絡ください。