0

ckeditor の内容をデータベースに保存する方法を教えてください。

これを機能させる方法について、私は 0% のアイデアを持っています。これを使用するのは初めてです。Googleで検索しましたが、常にfckeditorが表示されます(同じですか?)。また、AJAX を使用していくつかのコードを試しましたが、プラグインが必要であり、実際に理解していないため、まだ機能しませんでした。

とにかく、私は ckeditor の 4.0 バージョンを使用しており、AJAX を本当に知らないので、php または javascript コードを好むでしょう。ここに私の試用コードがあります:

<!DOCTYPE html>
<!--
Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->

<?php
include('global.php');
?>

<html>
<head>

    <script>
        var type = 'Admin';

        <!-- editableContent -->
        window.onload = function (){
            if(type=='Admin'){
            document.getElementById('opener').contentEditable= true;
            document.getElementById('main').contentEditable= true;
            // We need to turn off the automatic editor creation first.
            CKEDITOR.disableAutoInline = true;
            var editor = CKEDITOR.inline( 'opener' );
            var editor = CKEDITOR.inline( 'main' );
            }
            else{
            document.getElementById('opener').contentEditable= false;
            document.getElementById('main').contentEditable= false;
            }
        }

        function showHTML () {
        document.getElementById('textpad').textContent = textEditor.document.body.innerHTML;
        return;
        }

    </script>


    <title>Inline Editing by Code &mdash; CKEditor Sample</title>
    <meta charset="utf-8">
    <script src="ckeditor/ckeditor.js"></script>
    <link href="ckeditor/samples/sample.css" rel="stylesheet">
    <style>

        #editable
        {
            padding: 10px;
            float: left;
        }

    </style>
</head>
<body>
    <div id="opener">
    <?
    $result= mysql_query ("SELECT * from text_tb WHERE categoryName='index'");
        while($row = mysql_fetch_array($result)){
        echo $row[1];
        }
    ?>
    </div>

    <div id="main">
    <?
    $result= mysql_query ("SELECT * from text_tb WHERE categoryName='about'");
        while($row = mysql_fetch_array($result)){
        echo $row[1];
        }
    ?>
    </div>
</body>
</html>

お時間をいただき、ありがとうございました。

4

3 に答える 3

0

[...]私はAJAXを本当に知らないので、phpまたはjavascriptコードを好むでしょう。

実際、AJAXはPHPとJavaScriptの組み合わせです:Pサーバー側言語(PHP)なしではデータベースのコンテンツを更新できませんが、クライアント側言語(JavaScript)を使用すると、サーバー側スクリプトと「対話」できます。私たちがAJAXと呼んでいるもの。

とにかく、Ray Paseurが言ったように、通常、編集されたコンテンツの値を含むtextareaを含むフォームを投稿しますが、あなたの場合、4.0バージョンの新しいインライン編集機能を使用しているようです。

したがって、この場合、編集されたコンテンツの値にアクセスするには、次のように編集したdivのコンテンツを取得する必要があります。

var opener_content=document.getElementById("opener").innerHTML;
var main_content=document.getElementById("main").innerHTML;

これにより、エディターによって生成されたHTMLコードが得られます。ページの「変更を保存」ボタンから呼び出す関数でこれを実行し、それらの変数をAJAXを使用してサーバーに送信します...(AJAXについて詳しく学ぶことをお勧めします。これは、継ぎ目よりも単純です。 。)

ただし、今すぐAJAXを学習したくない場合は、空のテキストエリアを含む非表示のフォームをページに追加できます。保存ボタンをクリックすると、これらのテキストエリアに上記の2つの変数を入力し、JavaScriptを介してこのフォームを投稿します。変数を使用してPHPにデータを保存し$_POSTます!それが醜く怠惰な解決策であっても、それはうまくいくでしょう:)

于 2012-12-22T19:10:10.083 に答える
0

これは 100% 目標通りではないかもしれませんが、私が使用したものであり、うまく機能します。TinyMCE は HTMLテキストエリアタグと JavaScript を使用して、クライアントが情報をフォーマットできるようにします。次に、通常の「送信」により、テキストエリアのコンテンツがサーバーに送信されます。サーバーでは、POST メソッドのリクエストでそれを受信し、データベースに保存できます。

TinyMCE のサンプル JS:

<script language="javascript" type="text/javascript" src="scripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">

tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
    plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

    theme_advanced_buttons1 : "bold,italic,underline,|,justifyleft,justifycenter,justifyright,|,bullist,numlist,|,copy,paste,pastetext,pasteword,|,undo,redo,|,link,unlink,anchor,image,cleanup,|,removeformat,|,forecolor,backcolor,|,formatselect,charmap,emotions,iespell,",
    theme_advanced_buttons2 : "",
    theme_advanced_buttons3 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true
});

</script>

リンクはこちら:http ://www.tinymce.com/

于 2012-12-22T18:17:09.883 に答える