xhEditor及其代码高亮显示问题的解决

第一步，安装配置xhEditor

1、下载

直接去官网：http://xheditor.com/

2、安装

参见官网的manual：1. xhEditor入门基础 --》1.4. xhEditor基本使用指南》

 

 

第二步，安装配置prettify

下载，安装。参见官网

 

第三步，xhEditor + prettify

这是重点。

网上有文章说的很清楚（利用prettify为编辑器xhEditor添加代码高亮显示），但是，有个关键之处没讲到，所以，按文章去做，是没办法成功的！我试过N次，全部失败！

痛苦的很，没办法，去xhEditor官网看看吧。

看2.5 插件开发指南。

仔细看。

注意，其中提到了demo9。那就去看demo9的代码吧。

原来，那篇文章的js代码就是从这儿拿的！可为什么我原样copy也不行呢？！

把demo9代码存到本机，没问题！

删掉其它的test，仅保留prettify部分。demo9没问题。

把js和外部js文件链接部分的源代码，原样copy到我的代码里。不工作！

晕了！继续。有点恼羞成怒了。。。把</head>前全部换成demo9。不工作！

把textarea的id也换成一模一样。不工作！

该绝望了吧。。。

绝望中产生希望。再看textarea。

如果不采用插件，textarea的定义大概是这样的：

<textarea name="xh" id="xh"  class="xheditor"/>
</textarea>

再看看demo9是怎么写的：

<textarea id="elm1" name="elm1" rows="12" cols="80" style="width: 80%">
</textarea>

狗日的！居然没有了class！

原来，一旦写了class="xheditor"，工具栏就被覆盖为默认的了。再或者，需要通过某些参数来改变默认工具栏？Anyway，至少，这么直不楞登的写上class=xheditor是肯定不行了。

郁闷的是，那篇网络文章没提。

更郁闷的是，官网也没提！

 

最后，交给我了。

转载于:https://www.cnblogs.com/tecfaq/archive/2012/02/29/2374735.html