15

私は困惑して欲求不満なので、助けを求める時間です。たくさんのグーグルをしましたが、まだ私のために働く解決策を見つけていません。

私が持っているのは、Jqueryの並べ替え可能なものを使用して並べ替えることができるたくさんのdivです。一部のdivにはTinyMCEインスタンスが含まれています。TinyMCEインスタンスを含むdivを移動しようとするまでは、これで問題ありません。TinyMCEを実行すると、TinyMCEが自動的に更新されて新しいインスタンスが作成され、データなどが失われます。その後、JavaScriptがなくなるため、ページ全体が壊れます。動作します:)。この間、Firebugでjavascriptコンストラクターエラーなどが発生します。

私が最善の方法を決定したのは、divがドラッグされ始めたときに、テキスト領域からTinymceを削除し、新しい位置に配置されたときに、Tinymceを元に戻すことです。

正常に削除できますが、コンストラクターエラーが増えるため、元に戻すのに問題があります。

注：TinyMCEは、使用しているシステム内のすべてのテキスト領域に自動的に追加されるため、TinyMCEをいじらないようにしてください。

以下のコードでは、テスト目的で特定のテキストエリアIDをターゲットにしています。

$cols.sortable({
                            cursor: 'move',
                            revert: true,
                            opacity: 0.6,
                            placeholder: 'widgetplaceholder',
                            forcePlaceholderSize: true,
                            connectWith: cols,
                            zIndex:9000,
                            cancel: ".collapsable_box_editpanel_groups, .collapsable_box_content",
                            start: function(e, ui) {
                                     // removes tinymce ok from textarea
                                     tinyMCE.execCommand( 'mceRemoveControl', false, 'textarea1' );

                            },
                            stop: function(e,ui) {
                                    // breaks here - constructor error
                                    tinyMCE.execCommand( 'mceAddControl', true, 'textarea1' );
                                    $(this).sortable( "refresh" );
                            }
                    });

他の誰かが他の解決策を持っていますか？あなたがより多くの情報を必要とするならば、私にさせてください:)

4

11 に答える 11

22

MCE インスタンスに既にデータがある場合は、失われないように、次のことを試してください。

start: function(e, ui){
    $(this).find('.tinyMCE').each(function(){
        tinyMCE.execCommand( 'mceRemoveControl', false, $(this).attr('id') );
    });
},
stop: function(e,ui) {
    $(this).find('.tinyMCE').each(function(){
        tinyMCE.execCommand( 'mceAddControl', true, $(this).attr('id') );
        $(this).sortable("refresh");
    });
}

私の場合、すべての MCE インスタンスを .tinyMCE で分類しました

于 2011-10-03T03:22:17.997 に答える
17

TinyMCE のバージョン 4 の場合

start: function (e, ui) {
  $(ui.item).find('textarea').each(function () {
     tinymce.execCommand('mceRemoveEditor', false, $(this).attr('id'));
  });
},
stop: function (e, ui) {
  $(ui.item).find('textarea').each(function () {
     tinymce.execCommand('mceAddEditor', true, $(this).attr('id'));
  });
}
于 2014-09-04T14:01:43.260 に答える
4

まあ、TinyMce v.4+の場合、この問題の安定した解決策は次のとおりです。

start: function(e, ui){
        tinyMCE.triggerSave();
    },
    stop: function(e,ui) {

        $(this).find('textarea').each(function(){
            tinyMCE.execCommand( 'mceRemoveEditor', false, $(this).attr('id') );

            // if your tinymce instance have different settings
            tinymce.init(tinymce_settings($(this).attr('data-type')));

            tinyMCE.execCommand( 'mceAddEditor', false, $(this).attr('id') );
        });
    }

テキストエリアに複数のタイプの設定が適用されているtinymce.init(settings)場合は、各リセットの前に宣言する必要があります。そうしないと、最後に適用された設定がすべてに適用されます。

設定を変更する簡単な方法は、次のような設定タイプのフラグをテキストエリアに設定することです。

<textarea data-type="settings_one"></textarea> <textarea data-type="settings_two"></textarea>

次に、必要なものを配布するローダー関数を使用します。

function tinymce_settings(type) {

var settings;

switch(type) {

  case 'settings_one' :
    settings = {...}
    break;
  }    
 return settings;
}
于 2016-11-11T23:00:45.807 に答える
2

