使用php从mysql数据库中获取数据,以WYSIWYG形式显示以进行编辑

Question

我正在开发一个cms项目,它与bootstrap WYSIWYG表单有关,用于从数据库中插入和检索.插入代码正常工作,检索代码也可以正常工作,但在我想编辑文章时不起作用.当我点击编辑链接时,<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>

有什么帮助吗？

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

解决办法：转义所有回车

来自数据库

您有一个漂亮的函数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());
});