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>         <metahttp-equiv="Content-Type"content="text/html; charset=utf-8">           <title>UEditor</title>       </head>      <body>
<divstyle="width:99%">
<formaction="test.php"method="post">标题：<inputtype="text"name="title"style="width:90%"/><br/>内容：<textareaid="container"name="content"type="text/plain"></textarea><br/><!--加载编辑器的容器-->
<inputtype="submit"value="提交" />
</form>
</div>
</body>
</html>
<scripttype="text/javascript"src="./ueditor/ueditor.config.js"></script><!--配置文件-->
<scripttype="text/javascript"src="./ueditor/ueditor.all.js"></script><!--编辑器源码文件--> <!--实例化编辑器-->
<scripttype="text/javascript">
varue=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>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8" />
<title>结果页</title>
<!--SyntaxHighlighter的基本脚本-->
<scripttype="text/javascript"src="./syntaxhighlighter/scripts/shCore.js"></script>
<!--SyntaxHighlighter的对各个编程语言解析的脚本-->
<scripttype="text/javascript"src="./syntaxhighlighter/scripts/shBrushJScript.js"></script>
<scripttype="text/javascript"src="./syntaxhighlighter/scripts/shBrushPhp.js"></script>
<scripttype="text/javascript"src="./syntaxhighlighter/scripts/shBrushJava.js"></script>
<scripttype="text/javascript"src="./syntaxhighlighter/scripts/shBrushCSharp.js"></script>
<scripttype="text/javascript"src="./syntaxhighlighter/scripts/shBrushCpp.js"></script>
<scripttype="text/javascript"src="./syntaxhighlighter/scripts/shBrushAS3.js"></script>
<scripttype="text/javascript"src="./syntaxhighlighter/scripts/shBrushPython.js"></script>
<scripttype="text/javascript"src="./syntaxhighlighter/scripts/shBrushVb.js"></script>
<scripttype="text/javascript"src="./syntaxhighlighter/scripts/shBrushSql.js"></script>
<scripttype="text/javascript"src="./syntaxhighlighter/scripts/shBrushXml.js"></script>
<scripttype="text/javascript"src="./syntaxhighlighter/scripts/shBrushPlain.js"></script>
<!--所使用的SyntaxHighlighter样式-->
<linktype="text/css"rel="stylesheet"href="./syntaxhighlighter/styles/shCoreEclipse.css"/>
<!--初始化SyntaxHighlighter的必须代码，必须放在head中，引入文件之后-->
<scripttype="text/javascript">SyntaxHighlighter.all();</script>
<!--用于消除右上角的广告-->
<scripttype="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><ahref="index.html">返回</a></p>
</body>
</html>

各版本百度网盘下载：链接：http://pan.baidu.com/s/1jIHpXmY 密码：6fdy

演示地址：http://www.richerdyoung.cn/codehighlight/index.html

转载于:https://www.cnblogs.com/richerdyoung/p/6825692.html

