ckeditor 可以更新数据库内容吗？答案

【问题标题】：can ckeditor update database content?ckeditor 可以更新数据库内容吗？
【发布时间】：2012-12-22 18:06:57
【问题描述】：

你能给我一个方法把ckeditor的内容保存到数据库吗？

我对如何使事情起作用的想法是 0%，因为这将是第一次使用。我在谷歌上搜索过，但它总是显示 fckeditor（它们是一样的吗？）。另外，我尝试了一些带有 AJAX 的代码，但仍然无法使其工作，因为它需要一些插件，而我实际上并不理解它。

无论如何，我正在使用 ckeditor 的 4.0 版本，并且更喜欢 php 或 javascript 代码，因为我并不真正了解 AJAX。这是我的试用代码：

<!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>

非常感谢您的时间和帮助。

【问题讨论】：

标签： php javascript mysql ckeditor

【解决方案1】：

这可能不是 100% 达到目标，但这是我使用过的并且效果很好。 TinyMCE 使用 HTML textarea 标签和一些 JavaScript 来允许客户端格式化信息。然后一个普通的“提交”将 textarea 的内容发送到服务器，您在服务器上以 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/

【讨论】：

我没有尝试过你的代码，但我认为它不会起作用。不是悲观，而是我们使用两个不同的编辑器，它们很可能使用不同的属性或其他东西。另外，我没有我认为处理保存的那个 .js 东西，最后，这些似乎更像是一个属性部分。然而，非常感谢你与我分享这个。竖起大拇指！
你好。因为我对 ckeditor 失去了所有希望，所以我尝试了 tinymce，我一口气完成了它。多谢！竖起大拇指！
太棒了！很高兴它对你有帮助，~Ray

【解决方案2】：

ckeditor 文档提供了一种非常简单易行的方法：

<form method="post">
    <p>
        My Editor:<br>
        <textarea name="editor1">&lt;p&gt;Initial value.&lt;/p&gt;</textarea>
        <script>
            CKEDITOR.replace( 'editor1' );
        </script>
    </p>
    <p>
        <input type="submit">
    </p>

@http://docs.ckeditor.com/#!/guide/dev_framed-section-4

在服务器端你只需要

mysql_query("insert into yourtable (yourtextfield) VALUES ( '".mysql_real_escape_string($_POST['editor1'])."')");

尽管我强烈建议您使用 PHP PDO Extensions 提供的准备好的语句。准备好的语句更加安全。

【讨论】：

我尝试了您的代码，但它没有将编辑器内容保存在数据库中。当它在按钮单击时刷新时，它仍然显示相同的查询结果。
我关于此评论的错误^ 似乎有一个错误，它说未定义索引opener 如您所见，我的代码上没有任何文本区域，因为我正在使用内联 ckeditor，为此我放置了 div id opener 并且出现了错误。我希望你能给其他选择。非常感谢！

【解决方案3】：

[...] 更喜欢 php 或 javascript 代码，因为我并不真正了解 AJAX。

事实上，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 表单并使用 $_POST 变量在 PHP 中保存数据！它会起作用，即使它是一个丑陋和懒惰的解决方案:)

【讨论】：

如果我会尝试你的答案，我会选择第二个选项。（笑）但是，我会放在最后，我仍然会尝试寻找更好的解决方案。非常感谢！