在ASP.NET Web窗体中使用CKEditor 5（带代码块）和Highlight.js

最新推荐文章于 2024-03-07 18:40:07 发布

寒冰屋

最新推荐文章于 2024-03-07 18:40:07 发布

阅读量649

点赞数 1

分类专栏： ASP.NET CORE 文章标签：前端 asp.net javascript CKEditor 5 highlight.js

原文链接：https://www.codeproject.com/Articles/5351960/Using-CKEditor-5-with-Code-Block-and-Highlight-js

版权

ASP.NET CORE 专栏收录该内容

1110 篇文章 54 订阅

订阅专栏

介绍

CKEditor是一个HTML编辑器。highlight.js是一个语法突出显示工具。本文将在ASP.NET中介绍两者的实现。

CKEditor 5

首先从他们的网站下载：CKEditor 5

https://ckeditor.com/ckeditor-5/下载/

需要code blocks插件。包含它的最简单方法是创建和下载“自定义构建”。或者，您可以单独下载code blocks插件，稍后在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内容。

忘记样式文本区域，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并将初始化代码放在文本区域下方：

<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的code blocks插件不包含实时语法突出显示。

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

下载Highlight.js：

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撰写。

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

包括以下CSS链接以导入字体真棒：

<link href="https://stackpath.bootstrapcdn.com/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渲染的一些截图：

更多渲染示例，请访问[现场演示]。

https://www.codeproject.com/Articles/5351960/Using-CKEditor-5-with-Code-Block-and-Highlight-js

寒冰屋

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
在ASP.NET Web窗体中使用CKEditor 5（带代码块）和Highlight.js

有关如何在ASP.NET Web窗体中设置CKEditor 5（HTML编辑器）和highlight.js（JavaScript语法突出显示）指南。
复制链接

扫一扫

专栏目录