UEditor整合代码高亮插件SyntaxHighlighter相关推荐

  1. html代码高亮带行号,无法解决的难题：代码高亮插件SyntaxHighlighter Evolved的行号问题...

    WordPress 的 SyntaxHighlighter Evolved 是一个可以高亮显示代码的插件,它使用方便,界面也非常好看,很适合技术博客使用. SyntaxHighlighter Evol ...

  2. 代码高亮插件SyntaxHighlighter

    插件介绍 SyntaxHighlighter 是一款完全基于JavaScript的代码高亮插件. SyntaxHighlighter 可以对大部分编程语言进行着色渲染,而且代码高亮的性能也非常不错. ...

  3. WordPress代码高亮插件SyntaxHighlighter使用详解

    咱们的博客中经常需要粘贴代码,所以我在博客中安装了WordPress的插件 SyntaxHighlighter 这是一个代码高亮.模式化的工具,能代码在网页上以类似IDE编辑器里的样子高亮关键字. 代 ...

  4. Ueditor高亮插件SyntaxHighlighter显示时Bug修复

    Ueditor高亮插件SyntaxHighlighter问题修正 1.如果一行代码太长,就会造成代码块过宽,修改shCoreDefault.css,加上word-break:break-all: 格式 ...

  5. syntaxhighlighter 代码高亮 - 插件化

    syntaxhighlighter 代码高亮 - 插件化 之前做过很多网站,不同的网站也都有不同的经验总结,只是前些年都不怎么注重线上博客.由于现在自身技能的不断丰富,个人的插件库.总结性的经验文档. ...

  6. Word中使用代码高亮插件

    Word中使用代码高亮插件 1.下载并安装:SyntaxHighlighter4Word.zip 解压,然后双击bin\word2010\Kong.SyntaxHighlighter.Word2010 ...

  7. 谈谈iceCode代码高亮插件的开发问题，由我们国人开发代码高亮插件！

    做为一名资深的开发者,有时候再写一些技术性的文章时,常常需要使用代码高亮插件来展示自己的代码,大家都知道SyntaxHighlighter.Google Code Prettify.Highlight ...

  8. OLW （Open Live Writer）安装代码高亮插件方法（简明）

    1.首先下载OLW代码高亮插件,请点击--->OLW代码高亮插件 2.在你安装OLW的目录下(顺便说一下默认的安装目录为C:\Users\你的用户名\AppData\Local\OpenLive ...

  9. OneNote2016安装代码高亮插件

    onenote2016安装代码高亮插件(notehilight)时候,遇到点小问题.首先是在一个csdn博客那里看到的安装插件的详细步骤.详细步骤.博主写的过程很清楚,但是提供的插件地址是很老的插件地 ...

最新文章

  1. 域名怎么绑定ip_服务器怎么绑定域名?
  2. Android修改原生AlertDialog按钮的颜色大小边距位置以及标题居中等
  3. wps office oa控件 痕迹_WPS加载项案例应用回顾
  4. Asynchronous（异步处理-Promise）
  5. [-1]是也乎,(￣▽￣)
  6. MEMCACHED在集群环境下对并发更新是否保持数据一致
  7. 被美列入投资黑名单后 商汤重启公开招股发行规模定价没变
  8. Ubuntu 16.04启用 TCP 拥塞控制之 BBR
  9. Mac OS用Anaconda安装Jupyter Notebook
  10. adb 连接某个wifi_adb通过wifi连接android设备的方法（根据网络中大神的提示加上自我摸索得到）：...
  11. Kalman Fuzzy Actor-Critic Learning Automaton Algorithm for the Pursuit-Evasion Differential Game
  12. 一个乞丐的故事（强烈推荐）
  13. LeetCode练习题：斐波那契数列
  14. wso2_WSO2注册表安装简介
  15. 科研之路（2）：分析学习别人的科研历程
  16. [b2g] firefoxOS 移植记录
  17. 遇到一位贵人是什么体验，贵人到底有多重要？
  18. 一些调格式的经验 插入图注和尾注
  19. 比较Perl、PHP、Python、Java和Ruby
  20. 2021年广西省安全员C证免费试题及广西省安全员C证考试试卷

热门文章

  1. unity塔防游戏怪物转向_萌宠打怪物手游下载-萌宠打怪物官方版下载
  2. PLC输入端口触点类型介绍
  3. 【单片机基础】stc89c52单片机实现流水灯的三种编程方式
  4. 基于组态王6.55的实时数据采集助手V1.0
  5. 数字图像处理Matlab-彩色图像处理（附代码）
  6. Java jta 原理_Java的分布式事务（JTA和XA）
  7. webGL、webGPU、封装、渲染引擎 three.js、游戏引擎，定位是游戏开发，在前面的渲染引擎基础上，还提供了骨骼动画、物理引擎、AI、GUI 等功能，以及可视化编辑器来设计关卡，支撑大型游戏
  8. 四菱天线怎么加强_四菱天线制作方法.doc
  9. 苹果证书p12和描述文件的创建教程
  10. 【DB2报错】创建存储过程报SQLSTATE:-104 SQLCODE:42601