时间戳

首页 > 解决方案 > 如何在php中使用ckeditor

javascript - 如何在php中使用ckeditor

问题描述

我正在构建一个CMS系统，我发现我无法在我的文本区域配置ckeditor脚本，谁能帮我解决这个问题我的代码如下： 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>

我使用“body”来确保代码必须适用于 id 为“body”的 TEXTAREAS ...这是文本区域的代码：

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

标签： javascriptphpweb

解决方案

您已在header.php文件中包含经典编辑器脚本，并且您正在尝试访问DecoupledEditor.create()方法，该方法将引发错误。理想情况下，您应该使用ClassicEditor.create()方法

将以下代码用于header.php

<?php
ob_start();
include "../includes/db.php";
include "functions.php";
session_start();
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>

我已从header.php中删除了您的DecoupledEditor脚本

现在在你的 textarea 之后初始化ClassicEditor.create()脚本

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

希望对你有帮助！！

推荐阅读