MTAppJSONTable 内のテキストエリアをリッチテキストエディタにする方法

MTAppJSONTable 内のテキストエリアをリッチテキストエディタ(TinyMCE)にする方法をご紹介します。

この記事は弊社 bit part 合同会社が提供している Movable Type プラグイン「MTAppjQuery」の利用を前提としております。MTAppjQuery って何?という方は弊社の「MTAppjQuery」の製品ページをご覧ください。

【2017/01/10 追記】
MTAppjQuery v1.10.0 までの MTAppJSONTable では、下記の方法だと不具合が発生します。次のバージョンの MTAppjQuery で実装できるように MTAppJSONTable にオプションを追加する予定ですのでお待ちください。

先ほど、「MTAppJSONTableでつくった textarea でリッチテキスト(TinyMCE)モードを使いたいのですが、なにか方法はあるでしょうか?」というご質問をいただきました。

簡単にですがその方法をご紹介します(MTAppJSONTable の設定方法などは割愛します)。

例えば、TinyMCE にしたいテキストエリアの header 名が content_profile だとすると、下記のコードを cbAfterBuild オプションに設定します。

cbAfterBuild: function(cb, $container){
 var jsontableEditors = {};
 $container.find('td.content_profile textarea').each(function(){
 $(this).addClass('mtapp-has-tinymcs');
 var id = $.temporaryId();
 $(this).attr('id', id);
 jsontableEditors[id] = new MT.EditorManager(id);
 });
}

なお、 $.temporaryId() は最新版の v1.10.0 以降に実装されていますので、もしそれ以前のバージョンをお使いでしたら、 MTAppJSONTable を実行するよりも手前に、

$.extend({
 temporaryId: function() {
 return 'temp-' + ('' + Math.random()).replace(/[^\d]/g, '');
 }
});

を書いておいてください。

また、行や列を追加できるように add: true が設定されている場合は、下記のコードを cbAfterAdd オプションに書いてください。

cbAfterAdd: function(cb, $container){
 var jsontableEditors = {};
 $container.find('td.content_profile textarea:not(".mtapp-has-tinymcs")').each(function(){
 $(this).addClass('mtapp-has-tinymcs');
 var id = $.temporaryId();
 $(this).attr('id', id);
 jsontableEditors[id] = new MT.EditorManager(id);
 });
}

詳細な検証はしていませんので、もし不具合等ありましたらご指摘ください。

以上です。

Published 2016-12-13
Updated 2019-06-25

「MTAppjQuery」カテゴリの記事一覧