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

Question

我正在做一个与 bootstrap 有关的 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 的所见即所得不回显任何值，但如果我将它更改为普通文本区域，它工作正常。这是我在 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>

有什么帮助吗？

Answer 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 无法识别这一点。

Solution: escape all carriage return

来自数据库

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

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

I din't forgotten the quotes around the php function. Why ? Becausejson_encode function will add the quote aroud your text. If you do ajson_encode('toto') output will be "toto" ; If you do ajson_encode([key' => 'toto']) output will be {"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());
});