2

次のように、jQuery.ajax() の複数のレイヤーを使用して単純な CMS を構築しました。

function navto(destination, pageToEdit, insertInto) {
// use JQuery's ajax method to control main navigation
if (pageToEdit == "undefined") {
    var request = $.ajax({
        url: destination
    });
} else {
    var request = $.ajax({
        type: "POST",
        url: destination,
        data: pageToEdit
    });
}

request.done(function(msg) {
    if (insertInto) { $(insertInto).html( msg ); }
    else { $("#mana_content").html( msg ); }
    //alert(msg);
});

request.fail(function(jqXHR, textStatus) {
    alert( textStatus + ". This page could not be found." );
});
}

たとえば、index.php は<li class="child" onclick="navto('inc/edit_pages.php');">Edit Pages</li>edit_pages.php をロードするために使用します<div id="content"></div>

edit_pages.php は$(document).on("click", "a.editPage", function(e) { load_page_for_edit(e); return false; });(関数にload_page_for_edit()送信される情報を収集して準備する場所) を使用して、次のようなものを送信しますnavto()edit_page.php?t=template.php&c=contentID

edit_page.php は、これらの値を使用して、対応するデータベースで必要な情報を検索し、template.php&c=content独自のようなものを出力し<div id="page_to_edit"></div>ます ... 再び、別のnavto().

次に、ユーザーは $('.edit_text') 要素をクリックして、内部に TinyMCE テキストエリア ($('#editor') と呼ばれる) を含む div を再表示できます。

コンテンツはvar content = $('.edit_text').html()

ここに問題があります: コンテンツ変数を TinyMCE テキストエリアにロードしようとすると -- $('#editor').html(content);-- テキストエリアはそれを受け取りません。これはalert($('#mana_editor').html());、正しいコンテンツを出力しますが、HTML 文字が安全になります (たとえば、に<p>なる&lt;p&rt;)。ただし、コンテンツは TinyMCE に読み込まれません。

.ajax スコープの問題があると思いますか? おそらく、jQuery は$('#editor').html(content);template.php に存在しない #editor を実行しようとしています (#editor が edit_page.php にあることを思い出してください)。.ajax の複数のレイヤーを理解するための良いリソースはありますか?

ちょっとした情報、手がかり、および私が試したこと：

  • edit_page.php の最後にある TinyMCE init を除いて、すべての jQuery 関数は functions.js ファイルにあります。
  • functions.js への index.php リンクのみ
  • TinyMCE 3.5.6、jQuery プラグイン パッケージ、および jQuery 1.7.2 を使用しています。
  • TinyMCE の疑似セレクターも ($('textarea:tinymce')の代わりに$('#editor')) 試してみましたが、これは Firebug でエラーをスローします: "エラー: 構文エラー、認識されない式: tinymce" in jq.min.js (4 行目)。
  • ユーザーが TinyMCE で変更を行った後、更新ボタンをクリックすると、新しいコンテンツが読み込ま$('.edit_text')れます。私が入力したものを読み込む代わりに、上記の「安全な」HTML を読み込みます。まるで TinyMCE が完全にバイパスされたかのように。
  • CMS 全体を使用せずに、手動で「get_page.php?t=template&c=content」と FireFox に入力することから始めれば、問題なく動作します。
  • TinyMCE をロードしない場合、jQuery はコンテンツをテキストエリアにロードします。
  • この男は何かに取り組んでいる可能性があります...似ているようですが、彼の head.js に何が含まれているか、head.ready(); を実装する方法、または彼の問題が私のものと同じかどうかはわかりません。

これは Ajax を使用する初めてのプロジェクトなので、学ぶことがたくさんあります。洞察/提案された読書/解決策は大歓迎です!

4

1 に答える 1

2

ここに問題があります: コンテンツ変数を TinyMCE テキストエリアにロードしようとすると -- $('#editor').html(content); -- テキストエリアはそれを受け取りません。これを alert($('#mana_editor').html()); ですぐにフォローアップできます。これにより、正しいコンテンツが出力されますが、HTML 文字が安全になります (例:

<p&rt; になります)。ただし、コンテンツは TinyMCE に読み込まれません。

tinymce はテキストエリアと同じではないことを知っておく必要があります。エディター インスタンスの初期化時に、以前のテキストエリアは非表示になり、tinymce は contenteditable iframe (tinymce エディター) を作成します。以前のテキストエリアは、時々 (特別なイベントで) エディターの実際のコンテンツで更新されます。ですから、あなたが達成したいことは、コンテンツをエディターに書き込むことだと思います。これを行うには、jQuery を使用してテキストエリアをアドレス指定することはできません (自分で見つけたように)。ここで javascript tinymce API を使用する必要があります。

tinymce.get('your_former_textarea_id_needs_to_be_here').setContent(content);
于 2012-08-09T07:33:15.000 に答える