How to use ckeditor in php
How to use ckeditor in php
I am building a CMS system and I found that I can not configure the ckeditor script on my text area, can anyone help me to solve the issue
My code is below:
header.php
<?php ob_start(); // helps to buffer our project ?>
<?php include "../includes/db.php"?>
<?php include "functions.php"?>
<?php ob_start(); ?>
<?php session_start(); ?>
<?php
if (!isset($_SESSION['rl'])){
header("Location:../index.php");
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Bootstrap Admin Template</title>we
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- FOR CHART API -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!-- CDN for TEXT EDITOR -->
<script src="https://cdn.ckeditor.com/ckeditor5/10.1.0/classic/ckeditor.js"></script>
</head>
<body>
<script>
DecoupledEditor
.create( document.querySelector( '#body' ) )
.then( editor => {
const toolbarContainer = document.querySelector( '#body' );
toolbarContainer.appendChild( editor.ui.view.toolbar.element );
} )
.catch( error => {
console.error( error );
} );
</script>
I used 'body' to ensure the code must apply on TEXTAREAS with id 'body'... here's code for text area:
<div class="form-group">
<label for="title">Post Content</label>
<textarea class="form-control" name="post_content" id="body" cols="30" rows="10"></textarea>
</div>
1 Answer
1
You have included Classic editor script in your header.php file and you are trying to access DecoupledEditor.create() method which will throw an error.
Ideally, you should use ClassicEditor.create() method
Use below code for header.php
<?php ob_start(); // helps to buffer our project ?>
<?php include "../includes/db.php"?>
<?php include "functions.php"?>
<?php ob_start(); ?>
<?php session_start(); ?>
<?php
if (!isset($_SESSION['rl'])){
header("Location:../index.php");
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Bootstrap Admin Template</title>we
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- FOR CHART API -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!-- CDN for TEXT EDITOR -->
<script src="https://cdn.ckeditor.com/ckeditor5/10.1.0/classic/ckeditor.js"></script>
</head>
<body>
I have removed your DecoupledEditor script from header.php
Now initialize ClassicEditor.create() script after your textarea
<div class="form-group">
<label for="title">Post Content</label>
<textarea class="form-control" name="post_content" id="body" cols="30" rows="10"></textarea>
</div>
<script>
ClassicEditor
.create( document.querySelector( '#body' ) )
.catch( error => {
console.error( error );
} );
</script>
Hope this will help you!!
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
