当前位置:

首页 > 编程开发 > ckeditor syntaxhighlighter代码高亮插件,完美修复

ckeditor syntaxhighlighter代码高亮插件,完美修复

针对CKeditor与FCKeditor对象模型差异,采用先插入新节点再删除原节点的方法修复代码高亮插件。高级配置新增“不自动转换超链接”选项,用户可自由控制代码中网址是否自动转为超链接,提升灵活性。

CKeditor 的对象模型与 FCKeditor 有着本质区别,最直接的影响就是:无法直接通过 innerHTML 或 outerHTML 来操作节点。解决这个问题需要绕一个小弯——在当前节点前插入一个新节点,然后再删除原节点。虽然方法看起来略显笨拙,但确实有效解决了实际问题。

与此同时,高级配置页面新增了一个选项:“不自动转换超链接”。SyntaxHighlighter 默认会将代码中的网址自动转为超链接,这在某些场景下会干扰代码展示效果。现在,用户可以根据需要自由开启或关闭这一功能,体验更灵活。

来个图:

具体使用方法如下:

1. 解压附件到 plugins 目录(Sablog2.0 路径为 include/editor/plugins)。
2. 打开 CKeditor 目录下的 config.js 文件,添加两行配置:
config.extraPlugins = 'syntaxhighlight';
config.toolbar_Full.push(['Code']);
3. 打开你的编辑器,开始插入代码吧~

syntaxhighlight.rar

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系bd@zhengruan.com
作者最新文章
编程开发
相关文章 更多
ckeditor和ueditor那个好 CKEditor和UEditor使用比较
ckeditor和ueditor那个好 CKEditor和UEditor使用比较

CKEditor功能成熟但需自行编写较多逻辑;UEditor界面美观、开箱即用,但前后台交互较复杂,上传配置需注意路径前缀,还需处理Struts过滤器对静态请求的拦截问题。两者各有侧重,需根据项目需求选择。

最新版CKEditor的配置方法及插件(Plugin)编写示例
最新版CKEditor的配置方法及插件(Plugin)编写示例

CKEditor是开源HTML编辑器,通过编辑config.js配置文件可自定义工具栏和字体大小。插件开发以分页插件为例:在插件目录plugins下创建名为apage的子文件夹,编写plugin.js实现对话框或直接插入分页符,需在配置中声明extraPlugins参数以加载该插件。

ckeditor syntaxhighlighter代码高亮插件配置分享
ckeditor syntaxhighlighter代码高亮插件配置分享

通过整合SyntaxHighlighter插件,为CKEditor添加代码高亮功能。需下载编辑器与插件,创建insertcode插件并编写plugin.js与dialog.js,修改ckeditor.js配置以注册插件并添加工具栏按钮,最后在语言文件中添加映射。该方法支持多种编程语言代码的插入与高亮显示。

CKEditor中加入syntaxhighlighter代码高亮插件
CKEditor中加入syntaxhighlighter代码高亮插件

在CKEditor3.3.1中集成SyntaxHighlighter需新建insertcode插件目录,包含plugin.js、对话框配置及图标;修改ckeditor.js添加插件引用,调整语言文件,在前端引入样式与脚本,完成插入代码高亮功能。

dedecms ckeditor编辑器添加链接默认新窗口打开的修改方法
dedecms ckeditor编辑器添加链接默认新窗口打开的修改方法

用DEDECMS做网站的朋友,多半都遇到过这个小小的困扰:文章页里插入的链接,默认总是直接在当前窗口跳转,而不是在新标签页打开。去网上搜一下,找到的教程几乎全是针对老版FCKeditor的,而DEDECMS v5.7 默认搭载的已经是ckeditor编辑器了。这里简单记一下修改方法,希望能帮到同样被

为SyntaxHighlighter添加新语言的方法
为SyntaxHighlighter添加新语言的方法

以Lua为例,获取shBrushLua.js,在WordPress插件目录新建文件夹,上传JS并创建同名PHP插件文件,激活即可扩展SyntaxHighlighter语言支持,独立插件避免升级丢失配置。

ckeditor插件开发简单实例
ckeditor插件开发简单实例

