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

时间:2016-10-20 21:00:01

标签: php html mysql twitter-bootstrap

我正在开发一个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>

请帮忙吗?

5 个答案:

答案 0 :(得分:1)

如果您在引导程序中引用用于WYSIWYG的插件,这将更容易。从您的代码中,我认为它是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

我不明白你要通过发布&#39;来理解你想要实现的目标。按钮,因为它似乎你想用它替换编辑器中的内容。它会更改值,但不会显示,也不会提交表单...

希望有所帮助

答案 1 :(得分:1)

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

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

答案 2 :(得分: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无法识别此内容。

enter image description here

  

解决方案:转义所有回车

从数据库

你有一个漂亮的函数json_encode,可以保护你免受所有这类问题的困扰,并且可以对你的变量进行搜索。

$(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"}

这就是全部:)

另一种解决方案:

对于textarea,请使用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());
});

答案 3 :(得分:0)

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

答案 4 :(得分:0)

我确实遇到了一些其他插件的问题,最后我发现这里没有问题就是:

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

这里是我将数据加载到数据库并将其存储到数据库的部分: 商店数据

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

对于加载数据,只需回显插头即可解码

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