5

私のページにはさまざまなが<div>あり、クリックするとTinyMCEエディタセクションに変換されます。したがって、ユーザーはdivをダブルクリックして、TinyMCEを使用してその中のテキストを編集できます。

私の質問は-<div>実際に内部のテキストを選択せず​​にTinyMCE関数を実行することは可能ですか？つまり、次のユースケースを実装したいと思います。

  1. ユーザーがをクリックします<div>。
  2. <div>それ自体でTinyMCEセッションをアクティブにします。
  3. ユーザーは、TinyMCEツールバーのボタンを使用して、カーソルを使用して実際にテキストを手動で選択しなくても、div内のすべてのテキストを編集できるようになりました。それ以外の場合、通常の場合、ユーザーはテキストの一部を選択する必要があり、この選択されたテキストのみがTinyMCEツールによって編集されます。

これはどのように実装できますか、そしてそれはどれほど簡単ですか？

編集

明確化：すべてのテキストが変更のためにTinyMCEエディターによって自動的に選択される必要があるという意味だけでなく、まったく選択せずにフォーマットできるという意味ですか？私の目的は、ユーザーがTinyMCEを使用してフォーマットのみを編集できるようにすることですが、テキスト<div>自体は変更できないようにすることです。実際には、ユーザーがテキストを選択できないようにする必要があります。をクリックするだけで<div>、含まれているテキストを自動的にフォーマットできるようになります。TinyMCEによるもので、テキストは実際には変更されていません。しかし、私が何を意味するかを知っているのであれば、textareaはユーザーにとって「選択可能」であってはなりません。必要に応じて（以下の@Thariamaのソリューションに従って）自分自身を選択できますが、ユーザーが選択することはできません。これは可能ですか？TinyMCEツールバーボタンだけを有効にするが、テキスト編集機能を無効にするようなものです。私が理解している限り、readonlyTinyMCEの構成を使用することはできません。また、すべての書式設定オプション（テキストの強調表示、太字、斜体など）でツールバーを無効にします。

4

2 に答える 2

2

Tinymceが初期化された後、すべてのエディターコンテンツを選択することは大きな問題ではありません。これは、セットアップ構成パラメーターを使用して簡単に行うことができます。

tinyMCE.init({
   ...
   setup : function(ed) {
        ed.onInit.add(function(ed, evt) {

            ed.getBody().setAttribute('contenteditable', false);

            var range = ed.selection.dom.createRng();

            range.setStartBefore(ed.getBody().firstChild);
            range.setEndAfter(ed.getBody().lastChild);
            ed.selection.setRng(range);
        });
   }
});

これは、このための小さなフィドルです。

アップデート：

探しているのは次のようなものです。$(ed.getBody()).attr('contenteditable','false'); この方法では、ユーザーはエディターコンテンツを選択したり編集したりすることはできませんが、tinymceボタンは引き続き使用できます（すべての結果を伴います）。必要な機能を備えた独自のツールバー要素を作成できます。

于 2012-12-19T11:45:26.750 に答える
1

私にとっての答えは、@Thariamaのセットアップコードを組み合わせて使用​​することでした。

tinyMCE.init({ ....
    setup : function(ed) {  
    ed.onInit.add(function(ed, evt) {

        ed.getBody().setAttribute('contenteditable', false);

        var range = ed.selection.dom.createRng();

        range.setStartBefore(ed.getBody().firstChild);
        range.setEndAfter(ed.getBody().lastChild);
        ed.selection.setRng(range);
    });
}
});

textareaのキー押下を無効にする方法で、つまり、textareaのIDがTAID、の場合、次のコードを追加しました。

$('#TAID_ifr').contents().find('html').bind('keypress', function(e){return false;});

于 2012-12-19T14:23:13.537 に答える