「textarea1」を動的に割り当てようとしている人にとって、ドラッグ可能オブジェクトは ui.item として ui オブジェクトにあります。ソート可能ごとに 1 つのテキストエリアの場合:

tinyMCE.execCommand( 'mceAddControl', false,  $('textarea',ui.item)[0].id );

tinyMCE.execCommand( 'mceRemoveControl', false,  $('textarea',ui.item)[0].id );
于 2011-01-19T19:18:11.133 に答える
1

いいえ、他に解決策はありません。これはそれが行われる必要がある方法です。mceRemoveControlTinymceインスタンスを含むmanipulatindom要素の場合、およびを使用してdom操作が完了したら、それらを非アクティブ化し、再アクティブ化する必要がありますmceAddControl。

于 2010-10-18T07:54:41.893 に答える
1

並べ替え可能な stop() イベントで編集を破棄して再作成するだけになりました。

stop: function (e, ui) {
  $(this).find('textarea').each(function () {
    tinyMCE.get($(this).attr('id')).destroy();
    // the code below locates and evals the editor init script
    eval($(this).parents('.item').find('script').html());
  });
}

魅力のように機能し、start() イベントでエディターを破棄し、stop() で再作成する他の提案よりもおそらく優れたオプションです。これは、視覚的に魅力的なエディターをドラッグしているためです。PS TinyMCE 4.5.2 を使用する

于 2017-07-28T18:12:19.910 に答える
0

TinyMCE ですべて編集できる複数の段落を持つ動的フォームがあります。段落を再ソートできるように、テキストエリアを上下に移動するボタンを追加しました。

テキストエリアを上下に移動するボタンで alt="textareaid" を使用し、この textareaid を mceRemoveEditor および mceAddEditor コマンドに使用して、なんとか動作させることができました。textarea は、class="textarea_container" の div にある必要があります。

$('.move_textarea_up').click(function(){
    var tinymceid= $(this).attr("alt");
    tinyMCE.execCommand('mceRemoveEditor', false, tinymceid);
    $(this).closest('div.textarea_container').insertBefore($(this).closest('div.textarea_container').prev());
    tinyMCE.execCommand('mceAddEditor', false, tinymceid);
}); 
$('.move_textarea_down').click(function(){
    var tinymceid= $(this).attr("alt");
    tinyMCE.execCommand('mceRemoveEditor', false, tinymceid);
    $(this).closest('div.textarea_container').insertAfter($(this).closest('div.textarea_container').next());
    tinyMCE.execCommand('mceAddEditor', false, tinymceid);
});
于 2014-11-06T14:35:45.363 に答える
0

私は同様の問題を解決することができました：

tinymce.activeEditor.setMode('readonly');

と

tinymce.activeEditor.setMode('デザイン');

これはバージョン 4.3.x で機能します

于 2016-06-28T09:49:38.827 に答える
0

私にとっては、解決策がここにあります。TinyMCE のバージョン 4 の場合

私の場合：ワードプレス内のメタボックスにリピーターフィールドを持つソート可能なjqueryを使用しています。ソート可能な各要素には、tinyMCE エディターに変換されたテキストエリアがあります。

並べ替え可能なアイテムから 1 つの要素を移動すると、その 1 つの要素内のエディターのみが破損し、ビジュアル タブにコンテンツが表示されなくなります。問題を防ぐためにmceRemoveEditorとmceAddEditorを使用しました。

したがって、上記のソリューションのいくつかを組み合わせた後、この最終的なソリューションにたどり着きました。@Honorable Chow、@pragmar @Sonicdesignのおかげで、あなたのソリューションはそのままではうまくいかなかったので、修正しました。これが私のコードで、うまく機能しています。

start: function(e, ui){
        tinyMCE.execCommand( 'mceRemoveEditor', false,  jQuery('textarea',ui.item)[0].id );
    },
    stop: function(e,ui) {
        tinyMCE.execCommand( 'mceAddEditor', false,  jQuery('textarea',ui.item)[0].id );
    }
于 2016-02-07T14:59:38.590 に答える
0

私はやった

$("#stores-container").sortable({

        stop: function(event, ui) {

            textareaID = $(ui.item).find(' textarea').attr('id');

            textareaVal=$(ui.item).find(' textarea').val();

            editorID=$(ui.item).find('.mce-container').attr('id');

            $( "#"+editorID ).remove();

            $('#'+textareaID).show();
            tinymce.init({selector: '#'+textareaID});
        }

    });
于 2016-07-08T09:08:06.917 に答える