CKEditor 生态系统文档
Search
Contribute to this guide
主页/CKEditor 5/入门

guide与 Laravel 的兼容性

作为纯 JavaScript/TypeScript 应用程序，CKEditor 5 将在支持此类组件的任何环境中运行。虽然我们没有为任何非 JavaScript 框架提供官方集成，但您可以在您选择的非 JS 框架中包含 CKEditor 5 的自定义配置，例如基于 PHP 的 Laravel。

CKEditor 5 构建器

在我们的交互式构建器中，您可以快速体验 CKEditor 5。它提供了一个易于使用的用户界面，可帮助您配置、预览和下载适合您需求的编辑器。您可以轻松地选择

  • 编辑器类型。
  • 您需要的功能。
  • 首选框架（React、Angular、Vue 或 Vanilla JS）。
  • 首选分发方法。

最后，您将获得适合您需求的现成代码！

查看我们的交互式构建器

# 设置项目

本指南假定您有一个 Laravel 项目。您可以使用 Composer 创建一个基本的 Laravel 项目。请参考 Laravel 文档 了解如何在框架中设置项目。

# 从 CDN 集成

准备项目后，在应用程序中现有的 public 目录中创建一个 assets/vendor/ckeditor5.js 文件。您的文件夹结构应类似于以下结构

├── app
├── bootstrap
├── config
├── database
├── public
│   ├── assets
|      ├── vendor
|          └── ckeditor5.js
│   ├── .htaccess
│   ├── favicon.ico
│   ├── index.php
│   └── robots.txt
├── resources
│   ├── views
|      ├── welcome.blade.php
|      └── ...
├── routes
└── ...

在文件中，粘贴来自 CKEditor 5 构建器的 JavaScript 代码。代码将根据您选择的预设和功能而有所不同。但它应该类似于以下代码

import {
    ClassicEditor,
    AccessibilityHelp,
    Autosave,
    Bold,
    Essentials,
    Italic,
    Mention,
    Paragraph,
    SelectAll,
    Undo
} from 'ckeditor5';
import { SlashCommand } from 'ckeditor5-premium-features';

const editorConfig = {
    toolbar: {
        items: ['undo', 'redo', '|', 'selectAll', '|', 'bold', 'italic', '|', 'accessibilityHelp'],
        shouldNotGroupWhenFull: false
    },
    placeholder: 'Type or paste your content here!',
    plugins: [AccessibilityHelp, Autosave, Bold, Essentials, Italic, Mention, Paragraph, SelectAll, SlashCommand, Undo],
    licenseKey: '<YOUR_LICENSE_KEY>',
    mention: {
        feeds: [
            {
                marker: '@',
                feed: [
                    /* See: https://ckeditor.npmjs.net.cn/docs/ckeditor5/latest/features/mentions.html */
                ]
            }
        ]
    },
    initialData: "<h2>Congratulations on setting up CKEditor 5! 🎉</h2>"
};

ClassicEditor
    .create( document.querySelector( '#editor' ), editorConfig )
    .then( editor => {
        console.log( editor );
    } )
    .catch( error => {
        console.error( error );
    } );

然后，修改 resources/views 目录中的 welcome.blade.php 文件以包含 CKEditor 5 脚本。来自 CKEditor 5 构建器的所有必要脚本和链接都在 HTML 代码片段中。您可以将它们复制粘贴到您的模板中。它应该类似于以下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CKE5 in Laravel</title>
    <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.3.0/ckeditor5.css" />
    <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5-premium-features/43.3.0/ckeditor5-premium-features.css" />
    <script type="importmap">
        {
            "imports": {
                "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/43.3.0/ckeditor5.js",
                "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/43.3.0/",
                "ckeditor5-premium-features": "https://cdn.ckeditor.com/ckeditor5-premium-features/43.3.0/ckeditor5-premium-features.js",
                "ckeditor5-premium-features/": "https://cdn.ckeditor.com/ckeditor5-premium-features/43.3.0/"
            }
        }
    </script>
    <script type="module" src="{{ URL::asset('assets/vendor/ckeditor5.js') }}"></script>
</head>
<body>
    <div id="editor"></div>
</body>
</html>

最后，在 Laravel 项目的根目录中，运行 php artisan serve 以查看应用程序的运行情况。

# 使用 ZIP 集成

我们的新 CKEditor 5 构建器尚未提供 ZIP 输出 - 但将来会提供。在此期间，您可以使用 下载页面 上提供的通用 ZIP 包之一。

下载并解压缩 ZIP 存档后，将 ckeditor5.js 和 ckeditor5.css 文件复制到 public/assets/vendor/ 目录中。应用程序的文件夹结构应类似于以下结构。

├── app
├── bootstrap
├── config
├── database
├── public
│   ├── assets
|      ├── vendor
|          ├── ckeditor5.js
|          └── ckeditor5.css
│   ├── .htaccess
│   ├── favicon.ico
│   ├── index.php
│   └── robots.txt
├── resources
│   ├── views
|      ├── welcome.blade.php
|      └── ...
├── routes
└── ...

拥有了 CKEditor 5 的所有依赖项后，修改 resources/views 目录中的 welcome.blade.php 文件以导入它们。所有必要的标记都在 ZIP 存档的 index.html 文件中。您可以将它复制粘贴到您的模板中。注意导入映射和 CSS 链接的路径 - 它们应反映您的文件夹结构。模板应类似于以下代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CKEditor 5 - Quick start ZIP</title>
        <link rel="stylesheet" href="../../assets/vendor/ckeditor5.css">
        <style>
            .main-container {
                width: 795px;
                margin-left: auto;
                margin-right: auto;
            }
        </style>
    </head>
    <body>
        <div class="main-container">
            <div id="editor">
                <p>Hello from CKEditor 5!</p>
            </div>
        </div>
        <script type="importmap">
            {
                "imports": {
                    "ckeditor5": "../../assets/vendor/ckeditor5.js",
                    "ckeditor5/": "../../assets/vendor/"
                }
            }
        </script>
        <script type="module">
            import {
                ClassicEditor,
                Essentials,
                Paragraph,
                Bold,
                Italic,
                Font
            } from 'ckeditor5';

            ClassicEditor
                .create( document.querySelector( '#editor' ), {
                    plugins: [ Essentials, Paragraph, Bold, Italic, Font ],
                    toolbar: [
                        'undo', 'redo', '|', 'bold', 'italic', '|',
                        'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
                    ]
                } )
                .then( editor => {
                    window.editor = editor;
                } )
                .catch( error => {
                    console.error( error );
                } );
        </script>
    </body>
</html>

最后，在 Laravel 项目的根目录中，运行 php artisan serve 以查看应用程序的运行情况。