UEditor整合代码高亮插件SyntaxHighlighter
1 下载UEditor ： http://ueditor.baidu.com/website/download.html
下载SyntaxHighlighter ：https://github.com/syntaxhighlighter/syntaxhighlighter （版本：3.0.83）
2 UEditor的功能太多，根本就不用向用户开放这么多功能。
首先，UEditor的元素路径就不用显示给用户看了，没这个必要，
打开ueditor.config.js。如下图所示，将关于元素路径的第250行的注释去掉，
将默认的true改成false，这里注意前面的逗号不能去掉，因为这行实际上是处于一个超大的Json数组里面，此乃其中的一个元素
3 打开ueditor.all.js 自行选择要处理的代码语言
测试代码
html部分：index.html
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>UEditor</title>
</head>
<body>
<div style="width:99%">
<form action="test.php" method="post">
标题：<input type="text" name="title" style="width:90%"/><br/>
内容：<textarea id="container" name="content" type="text/plain"></textarea><br/><!--加载编辑器的容器-->
<input type="submit" value="提交" />
</form>
</div>
</body>
</html>
<script type="text/javascript" src="./ueditor/ueditor.config.js"></script><!-- 配置文件 -->
<script type="text/javascript" src="./ueditor/ueditor.all.js"></script><!-- 编辑器源码文件 --> <!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor("container",{toolbars:[ [
//'anchor', //锚点
'undo', //撤销
'redo', //重做
'bold', //加粗
//'indent', //首行缩进
//'snapscreen', //截图（需要插件，一般不开）；
'italic', //斜体
'underline', //下划线
'strikethrough', //删除线
'subscript', //下标
//'fontborder', //字符边框
'superscript', //上标
//'formatmatch', //格式刷
//'source', //源代码
//'blockquote', //引用
//'pasteplain', //纯文本粘贴模式
'selectall', //全选
//'print', //打印
'preview', //预览
'horizontal', //分隔线
'removeformat', //清除格式
//'time', //时间
//'date', //日期
'unlink', //取消链接
//'insertrow', //前插入行
//'insertcol', //前插入列
//'mergeright', //右合并单元格
//'mergedown', //下合并单元格
//'deleterow', //删除行
//'deletecol', //删除列
//'splittorows', //拆分成行
//'splittocols', //拆分成列
//'splittocells', //完全拆分单元格
//'deletecaption', //删除表格标题
//'inserttitle', //插入标题
//'mergecells', //合并多个单元格
//'deletetable', //删除表格
//'cleardoc', //清空文档
//'insertparagraphbeforetable', //"表格前插入行"
'insertcode', //代码语言
'fontfamily', //字体
'fontsize', //字号
//'paragraph', //段落格式
'simpleupload', //单图上传
//'insertimage', //多图上传
//'edittable', //表格属性
//'edittd', //单元格属性
'link', //超链接
//'emotion', //表情
'spechars',//特殊字符
'searchreplace', //查询替换
//'map', //Baidu地图
//'gmap', //Google地图
//'insertvideo', //视频
//'help', //帮助
'justifyleft', //居左对齐
'justifyright', //居右对齐
'justifycenter', //居中对齐
'justifyjustify', //两端对齐
'forecolor', //字体颜色
//'backcolor', //背景色
//'insertorderedlist', //有序列表
//'insertunorderedlist', //无序列表
//'fullscreen', //全屏
//'directionalityltr', //从左向右输入
//'directionalityrtl', //从右向左输入
//'rowspacingtop', //段前距
//'rowspacingbottom', //段后距
//'pagebreak', //分页
//'insertframe', //插入Iframe
//'imagenone', //默认
//'imageleft', //左浮动
//'imageright', //右浮动
//'attachment', //附件
//'imagecenter', //居中
//'wordimage', //图片转存
//'lineheight', //行间距
//'edittip ', //编辑提示
//'customstyle', //自定义标题
//'autotypeset', //自动排版
//'webapp', //百度应用
//'touppercase', //字母大写
//'tolowercase', //字母小写
//'background', //背景
//'template', //模板
//'scrawl', //涂鸦
//'music', //音乐
//'inserttable', //插入表格
//'drafts', // 从草稿箱加载
//'charts', // 图表
]
]});
</script>
PHP 部分：test.php
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>结果页</title>
<!--SyntaxHighlighter的基本脚本-->
<script type="text/javascript" src="./syntaxhighlighter/scripts/shCore.js"></script>
<!--SyntaxHighlighter的对各个编程语言解析的脚本-->
<script type="text/javascript" src="./syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="./syntaxhighlighter/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="./syntaxhighlighter/scripts/shBrushJava.js"></script>
<script type="text/javascript" src="./syntaxhighlighter/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="./syntaxhighlighter/scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="./syntaxhighlighter/scripts/shBrushAS3.js"></script>
<script type="text/javascript" src="./syntaxhighlighter/scripts/shBrushPython.js"></script>
<script type="text/javascript" src="./syntaxhighlighter/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="./syntaxhighlighter/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="./syntaxhighlighter/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="./syntaxhighlighter/scripts/shBrushPlain.js"></script>
<!--所使用的SyntaxHighlighter样式-->
<link type="text/css" rel="stylesheet" href="./syntaxhighlighter/styles/shCoreEclipse.css"/>
<!--初始化SyntaxHighlighter的必须代码，必须放在head中，引入文件之后-->
<script type="text/javascript">SyntaxHighlighter.all();</script>
<!--用于消除右上角的广告-->
<script type="text/javascript">SyntaxHighlighter.defaults['toolbar'] = false;</script>
</head>
<body>
<p><b>标题：</b>
<?php echo $_POST["title"]?></p>
<p><b>内容：</b><?php echo $_POST["content"]?></p>
<p><a href="index.html">返回</a></p>
</body>
</html>
各版本百度网盘下载：链接：http://pan.baidu.com/s/1jIHpXmY 密码：6fdy
演示地址：http://www.richerdyoung.cn/codehighlight/index.html
UEditor整合代码高亮插件SyntaxHighlighter的更多相关文章
- 一款代码高亮插件 -- SyntaxHighlighter
SyntaxHighlighter 是当前用得最多的一款代码高亮插件,包括本博客也用到了该插件来显示代码,大家可以看到效果了.只不过这是针对WordPress的一款代码高亮插件,而今天我要给大家介绍的 ...
- WordPress代码高亮插件SyntaxHighlighter终极使用详解
子曰: 工欲善其事,必先利其器.作为码农一枚,再加上站长这个已经不再光鲜的称呼,岂能没有一款经济实用.操作简单.而且功能必须强大.样式也必须好看的Wordpress代码高亮插件?!作为一个视代码如生命 ...
- 代码高亮插件SyntaxHighlighter
http://alexgorbatchev.com/SyntaxHighlighter/download/
- 7个高性能JavaScript代码高亮插件
本文由码农网 – 小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染 ...
- [转]7个高性能JavaScript代码高亮插件
对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等.今天我们要来分享一些高 ...
- 代码高亮插件推荐——SyntaxHighlighter++
SyntaxHighlighter++这个插件的最大的优点就是可以在编辑器的下方有一个输入框,里面可以输入代码,然后插入到文章中.就不用编辑文章的时候,在可视化和文本之间来回切换了.非常适合不熟悉ht ...
- ueditor使用代码高亮的方法
最近发现ueditor支持代码高亮,但是页面上并没有起效果,于是网上找了下,发现还需做如下修改: 1.页面引用以下资源文件(均位于ueditor目录中): <script type=" ...
- Word中使用代码高亮插件
Word中使用代码高亮插件 1.下载并安装:SyntaxHighlighter4Word.zip 解压,然后双击bin\word2010\Kong.SyntaxHighlighter.Word2010 ...
- 轻量级jQuery语法高亮代码高亮插件jQuery Litelighter。
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>jQ ...
随机推荐
- valgrind: failed to start tool 'memcheck' for platform 'amd64-linux
valgrind运行错误 问题描述 valgrind运行时,无法找到相关工具文件,具体报错如下 valgrind: failed to start tool 'memcheck' for platfo ...
- Entity Framework应用：使用Code First模式管理存储过程
在EF中使用存储过程和使用视图是很相似的,一般会使用Database对象上的两个方法:SqlQuery和ExecuteSqlCommand.为了从存储过程中读取很多数据行,我们只需要定义一个类,我们会 ...
- Java 获取webapp，Root，classpath，项目等路径工具类
public class UtilPath { public static void main(String[] args) { String systemName = System.getPrope ...
- VMware提示：已将该虚拟机配置为使用 64 位客户机操作系统。但是，无法执行 64 位操作。解决方案
新买了个笔记本,在学习大数据的时候装上VMWare,运行虚拟机发现提示无法执行64位操作.本人系统是win7,64位系统. 之后就是一顿度娘,发现千篇一律都是检测CPU支不支持虚拟化,支持的话去BIO ...
- Ubuntu之命令壁纸
- imx6 qt 24bpp RGB
imx6运行qt,在24bit的LVDS接口屏上显示时,显示效果与实际的不同.蓝色变成了黄色. 本来应该显示成蓝色: 实际上去显示成了黄色: 而其他绿色的图标并没有改变,只是蓝色和黄色互换了. 猜想应 ...
- tftp32作为dhcp服务器
/******************************************************************* * tftp32作为dhcp服务器 * 每次使用tftp进行文 ...
- 基本上每个应用程序领域的程序员都有使用 C++
C++ 的使用基本上每个应用程序领域的程序员都有使用 C++. C++ 通常用于编写设备驱动程序和其他要求实时性的直接操作硬件的软件. C++ 广泛用于教学和研究. 任何一个使用苹果电脑或 Windo ...
- myeclipse配置Hadoop插件
每个版本的 hadoop 都有相应版本的 MyEclipse 插件,官网并没有提供插件的jar包下载.在hadoop/src/contrib 目录下有一个 eclipse-plugin 项目,此项目就 ...
- bootstrap中如何使input中的小图标获得点击事件
bootstrap中,放入input中的小图标是不能点击的. 在表单中经常遇见密码旁边的眼睛图标点击后,可使密码可见. 要使小图标获得点击事件,可在小图标上覆盖一个跟小图标一样大的透明层,然后给透明层 ...