CKeditor4.4.X版本添加程序代码高亮插件图文详解
[JAVA]_图文详解CKeditor4.4.X版本添加程序代码高亮插件codesnippet
1.去CKeditor官网下载4.4.X及以上版本
官网直通车：点击
2.下载CKeditor插件codesnippet
直通车：点击
3.打开CKeditor的配置文件config.js
加入配置
加入后
编辑器上就多了个图标
点击即可插入程序代码。
展示页面需要导入CSS.JS以及初始化，具体如下
<!-- code高亮模块CSS -->
<link rel="stylesheet" type="text/css"
href="ckeditor/plugins/codesnippet/lib/highlight/styles/monokai_sublime.css" />
<!-- code高亮模块JS -->
<script type="text/javascript"
src="ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js"></script>
<!--注意此初始化方法需要导入jQuery支持-->
<script>
$(function() {
// 初始化代码高亮
hljs.initHighlightingOnLoad();
});
</script>
现在就可以在该页面显示高亮代码了：
http://blog.xqlee.com/article/38.html
评论
相关文章
[JAVA]_图文详解CKeditor4.4.X版本添加程序代码高亮插件codesnippet1.去CKeditor官网下载4.4.X及以上版本官网直通车：点击
1.引入依赖js文件<script type="text/javascript" src="/plugin/ckeditor5/ckeditor.js">l;</s
CKeditor无论那个版本，在我主要以文章编辑的时候，需要去掉默认的H1标签，所以需要自定义配置heading标签。同样CKeditor5 与之前的4版本有所不同。CKeditor5自定义配置...
CKeditor 5.0 如何获取纯文本数据，ckeditor官方其实提供了获取带html脚本的内容方法，只需要配合jQuery简单就获取到了文本内容，详细操作如下
ckeditor绑定keyup/keydown等事件实现一些功能,比如实时保存$(function(){//1编辑器初始化$('textarea#blog_content').ckeditor();
ckeditor4的早期版本，图片上传组件。默认情况会有以下图片预览描述文字，如下图所示：上图红色圈出部分即为图片预览的描述。这个放到应用中会感觉很奇怪。所以多
ckeditor 5 自定义插件实现，自定义一个插件并在toolbar上。点击自定义插件图标响应对应事件。环境ckeditor 5.42.1(github稳定版
本文主要讲解一种方式解决ckeditor编辑器上传的图片时候会添加一个默认的图片的宽高等style属性
针对CKEditor5是否开源免费，我们阅读官方响应文档得到下面的结果：所有下载均受相关开源许可协议或商业许可协议（以适用者为准）的约束。 再查阅更详细的文档，