使用php从mysql数据库中获取数据，以所见即所得的形式显示以进行编辑

Posted 2023-03-05

【中文标题】使用php从mysql数据库中获取数据，以所见即所得的形式显示以进行编辑

【英文标题】：fetching data from mysql database using php, Displaying it in a WYSIWYG form for editing

【发布时间】：2017-03-03 01:05:23

【问题描述】：

我正在开发一个与 bootstrap WYSIWYG 表单有关的 cms 项目，用于从数据库中插入和检索。插入代码可以正常工作，检索代码也可以正常工作，但是当我想编辑文章时不起作用。当我点击 <a href='index.php?page=edit&id=".$row['id']."'><span data-placement='top' data-toggle='tooltip' title='Edit'><button class='btn btn-primary btn-xs' data-title='Edit' ><span class='glyphicon glyphicon-pencil'></span></button><span></a> 的编辑链接时，它会将我引向我的编辑页面。在我的 edit.php 页面上，我有这段代码可以从运行良好的数据库中选择

<?php
include("dbconnect.php");

if(isset($_GET['id']))

$id = strip_tags($_GET['id']);
$sql = "SELECT * FROM berita WHERE id=$id" ;
$result = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_assoc($result))  

    $image= $row['gambar'];
    $title = $row['judul'];
    $description = ( $row['konten']);
    $time = $row['tanggal'];

?>

当我将值回显到它们各自的表单类型中时，只有基于 Bootstrap 的 WYSIWYG 不会回显任何值，但如果我将其更改为正常的 textarea，它就可以正常工作。这是我在edit.php页面上的代码

<?php
include("dbconnect.php");


if(isset($_GET['id']))    
    $id = strip_tags($_GET['id']);

$sql = "SELECT * FROM berita WHERE id=$id";
$result = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_assoc($result))      

    $image= $row['gambar'];
    $title = $row['judul'];
    $description = ( $row['konten']);
    $time = $row['tanggal'];

?>
<link href="plugins/WYSIWYG/editor.css" type="text/css" rel="stylesheet"/>
<script src="plugins/WYSIWYG/editor.js"></script>

<script type="text/javascript">
    $(document).ready(function () 
        $("#txtEditor").Editor();
    );
</script>

<form name="my_form" action="action.php" method="POST"  enctype="multipart/form-data">
    <div class="form-group">
        <label for="exampleInputEmail1">Date</label>
        <input type="text" class="form-control" id="time" name="time"  value="<?php echo date('d-m-Y'); ?>" disabled>
            <small id="emailHelp" class="form-text text-muted"></small>
    </div>
    <div class="form-group">
        <label>Article Title</label>
        <input type="text" class="form-control" id="title" name="title" value="<?php echo $title; ?>" placeholder="title" required />
    </div>
    <div class="form-group">
        <label >select categories</label>
        <select class="form-control" id="cat" name="cat">
            <option value="World">World</option>
            <option value="Sport">Sport</option>
            <option value="Politics">Politics</option>
            <option value="Business">Business</option>
            <option value="Technology">Technology</option>
            <option value="Entertainment">Entertainment</option>
            <option value="Fashion">Fashion</option>
            <option value="Gist">Gist</option>    </select>
    </div>

    <div class="form-group">
        <label>Write Article </label>
        <textarea class="form-control" id="txtEditor" name="txtEditor"><?php echo  htmlspecialchars($description) ;?></textarea>
    </div>
    <div class="form-group">
        <label for="exampleInputFile">upload image</label>
        <input type="file" accept="image/*" name="myimage" id="myimage" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp">
            <small id="fileHelp" class="form-text text-muted"></small>

    </div>

    <button onclick=" $('#txtEditor').val($('.Editor-editor').html());" type="Publish" id="Publish" name="Publish" class="btn btn-primary">Publish</button>
</form>

有什么帮助吗？

【问题讨论】：

SQL 注入不是用标签完成的，所以strip_tags 没有帮助。您应该使用参数化查询。尝试输出到 WYSIWYG 时是否出现控制台错误？