具体步骤:在CKeditor中开发自定义插件,先创建插件文件夹并放置图标,然后编写plugin.js实现选中文字后自动插入一个带超链接的图标,最后修改config.js加载插件并配置工具栏按钮,即可在编辑器中使用该插件。

SyntaxHighlighter配合CKEditor插件轻松打造代码语法着色
SyntaxHighlighter配合CKEditor插件轻松打造代码语法着色

基于3.0.83版SyntaxHighlighter与3.5.3版CKEditor,整理了一套代码语法着色集成方案。在CKEditor中开发insertcode插件,通过配置config.js添加工具栏按钮,实现在页面中插入代码并高亮显示,支持多种编程语言,提升代码可读性。

PHP中CKEditor和CKFinder配置问题小结
PHP中CKEditor和CKFinder配置问题小结

在PHP中配置CKEditor和CKFinder时,需预设config.js的默认设置,使用PHP类生成编辑器,设置CKFinder的CheckAuthentication函数通过session验证,利用session定位上传路径,并采用日期重命名上传文件以防乱码,最后通过CKFinder::SetupCKEditor实现两者配合,提升安全性。

当使用ckeditor控件时,需要校验输入内容是否为空的一种解决办法(转帖)
当使用ckeditor控件时,需要校验输入内容是否为空的一种解决办法(转帖)

CKEditor内容非空验证失效,因编辑器在表单提交后才更新隐藏域,验证脚本提前读取空值。解决方法:在验证函数中取消表单提交,利用setTimeout延迟50毫秒,待编辑器完成同步后再执行验证和提交。

查看更多
精品专题 更多
装机必备
装机必备

正软商城装机必备专区,精选办公、浏览器、安全防护、影音播放、压缩解压、设计创作和系统工具等电脑常用正版软件,帮助用户快速完成新电脑软件配置。

Windows
Windows

正软商城Windows软件专区,汇集适用于Windows电脑的办公、设计、安全防护、影音播放、开发工具和系统优化软件,提供软件介绍、系统要求、正版授权及购买下载服务。

PDF教程
PDF教程

正软商城PDF教程频道提供PDF编辑、转换、合并、拆分、压缩及格式处理方法,同时介绍常用PDF软件和工具的使用技巧。

Mac软件 更多
Postman macOS版
Postman macOS版
Mac

Postman是一套面向API全生命周期的开发与测试平台,可在Mac上发送和调试多种协议请求,管理集合、环境及认证信息,并完成脚本测试、模拟服务、监控、文档发布和团队协作。它适合开发、测试及运维人员使用,提供个人免费方案。

Docker Desktop macOS版
Docker Desktop macOS版
Mac

Docker Desktop 是 Docker 官方为 Mac 提供的容器开发环境,集成 Docker Engine、命令行工具、Compose、Build、Kubernetes 与图形化管理界面。

Android Studio macOS版
Android Studio macOS版
Mac

Android Studio 是 Google 面向安卓应用开发提供的官方集成开发环境,基于 IntelliJ IDEA 构建。它整合智能代码编辑、Gradle 构建、界面预览、设备模拟、性能分析、调试测试及 APK 分析等工具。

WINDOWS 更多
PixPix 网页版
PixPix 网页版
Windows

PixPix 是面向品牌、卖家和内容团队的在线 AI 图片视频创作平台,提供图视频 Agent、无限画布、图片生成、视频生成、自然语言编辑及商品套图、产品精修和带货视频等电商工具。

Postman Windows版
Postman Windows版
Windows

Postman 是面向 API 全生命周期的开发与协作平台。Windows 桌面版可用于构建和发送 HTTP、GraphQL、gRPC、WebSocket、MQTT 等请求,并提供环境变量、集合、脚本测试、模拟服务、监控、文档及团队工作区等

Docker Desktop Windows版
Docker Desktop Windows版
Windows

Docker Desktop 为 Windows 开发者提供集成式容器环境,内置 Docker Engine、命令行工具、Compose、Build 与 Kubernetes 等组件,可在本机完成镜像构建、容器运行、日志查看和资源管理。