フォーラムを見回しましたが、この問題に対する明確な答えが見つからないようです...
ウェブサイトで jQuery と TinyMCE を使用しています。TinyMCE のドキュメントを確認しましたが、まだ迷っています。ページ内の複数の場所でインプレース編集を必要とするインターフェイスを実行しています。唯一のことは、これらのそれぞれが、上部の 1 つのツールバーに TinyMCE からのすべての編集オプションを持っているということです。つまり、要約すると、複数のエディター (それぞれに独自のツールバーはなく、テキストを編集または選択する場所しかありません) であり、その時点でアクティブなテキストボックスを制御するためにページの上部にある 1 つのツールバーのみです。
これはどのように達成できますか？それは可能ですか？この問題に関するヘルプ、正しい方向へのプッシュ、ヒント/ヒント/知識は、非常に大きな助けになります。
ありがとう、ジェームズ
私はこのような3.xバージョンで行いました（これはプロトタイプ構文です）：
最初に、ツールバーラッパーを作成しました（私の場合は、ドキュメントの上部にposition：fixedを付けて添付しました：
<div id="externalToolbarWrapper"></div>
次に、次のようにtinyMCE設定（各エディター用）でセットアップ機能を設定します。
[...]
theme_advanced_toolbar_location : "external",
setup : function(ed) {
ed.onInit.add(function(ed, e) {
ed.onPostRender.add(function(ed, cm) {
var toolbar = $(ed.id + '_external');
// inserts the external toolbar in the external wrapper
$('externalToolbarWrapper').insert(toolbar.hide());
});
ed.onRemove.add(function(ed) {
if($(ed.id + '_external')) {
// removes external toolbar
$(ed.id + '_external').remove();
}
});
});
}
これは私の場合は機能しました-エディターはアクティブ化/非アクティブ化時にツールバーを表示/非表示にします。
別の方法があるかもしれません。この例を見てください。http://tinymce.moxiecode.com/examples/example_23.php
下部のリンク (Show、Hide、Bold、Get Contents など) をメニューとして使用できます (スタイリングが必要な場合があります)。次に、現在フォーカスされているテキストエリアの ID を取得し、それをメニュー (#current) に渡し、それを使用してそのテキストエリアを変更します。
あなたが説明していることを達成するには：
次に、いくつかのコードについて説明します（デバッグが必要になる場合があります...）
まず、TinyMCE を初期化し、メニューを無効にします。
tinyMCE configs
({
mode : "textareas",
theme : "advanced",
editor_selector : "editable"
theme_advanced_buttons1 : "",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "botton",
theme_advanced_statusbar_location : "bottom" });
tiny_mce/themes/advanced/editor_template_src.js の _addToolbars 関数を編集してからパックすることもできると思います。
次に、jQuery バインドを使用して、現在フォーカスされているテキスト領域を特定します。
$().ready(function() {
var current;
$('.editable').focus(
current = this.id;
);
$('.editable').blur(
//maybe hide the menu (?)
);
}
次に、テキストエリアとメニューで HTML を作成します
<form method="post" action="somepage">
<div id="independent_menu">
<!-- The Menu, Please Style Accordingly -->
<a href="javascript:;" onmousedown="$('#current').tinymce().show();">[Show]</a>
<a href="javascript:;" onmousedown="$('#current').tinymce().hide();">[Hide]</a>
<a href="javascript:;" onmousedown="$('#current').tinymce().execCommand('Bold');">[Bold]</a>
<a href="javascript:;" onmousedown="alert($('#current').html());">[Get contents]</a>
<a href="javascript:;" onmousedown="alert($('#current').tinymce().selection.getContent());">[Get selected HTML]</a>
<a href="javascript:;" onmousedown="alert($('#current').tinymce().selection.getContent({format : 'text'}));">[Get selected text]</a>
<a href="javascript:;" onmousedown="alert($('#current').tinymce().selection.getNode().nodeName);">[Get selected element]</a>
<a href="javascript:;" onmousedown="$('#current').tinymce().execCommand('mceInsertContent',false,'<b>Hello world!!</b>');">[Insert HTML]</a>
<a href="javascript:;" onmousedown="$('#current').tinymce().execCommand('mceReplaceContent',false,'<b>{$selection}</b>');">[Replace selection]</a>
</div>
<!-- The Text Areas -->
<textarea class="editable" id="one">Some Text Here</textarea>
<textarea class="editable" id="two">Yet another text area</textarea>
<textarea class="editable" id="three">Final Text Area</textarea>
私はtinymceの古いバージョンでこれを行いました:
http://tinymce.moxiecode.com/punbb/viewtopic.php?id=10197 http://examples.dtbaker.com.au/code/tinymce/
ただし、最新バージョンでこれを再現していません:(
ただし、基本的には次の 2 つの方法があります。
1) アクティブな tinymce エディターで tinymce 引数を呼び出す独自のメニューを作成します。
2) tinymce ツールバー/メニューを外部に設定して、エディターにフォーカスしたときに表示されるようにします。次に、CSS を使用して、各ツールバーが同じ場所に表示されるように配置します。そのため、ツールバーは 1 つに見えますが、実際には複数のツールバーが同じ場所に表示されています。
それが役立つことを願っています。
テキストエリアがフォーカスされたときにツールバーを表示し、テキストエリアのぼかしイベントで非表示にする方法があることを知っています-それが1つのルートである可能性があります。
私はtinyMCEをオンデマンドでロードする（複数のテキストエリアを使用して）同様のことを行うので、オンデマンドでロードして（blurイベント）で終了したら破棄するなどの方法が必要になる場合があります。
実際には雇用主の IP の一部であるため、すべてのコードを紹介することはできませんが、大まかな概要を以下に示します。tinyMCE_GZ は、tinyMCE サイトから離れた gzip の一部です。
isTinyMCE_Loaded = false;
jQuery('.my-textarea').one("click", function(){
BuildWYSIWYG.Full(jQuery(this));
})
BuildWYSIWYG.OnDemand: function(callback){
tinyMCE_GZ.init({
plugins : 'style,table,advhr,advimage,advlink,insertdatetime,preview,searchreplace,contextmenu,paste,fullscreen,visualchars,nonbreaking,xhtmlxtras,safari,tinybrowser',
themes : 'simple,advanced',
languages : 'en',
disk_cache : true,
debug : false
}, function(){
isTinyMCE_Loaded = true;
callback();
});
};
BuildWYSIWYG.Full: function(el){
settings.elements = jQuery(el).attr("id");
// Build advanced wysiwyg
if (isTinyMCE_Loaded){
tinyMCE.init(settings);
} else {
BuildWYSIWYG.OnDemand(function(){
tinyMCE.init(settings);
});
}
}
誰かがまだここに来る場合に備えて、この質問の解決策を提供しています。execCommand を使用して、カスタム ボタンをクリックしているときに、さまざまなスタイルのテキストを実行できます。例えば：
// bold, italic and underline
$('#bold').click(function(){
tinymce.execCommand('Bold');
});
$('#italic').click(function(){
tinyMCE.execCommand('Italic');
});
$('#underline').click(function(){
tinyMCE.execCommand('Underline');
});
//commands for left align, right align and center align
$('#l-a').click(function(){
tinyMCE.execCommand('JustifyLeft');
});
$('#c-a').click(function(){
tinyMCE.execCommand('JustifyCenter');
});
$('#r-a').click(function(){
tinyMCE.execCommand('JustifyRight');
});
//commands for inserting ul or ol
$('#ul').click(function(){
tinyMCE.execCommand('InsertUnorderedList');
});
$('#ol').click(function(){
tinyMCE.execCommand('InsertOrderedList');
});
#bold、#italic、#ul などは、スタイリングの実装に使用している html 要素の ID です。例えば：
<button id="bold">B</button>
このボタンは、テキストが tinymce のどのインスタンスにあるかに関係なく、テキストを太字にします。この機能の唯一の欠点は、オンまたはオフのときに特定のボタンに効果を表示するために多くの作業を行う必要があることです。あなたがそれを気にしないなら、これでうまくいきます。
それが役立つことを願っています...