TinyMCE ( documentation ) とCKEditorを試しましたが、どちらも初期化にこの種のコードが必要です:
tinyMCE.init({
selector: '.some-div-with-text-inside',
inline: true,
fixed_toolbar_container: '.toolbar',
valid_elements: '*[*]',
setup: function(editor) {
// something that happens on setup
}
});
したがって、基本的に何らかのセレクターが必要であり、.some-div-with-text-inside
クラスを持つすべての DIV が TinyMCE の編集可能領域になります。エディタが.toolbar
コンテナに表示されます。
==========================
私が理想的に実現したいのは、どの DIV または TEXTAREA にも関連付けられておらず、その機能 (「太字テキスト」、「リンクの作成」など) がドキュメント内のコンテンツ編集可能領域で機能するエディターです。いくつかの選択が行われました。Rangy を使用すると、まさにこれが可能になります。デモを見る: http://rangy.googlecode.com/svn/trunk/demos/cssclassapplier.html
TinyMCE v3 では、次のようなものが利用可能でした:
$(function(){
tinyMCE.init({ mode: "none", theme: "simple" });
tinymce.execCommand("mceAddControl", false, "myEditableDIV");
});
しかしmode: "none"
、v4 には存在しなくなり、2 行目はtinyMCE.execCommand("mceAddEditor", false, "myEditableDIV");
現在になりましたが、この方法で複数の編集可能な DIV が追加された場合、エディターは 内に複数回表示.toolbar
されます。それを防ぐ方法はないか考え中です。
現在および将来のすべてのDIVに対して 1 つのエディターが必要contenteditable
です。一部の DIV は、ドキュメントに追加または削除される場合があります。ドキュメントのすべてのオプションを調べましたが、機能させることができませんでした。