CODEWITHSUNDEEP
phphtmlmysqltwitter-bootstrap
Dero3376
Dero3376

Reputation: 259

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

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?

Upvotes: 5

Views: 4014

Answers (5)

Georges O.
Georges O.

Reputation: 992

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.

enter image description here

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());
});

Upvotes: 1

Bolovsky
Bolovsky

Reputation: 538

This would be easier if you refer which plugin you are using for WYSIWYG in bootstrap. From your code, I figured it is https://github.com/suyati/line-control

In this case, you need to place the value using a setter, so you should re-write your declaration code for:

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

And remove the php echo from your textarea

I don't understand what you are trying to achieve with the 'publish' button, as it appears you want to replace the content within the editor with it. It will change the value, but it will not be visible and it will not submit the form...

Hope it helps

Upvotes: 1

Samir Nabil
Samir Nabil

Reputation: 397

I do face this problem with some other plugin finally i found one not make problems here it is:

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

and here my part of script to load and store data to database: for store data

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

and for load data just echo the plug will do decoding

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

Upvotes: 0

Senthil
Senthil

Reputation: 2246

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

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

Upvotes: 1

Bhavik
Bhavik

Reputation: 503

try echoing description out of textarea and check if its displaying anything. If not then you are not getting any value in your variable.

Upvotes: 0

Related Questions