web-dev-qa-db-ja.com

contenteditableデータを保存および取得する方法

私のウェブサイトの管理者が一部のページのテキストを変更できるようにしたいと考えています。 contenteditebleを使用することは、私にとって完璧です。
問題は、PHPでプログラミングする方法しか知らないことです。私はインターネットで何時間もそれを機能させるために検索しましたが、データを保存するために使用されるプログラミング言語が十分に機能するために十分に理解していません。

これは私がそれを機能させたい方法です：
1。管理者が「編集」ボタンをクリックします
2。 divが編集可能になります。
3。管理者が編集する準備ができたら、「保存」ボタンを押します
4。データはファイルまたはデータベースに保存されます（最良のオプションが何であるかは本当にわかりません）。
5。ページを開くと、編集した内容が表示されます。

これが私が今持っているすべてです：

<div class='big_wrapper' contenteditable>
  PAGE CONTENT
</div>

管理者が「編集」を押したときに、divをcontenteditable divに変換してパーツを作成する方法を知っています。
私の問題は、編集したデータを保存する方法が本当にわからないことです。
また、ファイルからデータを取得するのが難しいかどうかもわかりません。データの保存方法に依存しています。データベースに保存されていれば、問題なく取得できますが、それが可能かどうか、それが最良の選択肢かどうかはわかりません。

ご協力いただきありがとうございます、

サムエル


編集：

@gibberish、超迅速な返信をありがとうございました！
私はそれを動作させようとしましたが、それはまだ動作しません。私は何が間違っているのか理解できません。

これが私のコードです：
over_ons.php：

<div class='big_wrapper' contenteditable>
  PAGE CONTENT
</div>

<input type='button' value='Send Data' id='mybutt'>

<script type="text/javascript">
  $('#mybutt').click(function(){
  var myTxt = $('.big_wrapper').html();
  $.ajax({
      type: 'post',
      url:  'sent_data.php',
      data: 'varname=' +myTxt+ '&anothervar=' +moreTxt
  });

});
</script>

sent_data.php：

<?php
 session_start();
include_once('./main.php');
include($main .'connectie.php');

$tekst=$_POST['myTxt'];

$query="UPDATE paginas SET inhoud='" .$tekst. "' WHERE id='1'";

mysql_query($query);
?>

多大なご協力ありがとうございます。
ユーザーがボタンを押したときにのみdivを編集可能にすることもできますか？


解決：

ようやくすべての作業ができるようになるまで、2週間以上かかりました。 javascript、jQuery、Ajaxを学ぶ必要がありました。しかし、今では問題なく動作します。私は空想のためにいくつかの追加も追加しました:)
誰かが同じことをしたい場合、私がこれをどのようにしたかを共有したいと思います。

over_ons.php：

//Active page:
$pagina = 'over_ons'; ?>
<input type='hidden' id='pagina' value='<?php echo $pagina; ?>'> <!--Show active page to javascript--><?php
//Active user:
if(isset($_SESSION['correct_ingelogd']) and $_SESSION['functie']=='admin'){
$editor = $_SESSION['gebruikersnaam']; ?>
<input type='hidden' id='editor' value='<?php echo $editor; ?>'> <!--Show active user to javascript--><?php  
} ?>

<!--Editable DIV: -->
<div class='big_wrapper' id='editable'>
    <?php
        //Get eddited page content from the database
        $query=mysql_query("SELECT inhoud FROM paginas WHERE naam_pagina='" .$pagina. "'");
        while($inhoud_test=mysql_fetch_array($query)){
            $inhoud=$inhoud_test[0];
        }

        //Show content
        echo $inhoud;
    ?>
</div>

<!--Show edit button-->
<?php
if(isset($_SESSION['correct_ingelogd']) and $_SESSION['functie']=='admin')
{?>
    <div id='sidenote'>
        <input type='button' value='Bewerken' id='sent_data' class='button' />
        <div id="feedback" />
    </div>
<?php }


これはかなり長くて複雑なファイルなので、コメントのほとんどを英語に翻訳しようとしました。
まだ翻訳されていないものを翻訳したい場合、元の言語はオランダ語です。
javascript.js：

//If the system is in edit mode and the user tries to leave the page,
//let the user know it is not so smart to leave yet.
$(window).bind('beforeunload', function(){
var value = $('#sent_data').attr('value'); //change the name of the edit button

if(value == 'Verstuur bewerkingen'){
    return 'Are you sure you want to leave the page? All unsaved edits will be lost!';
}
});

