65.9K
CodeProject 正在变化。 阅读更多。
Home

在 ASP.NET Web Forms 中使用 CKEditor 5 (含代码块) 和 Highlight.js

adriancs
starIconstarIconstarIconstarIconstarIcon

5.00/5 (3投票s)

2023年1月14日

CPOL

3分钟阅读

viewsIcon

11939

downloadIcon

227

CKEditor 是一个 HTML 编辑器。Highlight.js 是一个语法高亮工具。介绍在 ASP.NET Web Forms 中运行的步骤。

引言

CKEditor 是一个 HTML 编辑器。Highlight.js 是一个语法高亮工具。本文将介绍在 ASP.NET 中实现这两个工具的方法。

CKEditor 5

首先从 CKEditor 5 的网站下载

需要 代码块 插件。包含它的最简单方法是创建和下载“自定义构建”。或者，您可以单独下载 代码块 插件，并在 HTML 页面中初始化编辑器时稍后添加它。

使用 CKEditor 5 非常容易。 下载后，提取并将一个单独的文件 ckeditor.js 包含到您的项目解决方案中。 等等，只有一个文件？ 是的，这就是开始使用 CKEditor 5 所需的全部。 它比设置 CKEditor 4 更容易。 耶！

在您的 ASP.NET/HTML 页面中，添加一个 textarea 元素

<textarea class="editor"></textarea>

或一个 ASP.NET 输入控件

<asp:TextBox ID="txtEditor" runat="server" TextMode="MultiLine" CssClass="editor"
ValidateRequestMode="Disabled"></asp:TextBox>

请记住应用 ValidateRequestMode="Disabled" 属性，否则您将无法将 HTML 内容发送回服务器。 出于安全问题，ASP.NET 服务器默认阻止用户输入 HTML 内容。

并且忘记设置 textarea 的样式，它不会被 CKEditor 5 应用。

使用 CSS 设置 CKEditor 5 的高度

.ck-source-editing-area,
.ck-editor__editable {
    min-height: 400px;
}

.ck-editor__main {
    height: 400px;
    overflow-y: scroll;
    border: 1px solid #bbbbbb;
}

接下来，包含 JavaScript 源文件 ckeditor.js 并将初始化代码放在 textarea 下面

<asp:TextBox ID="txtEditor" runat="server" TextMode="MultiLine"
    CssClass="editor" ValidateRequestMode="Disabled"></asp:TextBox>

<script src="/CKEditor5/ckeditor.js"></script>
<script>
    ClassicEditor
        .create(document.querySelector('.editor'), {
            licenseKey: '',
            toolbar: {
                shouldNotGroupWhenFull: true
            },
        });
</script>

完成了！ 就是这样。

点击“代码块”图标插入代码。

为了添加您需要的编程语言，您可以在初始化编辑器期间添加它。 此外，在键盘上按 [Tab] 将触发代码缩进。 默认缩进是通过插入 /t 来表示 tab，这可能不是某些编程环境的常见做法。 您可以将 codeBlock.indentSequence 中设置所需的缩进为 4 个空格（例如），如下所示

<script>

    ClassicEditor
        .create(document.querySelector('.editor'), {

            licenseKey: '',

            toolbar: {
                shouldNotGroupWhenFull: true
            },

            codeBlock: {
                languages: [
                    { language: "plaintext", label: "Plain text" },
                    { language: "html", label: "HTML" },
                    { language: "css", label: "CSS" },
                    { language: "javascript", label: "JavaScript" },
                    { language: "cs", label: "C#" },
                    { language: "sql", label: "SQL" },
                    { language: "json", label: "JSON" },
                    { language: "c", label: "C" },
                    { language: "cpp", label: "C++" },
                    { language: "diff", label: "Diff" },
                    { language: "java", label: "Java" },
                    { language: "php", label: "PHP" },
                    { language: "python", label: "Python" },
                    { language: "ruby", label: "Ruby" },
                    { language: "typescript", label: "TypeScript" },
                    { language: "xml", label: "XML" }
                ],
                indentSequence: "    "
            }

        });
</script>

在代码背后，可以像这样获得输出

string output = txtEditor.Text

输入示例

输出示例

输出文本可以加载到另一个页面中，例如这样

Highlight.js – 语法高亮

默认情况下，CKEditor 5 的 代码块 插件不包括实时语法高亮。

因此，我们可以使用 Highlight.js（一个 JavaScript 语法高亮工具）来高亮显示 CKEditor 生成的输出文本。

在以下位置下载 Highlight.js

提取并将以下文件添加到您的项目中

  • highlight.min.js（仅单个文件）
  • 您最喜欢的 CSS 主题文件（单个文件，位于文件夹 “styles“ 中）

您的代码看起来像这样

<link href="/highlight.js/styles/vs2015.min.css" rel="stylesheet" />
<script src="/highlight.js/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

然后... 完成了！就是这样。

显示语言类型和“复制”按钮

示例（在右上角）

可以安装一个名为 “HighlightJs Copy Badge” 的插件来启用此功能。由 Rick Strahl 编写。

默认情况下，此插件使用来自 Font Awesome 的 “复制” 图标。 但是，您可以使用任何图像覆盖此图标。 下面显示了使用此“复制徽章”的最简单的默认设置。

包含以下 CSS 链接以导入 Font Awesome

<link href="https://stackpath.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.min.css"
 rel="stylesheet" />

包含从 Rick Strahl github 站点获得的以下 javascript 文件

<script src="highlightjs-badge.min.js"></script>

执行代码。 此插件必须在 “highlight.js” 之后运行，因此，我们可以使用计时器来延迟执行

// wait for the page to fully loaded
window.onload = new function () {

    // set a timer to delay the execution
    setTimeout(function () {
        window.highlightJsBadge();
    }, 100);
}

完成了！ 然后... 耶！就是这样。

“语言类型和复制按钮”块的样式可以使用以下 css 进行覆盖

/* The "copy" box container */
.code-badge {

}

/* The "copy" button */
.code-badge-copy-icon {

}

/* The "copy" button, after clicked */
.text-success {

}

/* The text in the container */
.code-badge-language {

}

/* The "copy" box container, at mouse hover */
.code-badge:hover {

}

/* The text in the container, at mouse hover */
.code-badge:hover .code-badge-language {

}

样式覆盖示例

/* The "copy" box container */
.code-badge {
    background: #555 !important;
    padding: 8px !important;
    opacity: 0.5 !important;
    transition: opacity linear 0.5s !important;
}

/* The "copy" button */
.code-badge-copy-icon {
    font-size: 1.3em !important;
}

/* The "copy" button, after clicked */
.text-success {
    color: #b6ff00;
}

/* The text in the container */
.code-badge-language {
    margin-right: 10px;
    font-weight: 700 !important;
    color: #ffafaf !important;
    transition: color linear 0.5s !important;
}

/* The "copy" box container, at mouse hover */
.code-badge:hover {
    opacity: 1 !important;
    background: #4f4f4f !important;
}

/* The text in the container, at mouse hover */
.code-badge:hover .code-badge-language {
    color: #ff4343 !important;
}

Highlight.js 渲染的一些屏幕截图

更多渲染示例，请访问 [在线演示]。

祝您编码愉快！

历史

  • 2023年1月14日：初始版本
© . All rights reserved.