如何在PHP中使用ckeditor

时间:2018-06-30 19:46:55

标签: javascript php web

我正在构建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>

1 个答案:

答案 0 :(得分:0)

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

header.php

使用以下代码
    val futureResponse: Future[String] = for {
      chunk1 <- ws.url(api_base + "/read")
        .withQueryString("offset" -> 0.toString, "length" -> 1E6.toString)
        .get()
        .map { response =>
          val raw_data = (Json.parse(response.body) \ "data").as[String]
          val decoded_data = Base64.getDecoder.decode(raw_data)
          new String(decoded_data, StandardCharsets.UTF_8)
        }
      chunk2 <- {
        ws.url(api_base + "/read")
          .withQueryString("offset" -> 1E6.toString, "length" -> 1E6.toString)
          .get()
          .map { response =>
            val raw_data = (Json.parse(response.body) \ "data").as[String]
            val decoded_data = Base64.getDecoder.decode(raw_data)
            chunk1 + new String(decoded_data, StandardCharsets.UTF_8)
          }
      }
    } yield chunk2

我已从 header.php

中删除了您的 DecoupledEditor 脚本

现在在文本区域之后初始化 ClassicEditor.create()脚本

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

希望这对您有帮助!