kindeditor编辑器插入编程代码

最新推荐文章于 2024-10-26 10:47:21 发布

ymnets

最新推荐文章于 2024-10-26 10:47:21 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： Plugin 文章标签：编程 stylesheet javascript manager function

本文链接：https://blog.youkuaiyun.com/ymnets/article/details/7619355

Plugin 专栏收录该内容

2 篇文章

订阅专栏

本文将指导您如何在个人技术博客中集成代码高亮功能，并详细介绍如何使用kindeditor。通过引入特定的JS文件和CSS样式，您将能够轻松实现代码段的美观展示。此外，我们还将演示如何配置kindeditor编辑器，以便更好地管理上传文件、文件资源管理等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上面为图片展示！你希望在自己建造的个人技术博客中加入代码高亮吗？

接下来直接看操作及代码。大家跟着做就可以了。不知道kindeditor怎么用

请看我发布的kindeditor用法

引入JS

<script charset="utf-8" src="/editor/kindeditor/Adminkindeditor.js"language="javascript" type="text/javascript"></script>
<link href="/editor/kindeditor/plugins/code/prettify.css" rel="stylesheet" type="text/css" />
<script charset="utf-8" src="/editor/kindeditor/plugins/code/prettify.js" language="javascript" type="text/javascript"></script>

加载编辑器

var editor1;
KindEditor.ready(function (K) {
    editor1 = K.create(#ABody, {
        cssPath: /editor/kindeditor/plugins/code/prettify.css,
        uploadJson: /editor/kindeditor/asp.net/upload_json.ashx,
        fileManagerJson: /editor/kindeditor/asp.net/file_manager_json.ashx,
        allowFileManager: true
    });
    prettyPrint();
});

HMTL里面的编辑器

<textarea id="ABody" cols="100" rows="8" style="width: 580px; height: 280px; visibility: hidden;"></textarea>