fetching data from mysql database using php, Displaying it in a WYSIWYG form for editing

Question

I'm working on a cms project that has to do with bootstrap WYSIWYG form for inserting and retrieving from database. The insert code works properly and the retrieve code works well as well, but does not work when I want to edit an article. When I click on the edit link which is <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> it refers me to my edit page. On my edit.php page I have this code to select from database which is working well

<?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'];
}
?>

When I echo the value into their respective form type, it works well only that the Bootstrap based WYSIWYG does not echo any of the value, but if I change it to normal textarea, it works fine. Here is my code on edit.php page

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

Any help please?

Answer 1

I found it :p I made a javascript demo here: https://jsfiddle.net/x14vdkk0/1/

If you can't set the value the root cause is on the multiples lines. Indeed, it you do something like this:

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

You can see (console.log) the part second line is in error because javascript does not recognize this.

Solution: escape all carriage return

From the database

You have a beautiful function json_encode that will protect you from all issues of this kind and javascriptize your variable.

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

I din't forgotten the quotes around the php function. Why ? Because json_encode function will add the quote aroud your text. If you do a json_encode('toto') output will be "toto" ; If you do a json_encode([key' => 'toto']) output will be {"key":"toto"}

That's all :)

Another solution:

For the textarea, use htmlspecialchars($description)

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

and:

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

Answer 2

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

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