I tried to add WYSIWYG text editor to my website. Everything works fine, it stores in database properly and acts completely fine in admin panel. The problem is when i view my description in view page, it shows as plain text but it works fine in admin panel. is there anything to do with this code. <!doctype html> has been loaded to website.
<style>
table{
margin-top: 20px;
}
.table td{
padding: .2rem .1rem;
font-size: 14px;
font-family: 'Arial', sans-serif;
border-top: none;
}
h3{
color: #D80726;
font-size: 16px;
font-weight: bold;
}
h5{
font-size: 15px;
}
</style>
<div class="wrapper">
<!-- Top container -->
<section class="top-container">
<div class="left-side">
<ul>
<?php foreach (($left_ads?:array()) as $la): ?>
<li><a href="<?php echo $la['url']; ?>" target="_blank"><img data-src="<?php echo $BASE; ?>/uploads/adds/<?php echo $la['image']; ?>" alt="" class="lazy"></a></li>
<?php endforeach; ?>
</ul>
</div>
<div class="middle-side" id="middle-side">
<div class="col main-content">
<h3><?php echo $listing['name']; ?></h3>
<h5>Total Views<i class="fa fa-eye"></i> : <strong><?php echo $listing['visited']; ?></strong></h5>
<div class="addthis_native_toolbox"></div>
<div class="row">
<?php if ($listing['image'] && $listing['image'] !=''): ?>
<a href="<?php echo $BASE; ?>/uploads/listing/<?php echo $listing['image']; ?>" data-lightbox="images" data-title="<?php echo $listing['name']; ?>" class="link-preview" title="Preview">
<img src="<?php echo $BASE; ?>/uploads/listing/<?php echo $listing['image']; ?>" class="img img-responsive" style="max-width: 400px;"></a>
<?php endif; ?>
</div>
<table class="table">
<tr>
<td>Listing Name</td>
<td><span>:</span><?php echo listing.name; ?></td>
</tr>
<?php if ($listing['description']): ?>
<tr>
<td>Description</td>
<td><span>:</span> <?php echo $listing['description']; ?></td>
</tr>
<?php endif; ?>
<tr>
<td>Address<i class="fa fa-location-arrow"></i></td>
<td><span>:</span> <?php echo $listing['add1']; ?></td>
</tr>
<tr>
<td>City</td>
<td><span>:</span> <?php echo $listing['city']; ?></td>
</tr>
<?php if ($listing['phone1']): ?>
<tr>
<td>Phone <i class="fa fa-phone"></i></td>
<td><span>:</span> <?php echo $listing['phone1']; ?></td>
</tr>
<?php endif; ?>
<?php if ($listing['phone2']): ?>
<tr>
<td>Mobile <i class="fa fa-mobile"></i></td>
<td><span>:</span> <?php echo $listing['phone2']; ?></td>
</tr>
<?php endif; ?>
<?php if ($listing['fax']): ?>
<tr>
<td>Fax</td>
<td><span>:</span> <?php echo $listing['fax']; ?></td>
</tr>
<?php endif; ?>
<?php if ($listing['email']): ?>
<tr>
<td>Email <i class="fa fa-envelope"></i></td>
<td ><span>:</span> <a href="mailto: <?php echo $listing['email']; ?>" style="color:#D80726"><?php echo $listing['email']; ?></a></td>
</tr>
<?php endif; ?>
<?php if ($listing['url']): ?>
<tr>
<td>Website <i class="fa fa-globe"></i></td>
<td ><span>:</span> <a href ="http://<?php echo $listing['url']; ?>" target="_blank"><?php echo $listing['url']; ?></a></td>
</tr>
<?php endif; ?>
</table>
</div>
<div class="col">
<div id="map" style="margin: 20px; padding: 20px;width:90%;height:324px;"></div>
<script>
function initMap() {
var mapCanvas = document.getElementById("map");
var lat = "<?php echo $listing['latitude']; ?>";
var lon = "<?php echo $listing['longitude']; ?>";
var myCenter = new google.maps.LatLng(lat, lon);
var mapOptions = {center: myCenter, zoom: 12};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
position: myCenter,
animation: google.maps.Animation.BOUNCE
});
marker.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyApm29k9v7jFdX_fjvEqRrq2g24Rh_ivTg&callback=initMap"></script>
</div>
<div style="color:#D80726">Related Category:
<?php foreach (($listing['category']?:array()) as $c): ?>
<a href="<?php echo $BASE; ?>/subcategory/<?php echo $c['0']; ?>" class="link"> <?php echo $c['1'] ." "; ?></a>
<?php endforeach; ?>
</div>
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5509185e5d822cb8" async="async"></script>
</div>
<div class="right-side">
<ul>
<?php foreach (($right_ads?:array()) as $ra): ?>
<li><a href="<?php echo $ra['url']; ?>" target="_blank"><img src="<?php echo $BASE; ?>/assets/adds/<?php echo $ra['image']; ?>" alt="" class="lazy"></a></li>
<?php endforeach; ?>
</ul>
</div>
</section>
</div>
<section class="bottom">
<div class="regular">
<?php foreach (($bottom_ads?:array()) as $ba): ?>
<div style="margin: 0 auto;width: 100px;">
<a href="<?php echo $ba['url']; ?>" target="_blank"> <img src="<?php echo $BASE; ?>/uploads/adds/<?php echo $ba['image']; ?>" alt="" ></a>
</div>
<?php endforeach; ?>
</div>
</section>
<script>
$(document).ready(function () {
$('.link').click(function () {
var url = $(this).attr('href');
$.get(url, function (data, status) {
$('.main-content').html(data);
})
$('html, body').animate({
scrollTop: $(".main-content").offset().top
}, 1000);
return false;
})
$('.lazy').lazy({
// placeholder: "data:image/gif;base64,R0lGODlhEALAPQAPzl5uLr9Nrl8e7..."
delay: 500,
combined: true,
});
})
</script>
