6

jQuery UIフレームワークを使用して動的に作成されたCKEditorのリストを並べ替えようとしていますが、エディターの解放に問題があります。を使用していたときは完全に機能しました<textarea>が、ドラッグアクションが完了した後は、ユーザーがテキストを記述できなくなりました。

これはJavascriptコードです：

$(function() {
    $("#list").sortable({
        placeholder: 'ui-state-highlight'
    });
    $("#list").disableSelection();

    for (i=0;i<10;i++)
    {
        addEditor();
    }
});

function addEditor()
{
    alert("Hello");
    var editor_fields = document.editors.elements["editor[]"];

    var editorAmount = 0;

    if (editor_fields.length)
    {
        editorAmount = editor_fields.length;
    }
    else
    {
        editorAmount = 1;
    }

    var newElem = $('#editor_container' + editorAmount).clone().attr('id', 'editor_container' + (editorAmount + 1));

    newElem.html("<textarea class='editor' name='editor[]' id='editor" + (editorAmount + 1) + "' rows='4' cols='30'></textarea>");

    $("#editor_container" + editorAmount).after(newElem);

    $("#editor" + (editorAmount + 1)).ckeditor();
}

これはHTMLコードです：

<form name="editors">
    <ul id="list">
        <li name="editor_container1" id="editor_container1"><textarea name='editor[]' id='editor1' rows='4' cols='30'></textarea></li>
    </ul>
</form>
4

5 に答える 5

4

理想的ではありませんが、私は潜在的な解決策を見つけました：

 $(function () {
        $("#list").sortable({
            placeholder: 'ui-state-highlight',
            start: function () {
                $('.editor').each(function () {
                    $(this).ckeditorGet().destroy();
                });
            },
            stop: createckeditor()
        });
        $("#list").disableSelection();

        for (i = 0; i < 10; i++) {
            createckeditor()
        }
    });

    function createckeditor() {
        $(".editor").ckeditor();
    }

何かをドラッグすると、すべてのエディターが破棄されて再作成されることが許容されるため、これは私にとってはうまくいきました。ドラッグされているアイテムのみを削除するように調整することもできます。

于 2010-08-25T18:06:27.473 に答える
2

ドラッグする前にエディターのコンテンツをdivに入れ、停止した後、エディターに戻すという別の解決策があります。このように、ソート後にエディターをインスタンス化する必要はありません。

$(function() {
    $( "#sortable" ).sortable({
        start:function (event,ui) {
          //alert($('.attribute_text',ui.item).val())
          $('.attribute_val',ui.item).html($('.attribute_text',ui.item).val()).show();
          $('.attribute_div',ui.item).hide();
      },
      stop: function(event, ui) { 
          $('.attribute_val',ui.item).hide();
          $('.attribute_div',ui.item).show();
          $('.attribute_text',ui.item).val($('.attribute_val',ui.item).html());               

      }
    });
    $( "#sortable" ).disableSelection();

});

ここで、attribute_textは、sortable内にドラッグ可能で、.attribute_div内に存在するtextaraに指定されたクラス名です。attribute_valは、エディターのコンテンツを格納するために使用される非表示要素のクラス名です。

于 2011-02-24T10:39:49.203 に答える
2

私はこの問題に遭遇し、多少のハックで修正しました-ここに行きます：

        var current_ck_text = "";
        $("#editor-list").sortable({
            start: function(event, ui){
                var ckedname = $(ui.item).find(".textcontainer").find("span").attr("id");
                var ckedname_arr = ckedname.split("_");
                ckedname = ckedname_arr[1];
                current_ck_text = CKEDITOR.instances[ckedname].getData();
            },
            stop: function(event, ui){
                var ckedname = $(ui.item).find(".textcontainer").find("span").attr("id");
                var ckedname_arr = ckedname.split("_");
                ckedname = ckedname_arr[1];
                CKEDITOR.instances[ckedname].setData(current_ck_text);
            }
        });

これら2つ（sortableとckeditor）を一緒に使用すると、データを強制的にエディターに戻すと、触れられていないかのようにリロードされることがわかりました。「ckedname」（または「CKEditor Name」）は、適切なCKEditorインスタンスが見つかるように使用されました。動的に配置された可能性のある複数のエディターが1つのページにあることを前提としています。もちろん、エディターのインスタンス名がわかっている場合は、「開始」と「停止」の両方のコールバッククロージャの最初の3行をスキップできます。（注：私の「textcontainer」はCKEditorを含むdivクラスです）

于 2011-04-11T05:57:23.203 に答える
0

同じ問題が発生しました。並べ替えが完了したら、ckeditorのinit関数を呼び出してみてください。

$(function() {
 $("#list").sortable({
 placeholder: 'ui-state-highlight',
 stop:  createckeditor()
 });
 $("#list").disableSelection();


 createckeditor()

});

function createckeditor() {
$(".editor").ckeditor();
}
于 2010-07-31T20:36:04.953 に答える
0

CKEditorとjQueryUISortableを使用したときに同様の問題が発生しました。私の場合、両方を同時に使用すると、CKEditorは完全に応答しなくなります。<div>インラインを編集可能にする唯一の方法は、編集しようとするControl+をクリックすることでした。<div>

両方を機能させるために、上下のドラッグ画像を含むを使用し<span>て並べ替えました。

<span class="handle">up down image</span>

$( "#sortable" ).sortable({
    handle: '.handle',
})
于 2014-10-19T17:48:23.867 に答える