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

guide.NET 兼容性

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

CKEditor 5 构建器

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

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

最后，您将获得根据您的需求量身定制的现成代码！

查看我们的交互式构建器

# 设置项目

在本指南中，我们将使用一个使用 dotnet new webapp 创建的基本 ASP.NET Core 项目。您可以参考 ASP.NET Core 文档 了解如何在框架中设置项目。

# 从 CDN 集成

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

├── bin
├── obj
├── Pages
│   ├── Index.cshtml
│   └── ...
├── Properties
├── wwwroot
│   ├── assets
|      ├── vendor
|          └── ckeditor5.js
│   ├── css
│   ├── js
│   ├── lib
│   └── favicon.ico
├── appsettings.Development.json
├── appsettings.json
└── ...

在文件中，粘贴来自 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 );
    } );

然后，修改 Pages 目录中的 Index.cshtml 文件以包含 CKEditor 5 脚本。所有必要的脚本和链接都在 CKEditor 5 构建器中的 HTML 代码段中。您可以将它们复制粘贴到您的模板中。它应该类似于以下内容

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <div id="editor"></div>
    <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="assets/vendor/ckeditor5.js"></script>
</div>

最后，在 .NET 项目的根目录中，运行 dotnet watch run 以查看应用程序的实际效果。

# 使用 ZIP 集成

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

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

├── bin
├── obj
├── Pages
│   ├── Index.cshtml
│   └── ...
├── Properties
├── wwwroot
│   ├── assets
|      ├── vendor
|          ├── ckeditor5.js
|          └── ckeditor5.css
│   ├── css
│   ├── js
│   ├── lib
│   └── favicon.ico
├── appsettings.Development.json
├── appsettings.json
└── ...

拥有 CKEditor 5 的所有依赖项后，修改 Pages 目录中的 Index.cshtml 文件以导入它们。所有必要的标记都位于 ZIP 存档中的 index.html 文件中。您可以将其复制粘贴到您的页面中。请注意导入映射和 CSS 链接的路径 - 它们应该反映您的文件夹结构。模板应类似于以下内容

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

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

最后，在 .NET 项目的根目录中，运行 dotnet watch run 以查看应用程序的实际效果。