How to Add WYSIHTML5 Text Editor

Bigglez · Thursday at 6:30 AM

Getting Started

First, we need Bootstrap, jQuery and the WYSIHTML5 plugin that will provide our WYSIHTML5 editor which are included in the downloadable of this tutorial.

Creating our Database

Next, we create our database that will contain our posts.

I've included a SQL file in the downloadable of this tutorial. All you have to do is import the said file. If you have no idea on how to import, please visit my tutorial How import .sql file to restore MySQL database.

You should be able to create a database named db.

Displaying our Posts Table

Next, we are going to display the posts in our posts table from our database.

Create a new file, name it as index.php and paste the codes below.

<?php

session_start

(

)

;

?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to Add WYSIHTML5 Text Editor</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1 class="page-header text-center" style="margin-top:30px">Add WYSIHTML5 Text Editor</h1>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<?php
if

(

isset

(

$_SESSION

[

'error'

]

)

)

{
echo

"
<div class='alert alert-danger text-center'>
"

.

$_SESSION

[

'error'

]

.

"
</div>
"

;
unset

(

$_SESSION

[

'error'

]

)

;
}
if

(

isset

(

$_SESSION

[

'success'

]

)

)

{
echo

"
<div class='alert alert-success text-center'>
"

.

$_SESSION

[

'success'

]

.

"
</div>
"

;
unset

(

$_SESSION

[

'success'

]

)

;
}
?>
<table class="table table-bordered">
<thead>
<th>ID</th>
<th>Title</th>
<th><a href="add.php" class="btn btn-primary btn-xs">Add New</a></th>
</thead>
<tbody>
<?php
//connection
$conn

=

new

mysqli(

'localhost'

,

'root'

,

''

,

'db'

)

;
$sql

=

"SELECT * FROM posts"

;
$query

=

$conn

->

query

(

$sql

)

;
while

(

$row

=

$query

->

fetch_assoc

(

)

)

{
echo

"
<tr>
<td>"

.

$row

[

'id'

]

.

"</td>
<td>"

.

$row

[

'title'

]

.

"</td>
<td><a href='view.php?id="

.

$row

[

'id'

]

.

"' class='btn btn-info btn-sm'>View</a></td>
</tr>
"

;
}
?>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>

Creating our Post Form

Next, we create our post form where we integrate our text editor.

Create a new file, name it as add.php and paste the codes below.

<?php

session_start

(

)

;

?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to Add WYSIHTML5 Text Editor</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
</head>
<body>
<div class="container">
<h1 class="page-header text-center" style="margin-top:30px">Add WYSIHTML5 Text Editor</h1>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<?php
if

(

isset

(

$_SESSION

[

'error'

]

)

)

{
echo

"
<div class='alert alert-danger text-center'>
"

.

$_SESSION

[

'error'

]

.

"
</div>
"

;
unset

(

$_SESSION

[

'error'

]

)

;
}
?>
<form method="POST" action="post.php">
<div class="form-group">
<input type="text" id="title" name="title" class="form-control" placeholder="input title">
</div>
<div class="form-group">
<textarea id="content" name="content" class="form-control" rows="10"></textarea>
</div>
<button type="submit" class="btn btn-primary" name="submit">Submit</button> <a href="index.php" class="btn btn-default"><span class="glyphicon glyphicon-arrow-left"></span> Back</a>
</form>
</div>
</div>
</div>
<script src="jquery/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script type="text/javascript">
$(function () {
//Add text editor
$("#content").wysihtml5();
})
</script>
</body>
</html>

Creating our Add Post Script

Next, we create the script that adds our post into our database.

Create a new file, name it as post.php and paste the codes below.

<?php
session_start

(

)

;
if

(

isset

(

$_POST

[

'submit'

]

)

)

{
//connection
$conn

=

new

mysqli(

'localhost'

,

'root'

,

''

,

'db'

)

;
//get post values
$title

=

$_POST

[

'title'

]

;
$content

=

$_POST

[

'content'

]

;
//insert post to database
$sql

=

"INSERT INTO posts (title, post_text) VALUES ('$title

', '$content

')"

;
if

(

$conn

->

query

(

$sql

)

)

{
$_SESSION

[

'success'

]

=

'Post added successfully'

;
header

(

'location: index.php'

)

;
}
else

{
$_SESSION

[

'error'

]

=

'Cannot add post'

;
header

(

'location: add.php'

)

;
}
}
else

{
$_SESSION

[

'error'

]

=

'Please fill up post form first'

;
header

(

'location: index.php'

)

;
}
?>

Creating our View Post

Lastly, we create the page where we can view individual posts.

Create a new file, name it as view.php and paste the codes below.

<?php
//get the id
$id

=

$_GET

[

'id'

]

;
//get the row with the id
$conn

=

new

mysqli(

'localhost'

,

'root'

,

''

,

'db'

)

;
$sql

=

"SELECT * FROM posts WHERE id = '$id

'"

;
$query

=

$conn

->

query

(

$sql

)

;
$row

=

$query

->

fetch_assoc

(

)

;
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to Add WYSIHTML5 Text Editor</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1 class="text-center" style="margin-top:30px">Add WYSIHTML5 Text Editor</h1>
<hr>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<h4><b>TITLE</b>: <?php

echo

$row

[

'title'

]

;

?>

</h4>
<?php

echo

$row

[

'post_text'

]

;

?>
</div>
</div>
</div>
</body>
</html>

That ends this tutorial. Happy Coding :)

Download

You must upgrade your account or reply in the thread to view the hidden content.

How to Add WYSIHTML5 Text Editor

More options

Bigglez

452,496

331,422

331,430