//Make content editable
$('#sent_data').click(function(){
    var value = $('#sent_data').attr('value'); //change the name of the edit button

    if(value == 'Bewerken'){
        $('#sent_data').attr('value', 'Verstuur bewerkingen');  //change the name of the edit button
        var $div=$('#editable'), isEditable=$div.is('.editable'); //Make div editable
        $div.prop('contenteditable',!isEditable).toggleClass('editable')
        $('#feedback').html('<p class="opvallend">The content from<BR>this page is now<BR>editable.</p>');
    }else if(value == 'Verstuur bewerkingen'){
                var pagina = $('#pagina').val();
                var editor = $('#editor').val();
                var div_inhoud = $("#editable").html();
                $.ajax({
                type: 'POST',
                url:  'sent_data.php',
                data: 'tekst=' +div_inhoud+ '&pagina=' +pagina+ '&editor=' +editor,
                success: function(data){
                Change the div back tot not editable, and change the button's name
                    $('#sent_data').attr('value', 'Bewerken');  //change the name of the edit button
                    var $div=$('#editable'), isEditable=$div.is('.editable'); //Make div not editable
                    $div.prop('contenteditable',!isEditable).toggleClass('editable')

                //Tell the user if the edditing was succesfully
                    $('#feedback').html(data);
                    setTimeout(function(){
                        var value = $('#sent_data').attr('value'); //look up the name of the edit button
                        if(value == 'Bewerken'){ //Only if the button's name is 'bewerken', take away the help text
                        $('#feedback').text('');
                        }
                        }, 5000);
                    }
                    }).fail(function() {
                    //If there was an error, let the user know
                        $('#feedback').html('<p class="opvallend">There was an error.<BR>Your changes have<BR>not been saved.<BR>Please try again.</p>');
                    });
    }
});


そして最後に、
sent_data.php：

<?php
session_start();
include_once('./main.php');
include($main .'connectie.php');

//Look up witch page has to be edited
$pagina=$_POST['pagina'];
//Get the name of the person who eddited the page
$editor=$_POST['editor'];
//Get content:
$tekst=$_POST['tekst'];
$tekst = mysql_real_escape_string($tekst);

$query="UPDATE paginas SET naam_editer='" .$editor. "', inhoud='" .$tekst. "' WHERE naam_pagina='" .$pagina. "'";

}
    if(mysql_query($query)){
        echo "<p class='opvallend'>Successfully saves changes.</p>";
    }else{
        echo "<p class='opvallend'>Saving of changes failed.<BR>
        Please try again.</p>";
    }
?>
phpjqueryajaxhtmlcontenteditable
18
Samuël Visser

JavaScript（またはjQuery）のようなクライアント側の言語を使用して、入力ボックスを編集できるかどうかを管理します。

AJAXを使用してフィールドデータを取得し、それをPHPファイルにファイアします。これにより、データがデータベースに貼り付けられます。

以下は、jQueryを使用して入力フィールドの有効化/無効化を管理する非常に簡略化された例です。

jsFiddleデモ

_$('.editable').prop('disabled',true);

$('.editbutt').click(function(){
    var num = $(this).attr('id').split('-')[1];
    $('#edit-'+num).prop('disabled',false).focus();
});

$('.editable').blur(function(){
    var myTxt = $(this).val();
    $.ajax({
        type: 'post',
        url:  'some_php_file.php',
        data: 'varname=' +myTxt+ '&anothervar=' +moreTxt
    });
});
_

PHPファイル：some_php_file.php

_<?php 
    $myVar = $_POST['varname'];
    $secondVar = $_POST['anothervar'];
    //Now, do what you want with the data in the vars
_

AJAXの使用は非常に簡単です。どのように見えるかを示す非常に短い例を示しました。moreTxt変数のHTMLまたはjQueryを調べないでください-追加しましたこれは、データの2番目の変数をAjaxに追加する方法を示しています。

Ajaxを使いこなすための基本的な例をいくつか示します。

jQueryを使用したAJAXリクエストコールバック

jQueryまたはAJAXを学習するための近道はありません。例と実験を読んでください。

あなたはここにいくつかの優れた無料のjQueryチュートリアルを見つけることができます：

http://thenewboston.com

http://phpacademy.org

更新編集：

コメントのお問い合わせに返信するには：

DIVからPHPファイルにデータを送信するには、最初にコードをトリガーするeventが必要です。前述のとおり、入力フィールドでは、これはblur()イベントであり、フィールドを離れるとトリガーされます。_<select>_では、change()イベントである可能性があります。選択を選択するとトリガーが発生しますが、DIVではユーザーはdivを操作できませんよね？トリガーはユーザーが実行するものでなければなりません、ボタンのクリックなど。

したがって、ユーザーはボタンをクリックします。.html()コマンドを使用してDIVのコンテンツを取得できます。 （入力ボックスと選択コントロールでは.val()を使用しますが、DIVとテーブルセルでは.html()を使用する必要があります。コードは次のようになります：

ボタンがクリックされた後にDIVコンテンツを送信する方法：

HTML：

_<div class='big_wrapper' contenteditable>
    PAGE CONTENT
</div>
<input id="mybutt" type="button" value="Send Data" />
_

jQuery：

_$('#mybutt').click(function(){
    var myTxt = $('.big_wrapper').html();
    $.ajax({
        type: 'post',
        url:  'some_php_file.php',
        data: 'varname=' +myTxt+ '&anothervar=' +moreTxt
    });

});
_
11
cssyphus

あなたはこれでページ全体をクライアントサイドに保存できます：

    <script>
function saveAs(filename, allHtml) {
allHtml =  document.documentElement.outerHTML; 
var blob = new Blob([allHtml], {type: 'text/csv'});
if(window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveBlob(blob, filename);
}
else{
var elem = window.document.createElement('a');
elem.href = window.URL.createObjectURL(blob);
elem.download = filename;        
document.body.appendChild(elem);
elem.click();        
document.body.removeChild(elem);
}
}    
</script>

hth

0
vmars316