您使用的是哪个所见即所得插件？

【参考方案1】：

我找到了：p 我在这里做了一个 javascript 演示：https://jsfiddle.net/x14vdkk0/1/

如果您无法设置该值，则根本原因在于多行。 事实上，如果你这样做：

$(document).ready(function() 
    $('#txtEditor').Editor();
    $('#txtEditor').Editor('setText', 'My text with <strong>LineControl</strong> :)
  second line !'); // SECOND LINE IN ERROR !
);

您可以看到 (console.log) 部分 second line 出错，因为 javascript 无法识别。

解决方法：转义所有回车

来自数据库

你有一个漂亮的函数json_encode，它将保护你免受所有此类问题的影响，并对你的变量进行javascript化。

$(document).ready(function() 
    $('#txtEditor').Editor();
    $('#txtEditor').Editor('setText', <?php echo json_encode($description); ?>); 
);

我没有忘记 php 函数周围的 引号。为什么 ？因为 json_encode 函数将在您的文本中添加引号。如果你做一个 json_encode('toto') 输出将是 "toto" ；如果你做一个 json_encode([key' => 'toto']) 输出将是 "key":"toto"

就是这样:)

另一种解决方案：

对于文本区域，使用htmlspecialchars($description)

<textarea id="txtEditor">
  My text with:
  &lt;strong&gt;LineControl !&lt;/strong&gt;
</textarea> 

和：

$(document).ready(function() 
    $el = '#txtEditor';
    $($el).Editor();
    $($el).Editor('setText', $($el).val());
);

【讨论】：

感谢这个函数 json_encode 修复它，但你错过了你的 php 中的报价，它应该 $("#txtEditor").Editor("setText", '');.竖起大拇指。

嗨 :) 嗯……奇怪。 json_encode 将自动添加遗漏的引号。如果您执行<?php echo json_encode('toto'); ?>，则输出将为"toto"；如果您执行<?php echo json_encode(['key' => 'toto']); ?>，则输出将为"key":"toto"

【参考方案2】：

    $(document).ready(function()         
        <?php
        if($description)
        ?>
            $('#txtEditor').Editor("setText", "<?php echo addslashes($description);?>");
        <?php
        
        ?>
    );

参考：https://github.com/suyati/line-control/issues/34

【参考方案3】：

如果您在引导程序中参考您使用的所见即所得插件，这将更容易。根据您的代码，我认为是https://github.com/suyati/line-control

在这种情况下，您需要使用 setter 来放置值，因此您应该重写您的声明代码：

<script type="text/javascript">
$(document).ready(function () 
    $("#txtEditor").Editor();
    $("#txtEditor").Editor("setText", "<?php echo  htmlspecialchars($description) ;?>");
);
</script>

并从你的 textarea 中删除 php echo

我不明白您要使用“发布”按钮实现什么目的，因为您似乎想用它替换编辑器中的内容。它会改变值，但它不会是可见的，也不会提交表单...

希望对你有帮助

【讨论】：

使用这一行代替 htmlspecialchars : - $('#txtEditor').Editor("setText", "");

@Dero3376 更正了代码。可能插件需要在设置文本之前进行初始化

或者您可以通过 ajax 获取内容并将响应数据设置为编辑器。这是不正确的，无需刷新网页。

【参考方案4】：

尝试从 textarea 中回显描述并检查它是否显示任何内容。如果不是，那么您的变量中没有任何值。

【参考方案5】：

我确实在使用其他一些插件时遇到了这个问题，最后我发现一个没有问题的是：

<script src="//cdn.ckeditor.com/4.5.11/standard/ckeditor.js"></script>

这里是我将数据加载和存储到数据库的脚本部分： 用于存储数据

$features = htmlentities($_POST['features'],ENT_QUOTES);

对于加载数据，只需 echo 插件将进行解码

<textarea class="form-control" id="features" name="features"><?php echo $data['features']; ?></textarea>